Adding Buttons to a Bound GridView:1. Drag the WebProduct table from Data connection to a page2. Demo Enable Sorting,Editing,Deleting,Selection
Edit Columns
• Edit Columns– Bound Fields– Command Fields:
• Edit, update, cancel• Select• Delete
– Template Fields
• Example:– Click GridView’s smart tag and click:
• Enable Edit– Update, Cancel – ASP.Net will execute the command automatically.
Rearrange the Fields Order
• Click GridView’s smart tag• Select Edit Columns option• Use the Up/Down button of the Selected
Fields window to rearrange fields order
Enable Select• Click GridView’s smart tag and click: Enable
Select– This will add a Select field to the gridview which
is a type of command field.• Click Edit Columns• Click the Select field from the Selected
Fields window to edit its property:– Button type property:
• Button• Link
– “Select text” property:• AddToCart
Adding Textbox to a Bound DataGrid• GridView smart tag/Add New Column:
– From the Available Fields list, select Template fields and click Add:
• HeaderText: This text will be used as column name
• Click OK -• Edit Template
– Drag a textbox to the template window.• Click the smart tag and select End Edit
Template
Select Button
• Select button will trigger GridView’s SelectedIndexChange event. Use this event we can retrieve the value of every cell in the selected row.
• We can use this button to retrieve value entered in the Quantity textbox.
• Properties:– GridView1.SelectedIndex– GridView1.SelectedRow.Cells[Index]
• 0-based index
Command Field: Select• Select a row and trigger event:
– SelectedIndexChanged• Retrieve the selected row:
– GridView1.SelectedRow• Retrieve cells of the selected row:
– GridView1.SelectedRow.Cells[4]– It is a template with a Controls collection
• Convert the template to textbox:– TextBox t = (TextBox)(GridView1.SelectedRow.Cells[4].Controls[1]);
• Retrieve data entered in the textbox:– Response.Write(t.Text);
GridView’s SelectedIndexChanged Event Procedure Example
protected void GridView1_SelectedIndexChanged(object sender, EventArgs e) { string PID; PID=GridView1.SelectedRow.Cells[0].Text; TextBox qty = (TextBox)(GridView1.SelectedRow.Cells[4].Controls[1]); Response.Write(PID); Response.Write(qty.Text); }
Images Folder and Save Image Path in the database
• 1. Add a folder and name it “Images”– Right click project name and select add/New
Folder• 2. Add images to the Images folder:
– Right click Images folder/Add/Existing item/select images to add to the folder
• 3. In the product table, add a field to store the path to the image file.
A Product Table with Image Path
Example: Path to the pic1.jpg file in the Images folder is:~/Images/pic1.jpg
Create a GridView to Show Products with images, textbox and Add Button
• 1. Drag the Product table from the Data Connection to create the bound gridView.
• 2. Select Edit/Column by clicking the smart tag and delete the ProdPicPath field from the Selected Fields list.
• 3. Select Add New Column to add a new template• 4. Select Edit Template and drag an Image control
from the Toolbox to the template.• 4. Click the Image control in the template and
select Edit DataBindings.• 5.Select Field Binding/Bound to/ProdPicPath