Display loading message with webservice loading

[John]

How can I display a "loading" message while data is loading with radgird when using a SERVICE ?

I am calling a service routine that takes a bit to return data.

How can I display a loading type message?

        <DataBinding Location="WaterWebService.asmx" SelectMethod="GetWaterAccounts" SelectCountMethod="GetCount" />

 

 

Full grid code: 

 

 <telerik:RadGrid RenderMode="Lightweight" AllowSorting="true" ClientSettings-Resizing-AllowColumnResize="true" VirtualItemCount="1000" PageSize="10" AllowPaging="true" 
           AllowCustomPaging ="true"  AllowFilteringByColumn="true" ID="RadGrid1" CssClass="gridy" runat="server" GridLines="None">
           <ExportSettings ExportOnlyData="true" IgnorePaging="true" OpenInNewWindow="true" HideStructureColumns="false"  FileName = "PlannedOrderExc">
                                <Excel Format="Biff" />
                   </ExportSettings> 
          <MasterTableView TableLayout="Fixed" ClientDataKeyNames="ID" PagerStyle-Position="Bottom"   
PagerStyle-Mode="NextPrevAndNumeric" PagerStyle-PageSizes="10, 15, 20, 25, 30" >
              <Columns>
                  <telerik:GridBoundColumn DataField="ID" HeaderText="" HeaderStyle-Width=".1" Visible="true" Display="false"></telerik:GridBoundColumn>
                  <telerik:GridBoundColumn DataField="AccountNumber" HeaderStyle-Width="20" HeaderText="Account Number" FilterControlWidth="80px" DataType="System.String"></telerik:GridBoundColumn>
                  <telerik:GridBoundColumn DataField="PropertyName" HeaderStyle-Width="50px" Visible="true" HeaderText="Property" FilterControlWidth="190px" DataType="System.String"></telerik:GridBoundColumn>
                  <telerik:GridBoundColumn DataField="LastName" HeaderStyle-Width="50" HeaderText="Responsible Party" FilterControlWidth="80px" DataType="System.String"></telerik:GridBoundColumn>
                  <telerik:GridBoundColumn Visible="false" DataField="PropertyID" HeaderText="ID"></telerik:GridBoundColumn>
                  <telerik:GridBoundColumn Visible="false" DataField="StatedPartyID" HeaderText="ID"></telerik:GridBoundColumn>
                  <telerik:GridBoundColumn DataField="Notes"  HeaderText="Notes" HeaderStyle-Width="90px" ItemStyle-Wrap="false" FilterControlWidth="200px" DataType="System.String"></telerik:GridBoundColumn>
                  <telerik:GridCheckBoxColumn runat="server" AllowFiltering="false" HeaderStyle-Width="20" UniqueName="DepositRequired" HeaderText="Deposit Required?" DataField="DepositRequired" ItemStyle-HorizontalAlign="Center" />
                  <telerik:GridCheckBoxColumn runat="server" AllowFiltering="false" HeaderStyle-Width="20" UniqueName="DepositPaid" HeaderText="Deposit Paid?" DataField="DepositPaid" ItemStyle-HorizontalAlign="Center" />
                  <telerik:GridCheckBoxColumn UniqueName="NLM" AllowFiltering="false" HeaderStyle-Width="20" HeaderText="Managed" DataField="NLM" ItemStyle-HorizontalAlign="Center" />
                  <telerik:GridCheckBoxColumn UniqueName="WaterStatus" AllowFiltering="false" HeaderStyle-Width="20" HeaderText="Water ON?" DataField="WaterStatus" ItemStyle-HorizontalAlign="Center" />
                  <telerik:GridBoundColumn DataField="ModifiedBy" HeaderStyle-Width="20" HeaderText="Modified By" FilterControlWidth="80px" DataType="System.String" Visible="true" Display="false"></telerik:GridBoundColumn>
                
              </Columns>
          </MasterTableView>
          <ClientSettings>
              <Selecting AllowRowSelect="true"></Selecting>
              <DataBinding Location="WaterWebService.asmx" SelectMethod="GetWaterAccounts" SelectCountMethod="GetCount" />
              <ClientEvents OnRowSelected="rowSelected" OnDataBound="OnDataBound" OnRowDataBound="RowDataBound" ></ClientEvents>
              <Scrolling AllowScroll="true" UseStaticHeaders="true"></Scrolling>
          </ClientSettings>
      </telerik:RadGrid>

[Attila Antal]

Hi John,

To achieve that scenario, you will need to bind data to RadGrid using RadClientDataSource similar to the Binding to Telerik ClientDataSource online demo.

In addition to that, you will need a sort of a Loading Panel. You can choose to create one on your own and trigger between show/hide or you can use a RadAjaxLoadingPane and use its Client-Side APIs to show/hide it explicitly.

For example:

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Default" Modal="true" MinDisplayTime="500"></telerik:RadAjaxLoadingPanel>

 

With that Setup, you can take advantage of the RadClientDataSource client-side events, the OnCustomParameter event when sending a request to the server and OnDataParse when receiving the response.

You can use these events for the timing, show the Loading Panel before the request is sent, hide it when it's received.

Assuming that you're using the Example from the online demo, here is how the JavaScript code would look like. We kept the code simple for demonstration purposes, however, you would need to consider implementing a few If statements to avoid running into 'undefined' values.

var currentLoadingPanel;

function ParameterMap(sender, args) {
    //If you want to send a parameter to the select call you can modify the if 
    //statement to check whether the request type is 'read':

    currentLoadingPanel = $find("<%= RadAjaxLoadingPanel1.ClientID %>");
    currentLoadingPanel.show('<%= RadGrid1.ClientID %>');

    if (args.get_type() != "read" && args.get_data()) {

        args.set_parameterFormat({ customersJSON: kendo.stringify(args.get_data().models) });
    }
}

function Parse(sender, args) {
    var response = args.get_response().d;
    if (response) {
        currentLoadingPanel.hide('<%= RadGrid1.ClientID %>');
        args.set_parsedData(response.Data);
    }
}

function UserAction(sender, args) {
    if (sender.get_batchEditingManager().hasChanges(sender.get_masterTableView()) &&
        !confirm("Any changes will be cleared. Are you sure you want to perform this action?")) {
        args.set_cancel(true);
    }
}

</script>

 

Here is a short video of the result: http://somup.com/cYleF822Le

I hope this will prove helpful.

Regards,
Attila Antal
Progress Telerik

[John]

I am not using radclientdatasource, I am using a radgrid with databinding to a server and client side events. (see code above and below)

Should I use OnDataBinding and OnDataBound client events as the start and stop routines to show/hide the panel?

 

 <ClientSettings>
              <Selecting AllowRowSelect="true"></Selecting>
              <DataBinding Location="WaterWebService.asmx" SelectMethod="GetWaterAccounts" SelectCountMethod="GetCount" />
              <ClientEvents OnRowSelected="rowSelected" OnDataBound="OnDataBound" OnRowDataBound="RowDataBound" onc  ></ClientEvents>
              <Scrolling AllowScroll="true" UseStaticHeaders="true"></Scrolling>
          </ClientSettings>

[John]

OnDataBinding doesnt work - how to get an event just BEFORE the request to the server is made?

[Attila Antal]

Hi John,

I understood that you were using the Grid's built-in Client-Side binding functionality, but that one does not trigger events before and after the request. In order to achieve the behavior you are looking for you, you will need to switch to RadClientDataSource controls. That one will provide with the Events you can use to show or hide the Loading indicator.

Regards,
Attila Antal
Progress Telerik