Whenever we enable the WebGrid’s XML Load On Demand functionality, this essentially makes use of AJAX requests to fetch the additional rows as they are scrolled into view. Performing other programmatic actions against the Data Source of the Grid such as filtering and sorting requires us to follow some important guidelines so that you will get the results that you expect. This article will show how to allow filtering on the underlying DataView that the WebGrid is bound to.
Whenever we have XML Load On Demand functionality enabled, any posting back will essentially cause the page and the WebGrid to be reset back to the way it was since the first time it was loaded. For example, if the page with the Grid is loaded and the user requests several batches of rows and then performs a full postback, the Grid will be loaded on the page with the same amount of rows that were initially loaded on the first page load. The Web Server is not aware of any additional rows that were fetched with AJAX requests. In the case that we want to allow the user to filter the data that the WebGrid is bound to, you will need to essentially clear the Grid rows explicitly and then rebind to the new result set. You can think of the XML Load On Demand as a form of “Paging” where you have a fixed Data Source and as you scroll through the records, the additional “Pages” are fetched using AJAX requests. The WebGrid needs to have the same exact Data Source each time its _InitializeDataSource event is fired. If you plan on changing the Data Source in any way (Ex: change its schema, change the rows that it contains, etc) you will need to clear the Grid rows and then reassign the Data Source and then DataBind. This will now allow the Grid to work with the new Data Source.
Step-By-Step Example
In this particular implementation, we are going to follow a particular pattern to have the following functionality:1) The page will load with all records from a particular table
2) The user has the ability to enter text and apply a filter to the Data
3) The page then reloads with the resulting records
To achieve this functionality within a standard grid would be very simple. You would retrieve all of your data the first time and then whenever you need to apply a filter, you would set the filter and then rebind the grid and the page will reload with the new data. With the AJAX functionality enabled, we will need to work with the understanding that the WebGrid uses the InitializeDataSource event to build itself up and create its rows. Whenever applying a filter through server side code, it will be required that the WebGrid rows are all completely removed and then we explicitly assign the DataSource and then call DataBind. Here is the following code to further illustrate what is actually done:
///
public WebGrid_AJAX_Filtering_DataView_2005V2_CS.DataSetNorthWind.OrdersDataTable Orders
{
get
{
if (Session["data"] == null)
{
this.sqlDataAdapterOrders.Fill(this.dataSetNorthWind1.Orders);
this.dataSetNorthWind1.Orders.DefaultView.Sort = "CustomerID ASC";
Session["data"] = this.dataSetNorthWind1.Orders;
}
return (WebGrid_AJAX_Filtering_DataView_2005V2_CS.DataSetNorthWind.OrdersDataTable) Session["data"];
}
}
///
/// Give the grid its Data
///
///
/// private void UltraWebGrid1_InitializeDataSource(object sender, Infragistics.WebUI.UltraWebGrid.UltraGridEventArgs e) { this.UltraWebGrid1.DataSource = this.Orders.DefaultView; } /// /// Whenever we click on this button, we will apply a filter to the DataView. /// We need to clear the Grid rows and then rebind it explicitly so that the results /// are shown. /// /// /// private void Button1_Click(object sender, System.EventArgs e) { this.UltraWebGrid1.Rows.Clear(); if (this.TextBox1.Text == "") { this.Orders.DefaultView.RowFilter = ""; } else { this.Orders.DefaultView.RowFilter = "CustomerID LIKE '%" + this.TextBox1.Text + "%'" ; } this.Label2.Text = this.Orders.DefaultView.Count + " Records Were Found"; this.UltraWebGrid1.DataSource = this.Orders.DefaultView; this.UltraWebGrid1.DataBind(); } |
If you notice, we cache the Orders DataTable in the Session so that the user can work with a particular set of Data. Filtering and sorting can be applied to this cached Data and each time the user applies a filter, the Cached Data is filtered and assigned to the WebGrid. Upon filtering and DataBinding, the WebGrid now has an altered Data Source that will be reloaded with a complete postback. The user can now navigate the new result set by scrolling and causing the AJAX requests to be made against the new result set so that the WebGrid’s InitializeDataSource event can fetch the data that it needs from the Session. This allows a flexible means for the user to work on the Data as well as enjoy the benefit of having the Load On Demand functionality.
