This is a migrated thread and some comments may be shown as answers.

Display loading message with webservice loading

4 Answers 25 Views
Grid
This is a migrated thread and some comments may be shown as answers.
John
Top achievements
Rank 1
John asked on 30 Nov 2020, 09:40 PM

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>

4 Answers, 1 is accepted

Sort by
0
Attila Antal
Telerik team
answered on 03 Dec 2020, 07:01 PM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
John
Top achievements
Rank 1
answered on 06 Dec 2020, 10:56 PM

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>

0
John
Top achievements
Rank 1
answered on 07 Dec 2020, 11:31 AM
OnDataBinding doesnt work - how to get an event just BEFORE the request to the server is made?
0
Attila Antal
Telerik team
answered on 09 Dec 2020, 03:01 PM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Grid
Asked by
John
Top achievements
Rank 1
Answers by
Attila Antal
Telerik team
John
Top achievements
Rank 1
Share this question
or