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

Diferent Loadings panels with diferente loading time

1 Answer 19 Views
Ajax
This is a migrated thread and some comments may be shown as answers.
Hugo
Top achievements
Rank 1
Hugo asked on 30 May 2013, 05:14 PM
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>

1 Answer, 1 is accepted

Sort by
0
Kostadin
Telerik team
answered on 04 Jun 2013, 11:44 AM
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.
Tags
Ajax
Asked by
Hugo
Top achievements
Rank 1
Answers by
Kostadin
Telerik team
Share this question
or