5.6 Display, Sort, and Page Data in the DataGrid Control

The Table controls and DataRepeater are fine when I have small sets of data, but the display just keeps repeating and I have to write a bunch of code to change the sort order of the data. How do I create a table-like display that will show a set number of rows at a time and let me sort the data?

Technique

The DataGrid control is by far the most flexible and powerful of the controls used in ASP.NET for displaying data on your Web page. It gives you the ability not only to list data, but also to page through it and sort it nicely with headers, and even to edit data. This last feature will be saved for the next How-To.

To perform the other tasks, you will use a combination of setting properties at design time and programming some events. In particular for the DataGrid control, you will add code to events raised by sorting and paging.

This How-To will use the DataGrid bound at design time. You will also see a simple example of using the DataView object for sorting your data.

Steps

Open and run the Visual Basic .NET -Chapter 5 solution. From the main page, click on the hyperlink with the caption How-To 5.6: Display, Sort, and Page Data in the DataGrid Control. You will then see all the territories loaded into a data grid. You can click the column headings, displayed in blue, to sort the columns, and you can click the arrows at the bottom to page through the data. You can see the Web Form in Design mode in Figure 5.8.

  1. Create a Web Form. Then place the controls in Table 5.9 and Figure 5.8 with the following properties set.

    Table 5.9. Property Settings for the Controls Used in This How-To

    Object

    Property

    Setting

    OleDbDataAdapter

    		 

    ID

    odaTerritory
     

    SelectCommand

    SELECT Territories.TerritoryID, Territories.TerritoryDescription, Region.RegionDescription, Region.RegionID FROM Territories INNER JOIN Region ON Territories.RegionID = Region.RegionID

    DataSet

    		 

    ID

    dsTerritory

    DataView

    		 

    ID

    dvTerritory
     

    Table

    dsTerritory.Territories

    DataGrid

    		 

    ID

    dgTerritory

    HyperLink

    		 

    ID

    hplReturnToMain
     

    NavigateURL

    wfrmMain.aspx

  2. Right-click on the DataGrid control and choose Property Builder. You will then see the General tab of the DataGrid Property Builder. Set the properties as displayed in Figure 5.9.

    Figure 5.9. Setting the General properties of the DataGrid control.

    graphics/05fig09.jpg

  3. Click on the Columns tab. You can now add the columns TerritoryID, TerritoryDescription, and RegionDescription by clicking on the field in the available columns and then clicking the Add button for each one. You can then set the Header text for each to be TerritoryID, Territory, and Region respectively, by clicking on the column in the Selected Column list and changing the Header text property. When you are finished and you have the Region highlighted, it should look like Figure 5.10.

    Figure 5.10. Setting the columns for the DataGrid control is easy at design time.

    graphics/05fig10.jpg

    Note

    graphics/note_icon.gif

    Be sure to uncheck the Create Columns Automatically at Run Time check box; otherwise, the columns will end up showing up twice-once from you specifying them here at design time, and once when the code generates them.

  4. Click on the Paging tab. Click on the Allow Paging check box, and type 10 for the Page Size (see Figure 5.11.) You can then close the Property Builder dialog box by clicking OK.

    Figure 5.11. Setting the Paging properties at design time for the DataGrid control.

    graphics/05fig11.jpg

  5. Create the BindTheGrid routine in Listing 5.19. Note that you are now binding to the DataView, rather than to a dataset.

    Listing 5.19 wfrmHowTo5_6.aspx.vb: Binding the Data Grid to the DataView Control
    Sub BindTheGrid()

        odaTerritory.Fill(dsTerritory)
        dgTerritory.DataSource = dvTerritory
        dgTerritory.DataBind()

End Sub

  6. Add the code in Listing 5.20 to the Load event of the page.

    Listing 5.20 wfrmHowTo5_6.aspx.vb: Loading the Page
    Private Sub Page_Load(ByVal sender As System.Object, _
                        ByVal e As System.EventArgs) Handles MyBase.Load

        'Put user code to initialize the page here
        If Not Me.IsPostBack Then

            BindTheGrid()

        End If

End Sub

  7. Add the code in Listing 5.21 to the PageIndexChanged event of dgTerritory. This routine takes the NewPageIndex and assigns it to the data grid's CurrentPageIndex. Next, if MySort exists in the ViewState object, it is assigned to the DataView control. MySort is stored in the next step.

    Listing 5.21 wfrmHowTo5_6.aspx.vb: Paging the Data Grid
    Private Sub dgTerritory_PageIndexChanged(ByVal source As Object,
        ByVal e As System.Web.UI.WebControls.DataGridPageChangedEventArgs)
        Handles dgTerritory.PageIndexChanged

        '-- Set the current page in the data grid
        Me.dgTerritory.CurrentPageIndex = e.NewPageIndex

        If Not (ViewState("MySort") = Nothing) Then
            dvTerritory.Sort = ViewState("MySort")
        End If

        BindTheGrid()

End Sub

  8. Add the code in Listing 5.22 to the SortCommand event of dgTerritory. When a column heading is clicked and sorting is turned on, this event is raised. This routine assigns the SortExpression to the Sort property of the dgTerritory. The SortExpression property is then stored in the ViewState object for round trips to the server, and then it is used in the code listed in step 6.

    Listing 5.22 wfrmHowTo5_6.aspx.vb: Sorting the Data Grid
    Private Sub dgTerritory_SortCommand(ByVal source As Object,
        ByVal e As System.Web.UI.WebControls.DataGridSortCommandEventArgs)
        Handles dgTerritory.SortCommand

        dvTerritory.Sort = e.SortExpression.ToString

        ViewState("MySort") = e.SortExpression.ToString

        BindTheGrid()

End Sub
Figure 5.8. The DataGrid control is a great way to manipulate data.

graphics/05fig08.jpg

Comments

The DataView is a great control for seeing different views of your data by using a single dataset.

As with the DataRepeater, working with some of the basic features in the data grid is pretty easy. It's when you have to start really manipulating data that it gets more difficult, as you will see in the next How-To.