Configuring the GridView Control
Having configured the SqlDataSource control, you can now drag-and-drop the GridView control to the page. In the Smart Tag, select SqlDataSource1
in the Choose Data Source dropdown list to bind the SqlDataSource control with the GridView control.
You should also check the Enable Paging, Enable Sorting, and Enable Selection checkboxes (see Figure 7). Figure 7 shows how the GridView control looks after applying the Sand & Sky auto-format.
Figure 7. Configuring the GridView Control: This is how the GridView control looks after applying the Sand & Sky auto-format.
Figure 8. Testing the GridView Control: Press F5 to load the page using the Web browser.
Press F5 to load the page using the Web browser and you should see something similar to Figure 8.
Editing and Deleting Rows in the GridView Control
To make the data editable, switch to Source view and add two new attributes: UpdateCommand and DeleteCommand:
SelectCommand="SELECT [ProductID], [ProductName], [SupplierID], [CategoryID],
[QuantityPerUnit], [UnitPrice] FROM [Alphabetical list of products]"
ConnectionString="<%$ ConnectionStrings:NorthWindConn %>"
UpdateCommand="UPDATE Products SET ProductName = @ProductName,
SupplierID= @SupplierID, CategoryID =@CategoryID , QuantityPerUnit = @QuantityPerUnit ,
UnitPrice = CONVERT(money,@UnitPrice) WHERE ProductID=@ProductID"
DeleteCommand="DELETE FROM Products WHERE ProductID=@ProductID">
|Author's Note: I have purposely avoided using the wizards available in the Smart Tag of the SqlDataSource control to configure additional settings. In Visual Studio 2005 Beta 1, using the wizard will sometimes cause the editing function in the GridView control to fail.
|Figure 9. Editing a Row: After pressing F5, you'll be able to make changes to the rows in the GridView control.|
The UpdateCommand and DeleteCommand attributes specify the SQL statements that execute when you perform an update or delete operation.
After adding the two attributes, the Smart Tag for the GridView control gains two additional checkboxesEnable Editing and Enable Deleting. Check the two additional options.
Press F5 to test the page again. This time you will be able to make changes to the rows in the GridView control (see Figure 9).
|Author's Note: The Delete function does not work correctly in Beta 1. This bug should be fixed in the next beta release.