GridViewX Primer

The GridView control that ships with ASP.Net 2.0 is a very useful for adding grids of data to your screen. When you move beyond the basics and begin to introduce sorting and paging functionality, the GridView can grow from a small footprint in your page to something much larger.

Instead of living with the large footprint in every page for these common requirements, we extended the GridView control adding sorting and paging function generically. This allows us to put a grid in our page, set a few properties, and have it function as we need it.

Default CSS definitions are built in so the grid can be styled as we need through CSS without repeating those definitions in every page and without needing to recompile the control for each project. We prefer this approach over the style or theme approach that ships with .Net.

Viewstate is disabled in our pages by default so GridView data will need to be reloaded with each event. This is appropriate for the way we use the GridView but you may want to make some changes to it if you require viewstate in your pages.

We’ll also note that much of the complexity about using the GridView comes from the page event sequence. The Pages Primer documents the proper sequence to use when you need sorting and paging supported with this GridView.

We’ll also note that we use the GridView to show information only. It’s extremely rare that we allow data to be edited in a GridView so many of those functions have not been tested.

Sample

Example code is provided below, and a working sample can be seen on our Chamber sample application.

Specifications

Inherits System.Web.Ui.WebControls.GridView (http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.gridview(VS.80).aspx)

No new properties or methods were added for this class. However, the following properties are given the following default values.

Property Defaults

AllowPaging = True
AllowSorting = True
AutoGenerateColumns False
EmptyDataText = No Results …
PagerSettings.Mode = PagerButtons.NumericFirstLast
PagerSettings.PageButtonCount = 5
PagerSettings.Position – PagerPosition.TopAndBottom
PageSize = 50

Style Defaults

Example 1: Grid with sorting, paging, and a link column

From Chamber/Default.aspx

<asp:GridViewX runat="server" ID="grdChamber" AllowPaging="true" AllowSorting="true">
	<Columns>
		<asp:HyperLinkField datatextfield="ChamberName" sortexpression="ChamberName"
			datanavigateurlfields="ChamberId"
			datanavigateurlformatstring="~/Chamber/Detail.aspx?ChamberId={0}"
			headertext="Chamber" />
		<asp:BoundField DataField="City" HeaderText="City"  SortExpression="City"/>
		<asp:BoundField DataField="StateAbbr" HeaderText="ST"  SortExpression="StateAbbr"/>
		<asp:BoundField DataField="ZipCode" HeaderText="ZIP"  SortExpression="ZipCode"/>
		<asp:BoundField DataField="PhoneNumber" HeaderText="Phone"  SortExpression="PhoneNumber"/>
	</Columns>
</asp:GridViewX>
 

From Chamber/Default.aspx.vb

grdChamber.DataSource = myChamber
grdChamber.DataBind()
 

Example 2: Grid with no sorting or paging

From AppGroup/Default.aspx

<asp:GridViewX runat="server" ID="grdAppGroup" AllowPaging="false" AllowSorting="false">
	<COLUMNS>
		<asp:HyperLinkField
			datatextfield="AppGroupName"
			datanavigateurlfields="AppGroupId"
			datanavigateurlformatstring="~/AppGroup/Edit.aspx?AppGroupId={0}"
			headertext="Group Name" />
		<asp:BoundField visible="true" headertext="Description" datafield="AppGroupDescription"></asp:BoundField>
	</COLUMNS>
</asp:GridViewX>
 

From AppGroup/Default.aspx.vb

grdAppGroup.DataSource = myAppGroup
grdAppGroup.DataBind()
 

Additional usage examples are tagged in our weblog as GridViewX