Doesn't show the Loading Panel using JavaScript

[Mani]

I was trying to use RadAjaxLoadingPanel, but somehow I am not sure what I am missing. I am just trying to show the Panel on different occasion and is being used only for purpose of indication of progress, and hence am not using any AjaxManager or UpdatePanel in the code.

My aspx file would maybe contain:    

<telerik:RadScriptManager ID="RadScriptManager1" runat="server" CdnSettings-TelerikCdn="Disabled">
    <Services>
        <asp:ServiceReference Path="~/CR.asmx" InlineScript="True" />
    </Services>
</telerik:RadScriptManager>

 

Loading Panel:

<telerik:RadAjaxLoadingPanel ID="loadingPanel" runat="server">
</telerik:RadAjaxLoadingPanel>

 

Then I have a Grid Control:

<telerik:RadGrid AllowFilteringByColumn="False" AllowPaging="False" AllowSorting="False" AutoGenerateColumns="False" CellPadding="0" CellSpacing="0" CssClass="gridCrossRoads" GridLines="None" ID="gridObject" runat="server">
    <ClientSettings AllowGroupExpandCollapse="false" EnableAlternatingItems="false" EnableRowHoverStyle="true">
        <Scrolling AllowScroll="true" UseStaticHeaders="true" />
        <Selecting AllowRowSelect="True" />
        <ClientEvents OnRowDataBound="GridRowBound"></ClientEvents>
    </ClientSettings>
    <MasterTableView AllowFilteringByColumn="False" AllowNaturalSort="False" ClientDataKeyNames="Id" DataKeyNames="Id" EnableColumnsViewState="False" EnableViewState="False" HierarchyLoadMode="Client" NoMasterRecordsText="<div class='noRec'>No records to display.</div>" TableLayout="Auto">
        <Columns>
            <telerik:GridHyperLinkColumn DataNavigateUrlFields="Id" DataNavigateUrlFormatString="javascript:ShowWindow({0});" DataTextField="MasterObject" DataTextFormatString="{0}" HeaderText="Eye Color" UniqueName="MasterObject">
                <HeaderStyle CssClass="gridHeader" Width="40%"></HeaderStyle>
                <ItemStyle CssClass="gridItem" Width="40%"></ItemStyle>
            </telerik:GridHyperLinkColumn>
            <telerik:GridBoundColumn DataField="Code" EmptyDataText="---" HeaderText="Code" UniqueName="Code">
                <HeaderStyle CssClass="gridHeader" Width="20%"></HeaderStyle>
                <ItemStyle CssClass="gridItem" Width="20%"></ItemStyle>
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="Status" EmptyDataText="---" HeaderText="Status" UniqueName="Status">
                <HeaderStyle CssClass="gridHeader" Width="20%"></HeaderStyle>
                <ItemStyle CssClass="gridItem" Width="20%"></ItemStyle>
            </telerik:GridBoundColumn>
            <telerik:GridTemplateColumn UniqueName="Temp">
                <HeaderStyle CssClass="gridHeader" Width="20%" />
                <ItemStyle HorizontalAlign="Center" Width="20%" />
            </telerik:GridTemplateColumn>
        </Columns>
    </MasterTableView>
</telerik:RadGrid>

 

I populate the code using JavaScript

<script type="text/javascript">

    $(document).ready(function()

    {

             _grid = $find("<%= gridObject.ClientID %>");
       _loadingPanel = $find("<%= loadingPanel.ClientID %>");

        isLoadingPanelDisplayed = false;

 

        ShowLoadPanel(window._grid);

        setTimeout(GetEyeColorData, 100); //this is a ajax function which populates the grid using javascript


       ResizeAdminGrid();

    });

 

//This function is in a .js file, there is another function HidePanel which hides the panel but it is commented.


function ShowLoadPanel(control)
{
    if (window._loadingPanel && !window.isLoadingPanelDisplayed)
    {
        if (!control)
        {
            control = window._grid;
        }
        if (control)
        {
            window._loadingPanel.show(control);
        }
        window.isLoadingPanelDisplayed = true;
    }
}


</script>

 

I don't know what's wrong in this script, though the Loading Panel never shows. To see if the Panel is rendered into the DOM, I tried to set the display property of loading panel via jQuery to inline and it worked though it shows before the Grid, but I know the Loading Panel has properly being rendered.

[Mani]

Fixed the issues. It was just a silly mistake on my part. I was passing the control to the hide and show control when I should have been passing the ID of the control.

[Doncho]

Hi Mani,

The show() method exposed by the RadAjaxLoading Client-Side API gets the id of the target control as a parameter, see https://docs.telerik.com/devtools/aspnet-ajax/api/client/Telerik.Web.UI.RadAjaxLoadingPanel#show

Therefore, I would suggest you call the show() method with the ClientID of the RadGrid

_loadingPanel.show(control.ClientID)

You may also find it useful to check out the Show and Hide AjaxLoadingPanel explicitly article.

I hope that will prove helpful!

Kind regards,
Doncho
Progress Telerik

[Mani]

Yes, that was silly overlook from my side wherein instead of passing the ID, I was instead passing the Object to the Control as the param for the function. Since there was deadline pressure for the task to be finished, I just left the task hanging and put in the forum hoping someone can fix the code for me :P.

Later I just fixed it, put in a reply to my post and bam, I find your reply too!!!!

Million Thanks for helping out.