It is the default of WebGrid that when user clicks the “Refresh” button, WebGrid will invoke InitializeDataSource event and load the initial number of records.

In order to implement your scenario, I’d like to suggest you to utilize the OnBeforeRequest client-side event. OnBeforeRequest specifies the client-side function to be invoked when a request action to server is about to be made.

It has two parameters: controlId and action. The controlId is the ID of WebGrid that fires this client-side event and the action is the request action of WebGrid to the server.

When user loads more data, the value of action property is “More”; and when user clicks the refresh button, the value of action property is “Refresh”. A global variable is added to store the number of “More” action each time user loads more data. This variable is incremented every time user loads more data.

Next, invoke wgLoadMore method to load more data for n times (the n times is equal to the number of “More” action count). A delay – window.setTimeOut – needed to let WebGrid finish its request before starting a new request.

<script type="text/javascript">
	<!--
    var loadmore = 0;

    function WebGrid1_OnBeforeRequest(controlId, action) {
        var WebGrid1 = ISGetObject(controlId);

        if (action == "More")
            loadmore += 1;
        if (action == "Refresh") {
            for (var i = 0; i < loadmore; i++) {
                window.setTimeout(function () {
                    wgLoadMore(controlId);
                }, 2000);
            }
        }

        return true;
    }
	-->
</script>

Hope this helps.

Hi Yudi,

Thanks for the response.

1. First time it is working fine, but the next time it is populating the alert message saying that "Please wait while WebGrid is in progress processing request..."

2. After loading (retaining) all the record, I need to retain the selection of the item, so it should not be deselected.

3. How to pass value between WebGrid1_InitializeDataSource to WebGrid1_InitializeLayout event and vice versa.

My approach to retain the no. of loaded items and item selection is:

* Hold WebGrid1.VirtualLoadArgs.RequestedRows from WebGrid1_InitializeDataSource event when "Load More" action is performed

* Set the value to e.Layout.VirtualPageSize in WebGrid1_InitializeLayout event

So that the next time "Refresh" is called, that value will be set to VirtualPageSize hence it will load the same no. of records at once, instead of calling it multiple times.

Apologize for the delay in sending this.

Please follow the step-by-step below in order to implement you required scenario.

1. Create grid, assign DataSource, DataMember and RetrieveStructure as shown in the CustomVirtualLoad.aspx tutorial file. The tutorial file is available at WebGrid Tutorial project inside the V3.5 folder.
2. In the attached sample file, the value of VirtualPageSize property is set to “10”.
3. Add an ASP.NET HiddenField control, HiddenField1, into the page. This control is used to store the total loaded rows of WebGrid.

   <asp:HiddenField ID="HiddenField1" runat="server" />

4. Add OnBeforeRequest client-side event of WebGrid. This event specifies the client-side function to be invoked when a request action to server is about to be made. Within this event, the value of HiddenField1 control is set based on the value of the action parameter.

   function WebGrid1_OnBeforeRequest(controlId, action) {
       var WebGrid1 = ISGetObject(controlId);
       var hf = document.getElementById("HiddenField1");
               
       if (action == "More") {
           if (hf.value != "")
               hf.value = parseInt(hf.value) + 10;
           else
               hf.value = WebGrid1.TotalLoadedRows + 10;
       }
               
       return true;
   }

5. Invoke the InitializePostBack server side event.

   protected void WebGrid1_InitializePostBack(object sender, PostbackEventArgs e)
   {
       if (HiddenField1.Value != "")
       {
           WebGrid1.LayoutSettings.VirtualPageSize = int.Parse(HiddenField1.Value);
           WebGrid1.VirtualLoadArgs.RequestedRows = int.Parse(HiddenField1.Value);
       }
   
       if (e.Action == "More")
       {
           WebGrid1.RebindDataSource();
           ISNet.WebUI.FunctionParameter[] total = new ISNet.WebUI.FunctionParameter[1];
           total[0] = new ISNet.WebUI.FunctionParameter(WebGrid1.VirtualLoadArgs.TotalDataSourceRows.ToString(), "string");
           WebGrid1.ClientAction.InvokeScript("SetTotal", total);
       }
   
       else if (e.Action == "ColumnSort")
       {
           WebGrid1.RebindDataSource();
           ISNet.WebUI.FunctionParameter[] total = new ISNet.WebUI.FunctionParameter[1];
           total [0] = new ISNet.WebUI.FunctionParameter(WebGrid1.VirtualLoadArgs.TotalDataSourceRows.ToString(),"string");
           WebGrid1.ClientAction.InvokeScript("SetTotal",total);
       }
   }

6. Attach a client-side event on OnAfterResponse event. The event is used to set the value of TotalLoadedRows property of WebGrid based on the value stored in HiddenField1 control.

   function WebGrid1_OnAfterResponseProcess(controlId, actionName, lastRequestObject, xmlResponseObject) {
       var WebGrid1 = ISGetObject(controlId);
       var hf = document.getElementById("HiddenField1");
       var table = WebGrid1.RootTable;
   
       WebGrid1.TotalLoadedRows = hf.value;
   
       return true;
   }

7. Add SetTotal JavaScript function. This function is used to synchronize the loaded indicator shown in the status bar of WebGrid.

   function SetTotal(total) {
       var WebGrid1 = ISGetObject("WebGrid1");
       var hf = document.getElementById("HiddenField1");
   
       if (hf.value != "")
           WebGrid1.GetElement(WG40.STATUSBAR, WG40.HTMLROW).childNodes[3].innerText = "Loaded " + hf.value + " of " + total;
   }

A simple sample is enclosed as attachment. Please have the sample tested on your end and let us know whether this helps or not.