Diferent Loadings panels with diferente loading time

2 posts, 0 answers
  1. Hugo
    Hugo avatar
    2 posts
    Member since:
    May 2013

    Posted 30 May 2013 Link to this post

    Good morning all,

    I will start by describing my scenario and then explain my final goal.
    I am using a RadAjaxManager to control the loading panels and events and then have diferent loadings panels for each Grid.

    I have several RadGrids in my web page with client databing. I want that the corresponding loading panel for each one disapears when the Grid finishes its databound. Currently both disappear when the firstone loads (apparently when ResponseEnd occurs too).

    Example: I have my RadGrid1 that takes 2 secs to bind and have my RadGrid2 that takes 10secs to bind.
    I want that the loading panel of RadGrid1 disapears after the 2secs but the loading panel of RadGrid2 maintains util the Grid is fully binded.

    How can achieve this?

    Many thanks in advance.
    HDS

    Currently I have the following code
    <head>
        <title>ASP.NET Grid Demo - Grid Filtered by Combo</title>
        <tlk:RadCodeBlock runat="server" ID="RadCodeBlock1">
            <script type="text/javascript">
                var customerID = "";
     
                function onSelectedIndexChanged(sender, eventArgs) {
                    var selectedItem = eventArgs.get_item();
                    customerID = selectedItem._control._value;
                    var selectedItemText = selectedItem != null ? selectedItem.get_text() : sender.get_text();
     
                    $find("<%=RadGrid1.ClientID %>").get_masterTableView().filter("EntityParentId", customerID, "EqualTo");
                    $find("<%=RadGrid2.ClientID %>").get_masterTableView().filter("EntityParentId", customerID, "EqualTo");
                }
     
                function RadGrid_DataBinding(sender, args) {
                    if (customerID === "") {
                        args.set_cancel(true);
                    }
                }
     
            </script>
        </tlk:RadCodeBlock>
    </head>
    <body>
        <form id="form1" runat="server">
            <tlk:RadScriptManager runat="server" ID="RadScriptManager1">
                <Services>
                </Services>
            </tlk:RadScriptManager>
            <asp:Label runat="server" ID="lblDDLName" Text="NamesDDL">Select contact name to view its product orders:</asp:Label>
            <div style="margin-top: 15px;">
                <tlk:RadComboBox ID="NamesDDL" runat="server" AutoPostBack="True"
                    DataTextField="ContactName" DataValueField="SupplierID" Width="250px" Height="150px"
                    AppendDataBoundItems="true" OnClientSelectedIndexChanged="onSelectedIndexChanged">
                    <Items>
                        <tlk:RadComboBoxItem Text="All" Value="0" Selected="true"></tlk:RadComboBoxItem>
                        <tlk:RadComboBoxItem Text="Pair" Value="1" Selected="false"></tlk:RadComboBoxItem>
                        <tlk:RadComboBoxItem Text="Even" Value="2" Selected="false"></tlk:RadComboBoxItem>
                    </Items>
                </tlk:RadComboBox>
            </div>
            <div style="margin: 15px 0 20px;">
                <tlk:RadGrid ID="RadGrid1" Visible="true" runat="server" AllowPaging="true" AllowSorting="True"
                    AllowFilteringByColumn="true" GridLines="None" PageSize="5" AutoGenerateColumns="true">
                    <MasterTableView ClientDataKeyNames="CustomerID" TableLayout="Fixed" AllowMultiColumnSorting="true">
                        <PagerStyle Mode="NumericPages" />
                        <Columns>
                            <tlk:GridBoundColumn DataField="EntityId" HeaderText="EntityId" />
                            <tlk:GridBoundColumn DataField="EntityName" HeaderText="EntityName" />
                        </Columns>
                    </MasterTableView>
                    <ClientSettings>
                        <DataBinding Location="ClientEntitiesService.svc"
                            SelectMethod="GetCustomerDataAndCount"
                            FilterParameterType="Linq" SortParameterType="Linq" />
                        <ClientEvents OnDataBinding="RadGrid_DataBinding" />
                        <Selecting AllowRowSelect="true" />
                    </ClientSettings>
                </tlk:RadGrid>
            </div>
            <div runat="server" id="div">
                <tlk:RadGrid ID="RadGrid2" Visible="true" runat="server" AllowPaging="true" AllowSorting="True"
                    AllowFilteringByColumn="true" GridLines="None" PageSize="5" AutoGenerateColumns="true">
                    <MasterTableView ClientDataKeyNames="CustomerID" TableLayout="Fixed" AllowMultiColumnSorting="true">
                        <PagerStyle Mode="NumericPages" />
                        <Columns>
                            <tlk:GridBoundColumn DataField="EntityId" HeaderText="EntityId" />
                            <tlk:GridBoundColumn DataField="EntityName" HeaderText="EntityName" />
                        </Columns>
                    </MasterTableView>
                    <ClientSettings>
                        <DataBinding Location="ClientEntitiesService.svc" SelectMethod="GetCustomerDataAndCountWithDelay"
                            FilterParameterType="Linq" SortParameterType="Linq" />
                        <ClientEvents OnDataBinding="RadGrid_DataBinding" />
                        <Selecting AllowRowSelect="true" />
                    </ClientSettings>
                </tlk:RadGrid>
            </div>
             <tlk:RadAjaxManager ID="RadAjaxManager1" runat="server" EnableAJAX="true" DefaultLoadingPanelID="RadAjaxLoadingPanel1">
                <AjaxSettings>
                    <tlk:AjaxSetting AjaxControlID="NamesDDL">
                        <UpdatedControls>
                            <tlk:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="AjaxLoadingPanel1" UpdatePanelRenderMode="Inline"></tlk:AjaxUpdatedControl>
                             <tlk:AjaxUpdatedControl ControlID="div"  LoadingPanelID="RadAjaxLoadingPanel2" UpdatePanelRenderMode="Block"/>
                           <tlk:AjaxUpdatedControl ControlID="NamesDDL"></tlk:AjaxUpdatedControl>
                        </UpdatedControls>
                    </tlk:AjaxSetting>
                </AjaxSettings>
            </tlk:RadAjaxManager>
            <tlk:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Default">
            </tlk:RadAjaxLoadingPanel>
            <tlk:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel2" runat="server" Skin="Sunset">
            </tlk:RadAjaxLoadingPanel>
        </form>
    </body>
  2. Kostadin
    Admin
    Kostadin avatar
    1713 posts

    Posted 04 Jun 2013 Link to this post

    Hello Hugo,

    I am afraid this could not be achieved because the loading panel is showing when a request is started and it is hiding on request end.

    Regards,
    Kostadin
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top