Figure 6

Figure 6 Refresh User Interface
void Grid_SelectionChanged(
    Object Sender, EventArgs e) 
{
    TableCell cImg, cName, cTitle;
    DataGridItem dgi;

    dgi = DataGrid1.SelectedItem;
    cName = (TableCell) dgi.Controls[2];
    cTitle = (TableCell) dgi.Controls[3];
    statusbar.Text = "<b>You selected </b>" + 
        cName.Text + " (" + 
        cTitle.Text + ")" + 
        "<br><b> Item:</b> " +
        DataGrid1.SelectedIndex.ToString();
        
    cImg = (TableCell) dgi.Controls[0];
    cImg.Text = "<img src=opened.gif>";    
}
Figure 7 Implementing DataGrid
void Grid_CancelEdit(Object Sender, 
    DataGridCommandEventArgs e) 
{
DataGrid1.EditItemIndex = -1;
}

void Grid_Edit(Object Sender, 
    DataGridCommandEventArgs e) 
{
     DataGrid1.EditItemIndex = e.Item.ItemIndex;
}

void Grid_Update(Object Sender, 
    DataGridCommandEventArgs e) 
{
    DataGrid1.EditItemIndex = -1;
}
Figure 9 Data Pages Script Code
<%@ Page Language="C#" %>
<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="System.Data.SQL" %>

<style>
.PagerSpan {font-weight:bold;color:blue;}
.PagerLink {behavior:url(MouseOver.htc);}
</style>

<script runat="server">

/***********************************************************************
    Initialize the page
***********************************************************************/
public void Page_Load(Object Sender, EventArgs e)
{
    if (! Page.IsPostBack)
    {
        // first request to page, set properties
        DataGrid1.PagerStyle.Mode = PagerMode.NumericPages;
        DataGrid1.PagerStyle.BackColor = System.Drawing.Color.Gainsboro;
        DataGrid1.PagerStyle.PageButtonCount = 10;
        DataGrid1.PageSize = 4;

        BindData();
    }
}

/***********************************************************************
    This function creates the data source whenever it is
    necessary. If you're going to use paging, you always
    need to reload the data source before rebinding.
    You cannot cache the dataset in this case.
***********************************************************************/
private ICollection CreateDataSource()
{
    // Set up the SQL2K connection
    String strConn;
    strConn = "DATABASE=Northwind;SERVER=localhost;UID=sa;PWD=;";

    // Set the SQL command to run
    String strCmd = "";
    strCmd += "SELECT ";
    strCmd += " employeeid, ";
    strCmd += "titleofcourtesy + ' ' + firstname + ' ' + lastname AS 
              EmployeeName, ";
    strCmd += "title ";
    strCmd += "FROM Employees";

    // Execute the command and add a named table to the dataset
    SQLDataSetCommand oCMD = new SQLDataSetCommand(strCmd, strConn);

    // Add a named table to the dataset
    DataSet oDS = new DataSet();
    oCMD.FillDataSet(oDS, "EmployeesList");

    // Return a given data table
    return oDS.Tables["EmployeesList"].DefaultView;
}

/***********************************************************************
    The paging needs this delegate handler to refresh the
    data source. It's critical that you recalculate the data
    source here. Internally, the DataGrid will load only the
    needed elements.
***********************************************************************/
public void Grid_PageIndexChanged(Object Sender, DataGridPageChangedEventArgs e)
{
    // clear the selected and edit indices first, then rebind
    DataGrid1.SelectedIndex = -1;
    DataGrid1.EditItemIndex = -1;

    BindData();
}

/***********************************************************************
    This function gets called to rebind the grid to the data.
***********************************************************************/
public void BindData()
{
Trace.Warn("bindata","");
    DataGrid1.DataSource = CreateDataSource();
    DataGrid1.DataBind();
}

/***********************************************************************
    This function gets called whenever a new item is created within
    the DataGrid. You check the type, enumerate the pager items,
    and set the CSS style
***********************************************************************/
public void Grid_ItemCreated(Object Sender, DataGridItemEventArgs e)
{
    // Get the newly created item
    ListItemType itemType = e.Item.ItemType;

    // Is it the pager?
    if (itemType == ListItemType.Pager)
    {
        // There's just one control in the list...
        TableCell pager = (TableCell)e.Item.Controls[0];

        // Enumerates all the items in the pager...
        for (int i=0; i<pager.Controls.Count; i+=2)
        {
            try {
              Label l = (Label) pager.Controls[i];
              l.Text = "Page " + l.Text;
              l.CssClass = "PagerSpan";
            }
            catch {
              LinkButton h = (LinkButton) pager.Controls[i];
              h.Text = "[ " + h.Text + " ]";
              h.CssClass = "PagerLink";
            }
        }
    }
}

