The OnTheFly-Postback™ architecture is one of the main features in WebGrid. The architecture is designed not only for data retrieval, but also to provide a solid framework which allows developers to control numerous aspects and behaviors of WebGrid such as sorting, grouping, editing, etc. In fact, most actions in WebGrid are performed using this architecture.

In this sample we utilize two unique features of WebGrid which are parts of the architecture: SendCustomRequest and ClientAction engine. The SendCustomRequest basically sends a custom request to the server, just like the Refresh request which is made when you click the Refresh icon at the bottom-right corner of a WebGrid.

There are two methods that can be optionally used together with SendCustomRequest: wgPrepareCustomAction and wgCustomActionResponse. The first one is called when the custom request is about to be made. You can place some code in the function to, for instance, set the StatusBar text. The latter is invoked after a response for the custom request is received. You can also send custom data to the server during the custom request.

The ClientAction engine acts as a bridge between the client and the server, allowing client-side functions to be invoked from server side during OnTheFly Postback. This results in smoother interactions and most importantly much reduced codes and time needed for more complex scenarios.

This section describes how to utilize the architecture to send data to the server to be processed and then send the result back to the client, all without Page Postback and yet conforming to the ASP.NET page lifecycle.

Specifically, the sample will show how to get a row's data on the server, process it and send the results back to be displayed in another grid. When a user selects a row from the Customer table (WebGrid1), WebGrid2 will then load and display the Orders and OrderDetails data of that selected customer. If the selected customer does not have any Orders data associated, WebGrid2 will not be shown.

The logic behind this scenario is as following:

Invoke a custom request from the client in OnRowSelect event.
On the server side, check if the Postback action is invoked by the custom request.
If yes, refresh WebGrid2 so it can get and then show the new data.
Get the key value of the selected row using RetrieveClientLastSelectedObject().
Load the Orders and OrderDetails data based on that key value.
Hide WebGrid2 if the selected customer does not have any Orders.
When the refreshing process is done the Orders and OrderDetails data will automatically show up, if any.

Note that in this sample we use two strongly-typed DataSets, dsCustomers and dsOrders. dsCustomers contains the Customers table and is used for WebGrid1. dsOrders contains the Orders and OrderDetails (linked by a DataRelation) and is used for WebGrid2. The column structures of these grids are created at design time.

Client-side script:

JavaScript

Copy Code

<script language="javascript" type="text/javascript">
                
    // (1)
    function WebGrid1_OnRowSelect(gridId, tblName, rowIndex, rowElm) {
        var grid = ISGetObject(gridId); // get the grid instance
        grid.SendCustomRequest();
        return true;
    }
    
    // This function is invoked when the custom request is about to be made.
    function wgPrepareCustomAction(grid, xmlr, name) {
        grid.SetStatus1("Loading Orders data...");
        return true;
    }
    
    // This function is invoked after a response for the custom request is received.
    function wgCustomActionResponse(grid, xmlrp) {
        grid.SetStatus1("Ready.");
        return true;
    }
        
</script>
<!-- Hide WebGrid2 on first page load -->
<body onload="ISGetObject('WebGrid2').Hide()">

Server-side code:

Copy Code

private void WebGrid1_InitializeDataSource(object sender,
ISNet.WebUI.WebGrid.DataSourceEventArgs e)
{
    daCustomers.Fill(dsCustomers1);
    e.DataSource = dsCustomers1;
}
 
private void WebGrid1_InitializePostBack(object sender,
ISNet.WebUI.WebGrid.PostbackEventArgs e)
{
    // (2)
    // If a custom request is received,
    // rebind and refresh WebGrid2.
    if (e.Action == PostBackAction.Custom)
    {
        // (3)
        WebGrid2.ClearCachedDataSource();
        WebGrid2.RebindDataSource();
        WebGrid2.ClientAction.Refresh();
    }
}
 
private void WebGrid2_InitializeDataSource(object sender,
ISNet.WebUI.WebGrid.DataSourceEventArgs e)
{
    // Only fill when it's a refresh request.
    if (WebGrid2.FlyPostBackAction == PostBackAction.RefreshData)
    {
        // (4)
        SelectedObject selObj = WebGrid1.RetrieveClientLastSelectedObject();
        if (selObj != null)
        {
            // Select the Order item based on the selected CustomerID in WebGrid1.
            daOrders.SelectCommand.CommandText =
                "SELECT * FROM Orders WHERE CustomerID = '" +
                selObj.KeyValue.ToString() + "'";
 
            // (5)
            daOrders.Fill(dsOrders1.Orders);
            
            // Get the OrderDetails item based on the retrieved Orders items.
            foreach (DataRow aRow in dsOrders1.Orders) 
            {
                daOrderDetails.SelectCommand.CommandText =
                    "SELECT * FROM [Order Details] WHERE OrderID = " + aRow["OrderID"];
                
                daOrderDetails.Fill(dsOrders1.Order_Details);
            }
            
            // (6)
            // Hide WebGrid2 if there is no row in the Orders table.
            if (dsOrders1.Orders.Rows.Count > 0)
                WebGrid2.ClientAction.Show();
            else
                WebGrid2.ClientAction.Hide();
        }
    }
    
    // Bind the datasource.
    e.DataSource = dsOrders1;
}

Intersoft WebGrid Documentation
Advanced Client-Server Interaction Sample
See Also Send comments on this topic.

See Also