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

Doesn't show the Loading Panel using JavaScript

3 Answers 419 Views

AjaxLoadingPanel

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

Mani asked on 18 Jul 2020, 02:34 PM

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.

3 Answers, 1 is accepted

Accepted