/***********************************************************************
    This code runs whenever an item is selected within the grid.
***********************************************************************/
public void Grid_SelectionChanged(Object Sender, EventArgs e)
{
    // cancel editing
    DataGrid1.EditItemIndex = -1;

    try {
        DataGridItem dgi = DataGrid1.SelectedItem;
        TableCell cName = (TableCell) dgi.Controls[2];
        TableCell cTitle = (TableCell) dgi.Controls[3];
        statusbar.Text = "<b>You have selected </b>" +
            cName.Text + " (" +
            cTitle.Text + ")" + "<br><b> Item:</b> " +
            DataGrid1.SelectedIndex.ToString();
        TableCell c = (TableCell) dgi.Controls[0];
        c.Text = "<img src=opened.gif border=0 align=absmiddle>";
    }
    catch {
        statusbar.Text = "<b>You have no item selected </b>
            <br><b> Item:</b> " +
            DataGrid1.SelectedIndex.ToString();
    }
}

/***********************************************************************
    Select the specified row by manually setting the
    SelectedIndex property.
***********************************************************************/
void SelectRow(Object sender, EventArgs e)
{
    DataGrid1.SelectedIndex = RowNumber.Text.ToInt32()-1;

    Grid_SelectionChanged(sender, e);
}

/***********************************************************************
    Handler for CancelCommand. It provides the code necessary
    to clear the current editing operation.
***********************************************************************/
void Grid_CancelEdit(Object Sender, DataGridCommandEventArgs e)
{
    // Cancel the operation
    DataGrid1.EditItemIndex = -1;

    // Refresh the grid
    BindData();

}

/***********************************************************************
    Handler for EditCommand. It provides the code necessary
    to start a new edit operation.
***********************************************************************/
void Grid_Edit(Object Sender, DataGridCommandEventArgs e)
{
    // Start the edit operation
    DataGrid1.EditItemIndex = e.Item.ItemIndex;
    DataGrid1.SelectedIndex = -1;

    // Refresh the grid
    BindData();
}

/***********************************************************************
    Handler for UpdateCommand. It provides the code necessary
    to clear the current editing operation, update the data source,
    and refresh the grid.
***********************************************************************/
void Grid_Update(Object Sender, DataGridCommandEventArgs e)
{
    // Cancel the operation
    DataGrid1.EditItemIndex = -1;

    // update the data source
    // TODO

    // Refresh the grid
    BindData();
}

</script>


<html>
    <body>
    <form runat="server">
        <asp:DataGrid id="DataGrid1" runat="server"
            AllowPaging="true"
            OnPageIndexChanged="Grid_PageIndexChanged"
            OnEditCommand="Grid_Edit"
            OnUpdateCommand="Grid_Update"
            OnCancelCommand="Grid_CancelEdit"
            OnSelectedIndexChanged="Grid_SelectionChanged"
            OnItemCreated="Grid_ItemCreated"
            Font-Name="verdana"
            Font-Size="10pt"
            CellPadding="4">

            <property name="SelectedItemStyle">
                <asp:TableItemStyle BackColor="blue" ForeColor="white" 
                     Font-Bold="true" />
            </property>

            <property name="EditItemStyle">
                <asp:TableItemStyle BackColor="Yellow" ForeColor="black" 
                     Font-Bold="true" />
            </property>

            <property name="HeaderStyle">
                <asp:TableItemStyle BackColor="darkred" ForeColor="white" 
                     Font-Bold="true" />
            </property>

            <property name="Columns">
                <asp:ButtonColumn Text="<img border=0 src=select.gif>" 
                     CommandName="Select" />
                <asp:EditCommandColumn EditText="<img src=edit.gif>" 
                 CancelText="<img src=cancel.gif>" UpdateText="<img src=ok.gif>" />
            </property>

        </asp:DataGrid>

        <asp:Label id="statusbar" runat="server" /><br>
        Enter the row to select: 
            <asp:Textbox id=RowNumber runat="server" />
        <asp:Button Text="Select" OnClick="SelectRow" runat="server" />

    </form>
    </body>
</html>