A Beginner's Guide to the GridView

OK – remember when you first heard about the DataGrid, and how Paging and Sorting were what was called “built-in”? And then, when you found out what a hassel it was, even though it was a lot better than what you had before, you still were kind of disappointed?

Well – now we have the GridView, in ASP.Net 2.0 and your disappointment is over! The ‘AllowPaging’ and ‘AllowSorting’ properties mean exactly what they say – once you set them to ‘True’ – that’s it – that’s all you need to do. It’s what we were all wishing for with the DataGrid.

But wait – there’s more (I hope this doesn’t sound too much like an infomercial)! With only one other control on the page, you can display data quickly and efficiently and never write a line of code to bind to the GridView. That control is the DataSource control. (You can find out more about how to use it here). Add a DataSource control to the page, assign the desired values to the properties both it and the Gridview and you’re through. No more forgetting the Sorting Sub or the Paging Sub or forgetting that you need a DataSet – not a DataReader, in able to add sorting and paging to the grid.

I know – you might be saying to yourself “That can’t be correct!”, but I assure you, it is. Here’s all you need to display data from your favorite Database table:

<asp:GridView id="MyGridView" DataSourceID="MyDataSource1" Runat="Server"/>

<asp:SqlDataSource ID="MyDataSource1" runat="server"
  ConnectionString="Server=YourServer;uid=YourUID;pwd=YourPWD;database=YourDB"
  ProviderName="System.Data.SqlClient"
  SelectCommand="SELECT [Field Name List] FROM [Table Name]">
</asp:SqlDataSource>

Really! – that’s all there is to it! One thing to remember is that the Provider name is apparently case-sensitive, so make aure that’s entered correctly. And – as was noted earlier, to enable Paging and/or Sorting, just add the ‘AllowPaging’ and ‘AllowSorting’ properties to the GridView:

<asp:GridView id="MyGridView"
	DataSourceID="MyDataSource1"
	AllowSorting="True"
	AllowPaging="True"
	Runat="Server"/>

Naturally, there are many more features/attributes to the GridView, much like the DataGrid, including all the formatting options you might need. And, you’re probably saying – “Yea – but what about updating/editing?”. Well, that’s gotten a lot easier also. Just a few things to add.

1. Enter an Updatecommand (Update SQL Statement) to the existing DataSource, just as you added a SelectCommand.
2. Add two properties to your GridView (AutoGenerateEditButton and DataKeysNames)

So – here’s what’s needed in the changed Controls (using Pubs as an example):

<asp:GridView id="MyGridView"
	DataSourceID="MyDataSource1"
	AllowSorting="True"
	AllowPaging="True"
	DataKeys="au_id"
	AutoGenerateEditButton="True"
	Runat="Server"/>

<asp:SqlDataSource ID="MyDataSource1" runat="server"
  ConnectionString="Server=YourServer;uid=YourUID;pwd=YourPWD;database=YourDB"
  ProviderName="System.Data.SqlClient"
  SelectCommand="SELECT [au_id], [au_fname], [au_lname], [phone] FROM [Authors]"
  UpdateCommand="UpdateCommand="Update [pbAuthors] Set [au_lname]=@au_lname, [au_fname]=@au_fname, [phone]=@phone WHERE [au_id]=@au_id">
</asp:SqlDataSource>

Here, the ‘Where clause’ (WHERE [au_id]=@au_id) gets it’s record key from the key assigned in the DataKeys property in the GridView.

One other way to limit viewed fields from the table is to use ‘BoundFields’, very similar to the way the DataGrid works. First, like the DataGrid, turn off the auto-generation of the columns, with the property:

AutoGenerateColumns="False"

Then, inside the Start and End tags for the GridView, insert a ‘Columns’ section, and list each of the columns you need to show, separately:

<Columns>
        <asp:BoundField HeaderText="ID" DataField="au_id" ReadOnly="true" />
        <asp:BoundField HeaderText="Last Name" DataField="au_lname" />
</Columns>

The ‘ReadOnly’ attribute is used when you don’t want that particular field to be edited. For each column you would like to use for sorting, also add a SortExpression attribute, most likely, the same as the DataField:

<asp:BoundField HeaderText="Last Name" DataField="au_lname" SortExpression="au_lname" />

And, lastly, to add Deleting capability, it’s just as easy. All you need to do is to add a ‘DeleteCommand’ to the DataSource Control:

DeleteCommand="Delete from [Authors] Where [au_id]=@au_id"

Next, set the ‘AutoGenerateDeleteButton’ to ‘True’ in the GridView (sense a pattern here?), and then, as you did with the UpdateCommand, make sure the DataKeys Property is set to the Primary Key for your table.

So, there – you have it – Viewing/Sorting/Paging/Editing a database table, and technically, not writing a single line of code. Grid style web development has come a long way since ASP.Net first started, only a few years ago!

Related Posts:

• No Related Posts