Sorting the DataGrid

One of the primary features of the DataGrid is the ability to automatically sort its contents. When the AllowSorting property is set to true, the DataGrid generates LinkButton controls in the column headers of the columns that have a value for the SortExpression property. Auto-generated columns will automatically set the SortExpression property to the name of the field to which the column is bound. The OnSortCommand event is fired when the user clicks one of these LinkButton controls. This functionality can be used when customizing the user interface, such as using a Button control or ImageButton consistently throughout the site to create a standard appearance. The sorting functionality can be invoked when the user selects an element that has been created in place of the LinkButton controls.

Code Listing 3-10 has two DataGrid controls, both using the same set of data. The first DataGrid control leverages the built-in support for paging. The AllowSorting property is set to true, and the SortDataGrid event handler is invoked when a column is selected. We are using a DataView to take advantage of the ability to set the column name as the sort expression. This event handler creates the data with the new sort expression and rebinds the DataGrid. The second DataGrid on the page does more work to customize the output. In addition to its own data-sorting event handler, a new event handler is provided that is called whenever a new item is created. In the ItemCreated event handler, we only act if the item being created is the header. When the header is being created, we retrieve the individual cells from the DataGrid and add a new Button to the Controls collection. The second DataGrid still has the sorting functionality, but we created Button controls instead of the default LinkButton controls.

Code Listing 3-10: DataGridSorting.aspx

 <%@Import namespace="System.Data" %>
<script language="C#" runat="server">
protected void Page_Load(object o, EventArgs e) {
    if(!IsPostBack) {
        datagrid.DataSource = GetData("");
        datagrid2.DataSource = GetData("");
        DataBind();
    }
}
 
protected void SortDataGrid(object o, 
    DataGridSortCommandEventArgs e) {
    datagrid.DataSource = GetData(e.SortExpression);
    datagrid.DataBind();
}
 
protected void SortDataGrid2(object o, 
    DataGridSortCommandEventArgs e) {
    datagrid2.DataSource = GetData(e.SortExpression);
    datagrid2.DataBind();
}
 
DataView GetData(string sortString) {
    DataTable data = new DataTable();
    data.Columns.Add(new DataColumn("TheID", typeof(Int32)));
    data.Columns.Add(new DataColumn("Name", typeof(string)));
    data.Columns.Add(new DataColumn("TimeZone", typeof(string)));
 
    DataRow dr;
    dr = data.NewRow();
    dr[0] = 1; dr[1] = "Washington"; dr[2] = "Pacific";
    data.Rows.Add(dr);
    dr = data.NewRow();
    dr[0] = 2; dr[1] = "Utah"; dr[2] = "Mountain";
    data.Rows.Add(dr);
    dr = data.NewRow();
    dr[0] = 3; dr[1] = "Wisconsin"; dr[2] = "Central";
    data.Rows.Add(dr);
    dr = data.NewRow();
    dr[0] = 4; dr[1] = "New York"; dr[2] = "Eastern";
    data.Rows.Add(dr);
    dr = data.NewRow();
    dr[0] = 5; dr[1] = "Florida"; dr[2] = "Eastern";
    data.Rows.Add(dr);
 
    DataView view = new DataView(data);
    view.Sort = sortString;
    return view;
}
 
void DataGrid_ItemCreated(object o, DataGridItemEventArgs e) {
    if(e.Item.ItemType == ListItemType.Header) {
        Button b = new Button();
        b.Text = "ID";
        b.CommandName = "Sort";
        b.CommandArgument="TheID";
        TableCell tc = e.Item.Cells[0];
        tc.Controls.Add(b);
 
        b = new Button();
        b.Text = "Name";
        b.CommandName = "Sort";
        b.CommandArgument = "Name";
        tc = e.Item.Cells[1];
        tc.Controls.Add(b);
 
        b = new Button();
        b.Text = "Time Zone";
        b.CommandName = "Sort";
        b.CommandArgument = "TimeZone";
    
        tc = e.Item.Cells[2];
        tc.Controls.Add(b);   
    }
}
</script>
<form runat="server">
    <asp:DataGrid runat="server"  AllowSorting="true" 
        OnSortCommand="SortDataGrid" ShowHeader="true" />
    <asp:DataGrid runat="server"  
        AutoGenerateColumns="false" OnSortCommand="SortDataGrid2" 
        AllowSorting="true" OnItemCreated="DataGrid_ItemCreated">
        <Columns>
            <asp:BoundColumn DataField="TheID" />
            <asp:BoundColumn HeaderText="Name" DataField="Name" />
            <asp:BoundColumn HeaderText="Time Zone" 
                DataField="TimeZone" />
        </Columns>
    </asp:DataGrid>
</form> 

When Does the DataGrid Control Need to Be Data-Bound?

The answer to this question is a common source of confusion. If the DataBind method is not called, stale data might be rendered, or perhaps no data at all is rendered. Calling DataBind too often will decrease performance and might cause updates to fail because the modified inputs are lost. DataBind needs to be called when the page first loads and the IsPostBack property is false. If ViewState is disabled, DataBind must be called on every page load, even when IsPostBack is true. When a property is changed that will cause the output to change, such as when the user starts editing or cancels editing, or when a sort operation is taking place, the DataBind method must be called. Normally, you call this method in the event handler after the updated DataGrid properties are set. A Select command is an exception to this rule. When the user selects a row, SelectedItemIndex changes and, if appropriate, the SelectedItemIndexChanged event is called, but a repeated data-binding operation is not necessary because the data is not changing.