Progress bar while radgrid is loading

[Vasya Ivanov]

Good afternoon,
I am entering search criteria and click seach button,while radgrid is loading I want to show user page is working properly and data is loading for that purpose I would like to create progress bar indicator.Any idea how to do it?
Also I have the other radgrid,when first already loaded and user click any row the second radgrid should be loading and I also need a progress bar indicator for that purpose as well.

Thanks so much for your help.

[Maria Ilieva]

Hello Vasya,

I would suggest you to use RadAjaxLoadingPanel as a progress indicator. You can also go through the following online demo which uses RadAjaxLoadingPanel.
http://demos.telerik.com/aspnet-ajax/grid/examples/dataediting/alleditablecolumns/defaultcs.aspx


All the best,
Maria Ilieva
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Vasya Ivanov]

Hi Maria,
thanks for you respond,
I used RadAjaxLoadingPanel but seems its not quiet work.It is not working after I entered search criteria and also its working when I select row in the first radgrid but data is not display on the second grid and I know for sure that there is a data.

thanks so much for your help

[Maria Ilieva]

Hi Vasya,

Could you confirm that the application works corectly if the ajax is disabled on the page.
Also posting your Ajax settings could helps us porvide correct solution ofr the issue.

Kind regards,
Maria Ilieva
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Vasya Ivanov]

Hi Maria,
I am absolutely sure that when I comment out AJAXLOADING Panel ,application is displaying data the way it should display.
But anyway I need progress bar hopefully you can help me.As you asked me I sent you a coding including two radgrid:

<%

@ Control Language="C#" AutoEventWireup="true" CodeBehind="BulkJobControl.ascx.cs" Inherits="EISPortal.Controls.BulkJobControl" %>

 

<%

@ Register Src="CFNList.ascx" TagName="CFNList" TagPrefix="uc1" %>

 

<%

@ Register TagPrefix="telerik" Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" %>

 

 

<

 

h1>Bulk Job Status Report</h1>

 

 

 

 

 

 

<telerik:RadScriptManager ID="ScriptManager1" runat="server" />

 

 

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" >

 

 

 

<AjaxSettings>

 

 

 

<telerik:AjaxSetting AjaxControlID="JobReportGrid">

 

 

<UpdatedControls>

 

 

<telerik:AjaxUpdatedControl ControlID="JobReportGrid" LoadingPanelID="RadAjaxLoadingPanel1" />

 

 

</UpdatedControls>

 

 

</telerik:AjaxSetting>

 

 

<telerik:AjaxSetting AjaxControlID="JobDetailGrid">

 

 

<UpdatedControls>

 

 

<telerik:AjaxUpdatedControl ControlID="JobDetailGrid" LoadingPanelID="RadAjaxLoadingPanel1" />

 

 

</UpdatedControls>

 

 

</telerik:AjaxSetting>

 

 

</AjaxSettings>

 

 

</telerik:RadAjaxManager>

 

 

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" EnableAjaxSkinRendering="true" runat="server">

 

 

</telerik:RadAjaxLoadingPanel>

 

 

<

 

asp:Panel ID="Job_Report" runat="server" Width="805px">

 

<

 

fieldset>

 

<

 

legend>Search Bulk Job</legend>

 

 

<table>

 

 

<tr>

 

 

<td>

 

 

<uc1:CFNList id="CFNList1" runat="server">

 

 

</uc1:CFNList>

 

 

</td>

 

 

 

<td>

 

Job:

 

 

<br />

 

 

<telerik:RadTextBox ID="JobTextBox" runat="server" Width="125px" MaxLength="5"></telerik:RadTextBox>

 

 

 

</td>

 

 

<td>

 

Location:

 

 

<br />

 

 

<telerik:RadTextBox ID="LocTextBox" runat="server" Width="125px" MaxLength="6" CausesValidation="true"></telerik:RadTextBox>

 

 

</td>

 

 

<td>

 

Title:

 

 

<br />

 

 

<telerik:RadTextBox ID="TitleTextBox" runat="server" Width="125px" MaxLength="5"></telerik:RadTextBox>

 

 

</td>

 

 

 

<td>

 

 

 

 

<br />

 

 

<asp:Button ID="SearchJob" runat="server" Width="100px" Height="24px" CssClass="Button" Text="Search" OnClick="Search_Job_Click" OnClientClick="JavaScript: return ValidateData();" />

 

 

</td>

 

 

</tr>

 

 

<tr>

 

 

<td class="tbtxtbox" colspan="3" style="height:20px;">

 

 

<asp:Label ID="lblError" runat="server" Height="10px" Font-Size="Small" ForeColor="red" >

 

 

</asp:Label>

 

 

</td>

 

 

</tr>

 

 

</table>

 

 

</fieldset>

 

 

</asp:Panel>

 

 

 

<br />

 

 

 

 

<div id="Div">

 

 

 

<asp:Panel runat="server" ID="Job_Header" Width="800px" BackColor="#6598cd">

 

 

<div id="exportDiv" style="position:relative; left :455px;">

 

 

<label style="font-size:large; font-weight:bold; color:White; position:relative; left:-190px;">Bulk Job Report</label>

 

 

<asp:Button id="ExporttoExcel" Width="100px" CssClass="Button" runat="server" Text="Export to Excel" OnClick="ExporttoExcel_Click" />

 

 

<asp:Button ID="ExporttoPdf" Width="100px" CssClass="Button" runat="server" Text="Export to Pdf" OnClick="ExporttoPdf_Click" />

 

 

</div>

 

 

&nbsp;<telerik:RadGrid ID="JobReportGrid" runat="server" MasterTableView-BorderColor="white" MasterTableView-BorderWidth="5px" HeaderStyle-BorderWidth="3px" FooterStyle-BorderWidth="3px" ItemStyle-BorderWidth="3px" HeaderStyle-BorderStyle="Solid" FooterStyle-BorderStyle="Solid" ItemStyle-BorderStyle="Solid"

 

 

HeaderStyle-BorderColor="#a0b3c6" ItemStyle-BorderColor="#a0b3c6" FooterStyle-BackColor="#a0b3c6" GridLines="Both" AllowPaging="true" AllowSorting="true" OnPageIndexChanged="Job_Report_PageIndexChanged" OnSelectedIndexChanged ="Job_Report_Grid_SelectedIndexChanged" OnPageSizeChanged="Job_Report_Grid_PageSizeChanged" OnSortCommand="JobReportGrid_SortCommand" OnExcelMLExportStylesCreated="JobReportGrid_ExcelMLExportStylesCreated" OnItemCreated="JobReportGrid_ItemCreated" >

 

 

<ExportSettings FileName="BulkJobReport" OpenInNewWindow="true" IgnorePaging="true" ExportOnlyData="true">

 

 

<Excel Format="ExcelML" FileExtension="xls"/>

 

 

<Pdf FontType="Subset" PaperSize="letter" />

 

 

</ExportSettings>

 

 

<MasterTableView AutoGenerateColumns="false">

 

 

 

<RowIndicatorColumn>

 

 

<HeaderStyle Width="20px" />

 

 

</RowIndicatorColumn>

 

 

<ExpandCollapseColumn>

 

 

<HeaderStyle Width="20px" />

 

 

</ExpandCollapseColumn>

 

 

 

<Columns>

 

 

<telerik:GridBoundColumn HeaderText="Job" DataField="JOB" UniqueName="JOB" ReadOnly="True" SortExpression="JOB" HeaderButtonType="TextButton" >

 

 

<HeaderStyle Width="50px" />

 

 

<ItemStyle Width="50px" />

 

 

</telerik:GridBoundColumn>

 

 

<telerik:GridBoundColumn HeaderText="Title" DataField="TITLE" UniqueName="TITLE" ReadOnly="True" SortExpression="TITLE" HeaderButtonType="TextButton" >

 

 

<HeaderStyle Width="50px" />

 

 

<ItemStyle Width="50px" />

 

 

</telerik:GridBoundColumn>

 

 

<telerik:GridBoundColumn HeaderText="Location" DataField="LOCATION" UniqueName="LOCATION" ReadOnly="True" SortExpression="LOCATION" HeaderButtonType="TextButton">

 

 

<HeaderStyle Width="50px" />

 

 

<ItemStyle Width="50px" />

 

 

</telerik:GridBoundColumn>

 

 

<telerik:GridBoundColumn HeaderText="JobCost" DataField="JOBCOST" UniqueName="JOBCOST" ReadOnly="True" DataFormatString="{0:$#####.#0}" SortExpression="JOBCOST" HeaderButtonType="TextButton" >

 

 

<HeaderStyle Width="50px" />

 

 

<ItemStyle Width="50px" />

 

 

</telerik:GridBoundColumn>

 

 

<telerik:GridBoundColumn HeaderText="JobExpand" DataField="JOBEXPEND" UniqueName="JOBEXPAND" ReadOnly="True" DataFormatString="{0:$#####.#0}" SortExpression="JOBEXPEND" HeaderButtonType="TextButton" >

 

 

<HeaderStyle Width="50px" />

 

 

<ItemStyle Width="50px" />

 

 

</telerik:GridBoundColumn>

 

 

<telerik:GridBoundColumn HeaderText="PendAm" DataField="PENDAM" UniqueName="PENDAM" ReadOnly="True" DataFormatString="{0:$#####.#0}" SortExpression="PENDAM" HeaderButtonType="TextButton" >

 

 

<HeaderStyle Width="50px" />

 

 

<ItemStyle Width="50px" />

 

 

</telerik:GridBoundColumn>

 

 

<telerik:GridBoundColumn HeaderText="Available" DataField="MONEYLEFT" UniqueName="MONEYLEFT" ReadOnly="True" DataFormatString="{0:$#####.#0}" SortExpression="MONEYLEFT" HeaderButtonType="TextButton">

 

 

<HeaderStyle Width="50px" />

 

 

<ItemStyle Width="50px" />

 

 

</telerik:GridBoundColumn>

 

 

</Columns>

 

 

<asterTableView>

 

 

<ClientSettings EnableRowHoverStyle="True" EnablePostBackOnRowClick ="true" >

 

<Selecting AllowRowSelect ="true" />

 

 

</ClientSettings>

 

 

 

</telerik:RadGrid>

 

 

 

 

</asp:Panel>

 

 

</div>

 

 

<br />

 

 

 

 

<br />

 

 

 

<div id="dataDiv1">

 

 

<asp:Panel runat="server" ID="Job_Detail" Width="800px" BackColor="#6598cd" Visible="true">

 

 

 

<div id="exportDiv1" style="position:relative; left :390px; " >

 

 

<label style="font-size:large; font-weight:bold; color:White; position:relative; left: -150px;">Bulk Job Detail Report</label>

 

 

<asp:Button id="ExporttoExcel1" Width="105px" CssClass="Button" runat="server" Text="Export to Excel" OnClick="ExporttoExcel_Click1" />

 

 

<asp:Button ID="ExporttoPdf1" Width="105px" CssClass="Button" runat="server" Text="Export to Pdf" OnClick="ExporttoPdf1_Click" />

 

 

</div>

 

 

 

 

&nbsp;<telerik:RadGrid ID="JobDetailGrid" runat="server" GridLines="Both" AllowPaging="true" AllowSorting="true" MasterTableView-BorderColor="white" MasterTableView-BorderWidth="5px" HeaderStyle-BorderWidth="3px" FooterStyle-BorderWidth="3px" ItemStyle-BorderWidth="3px" HeaderStyle-BorderStyle="Solid" FooterStyle-BorderStyle="Solid" ItemStyle-BorderStyle="Solid" HeaderStyle-BorderColor="#a0b3c6" FooterStyle-BorderColor="#a0b3c6" ItemStyle-BorderColor="#a0b3c6"

 

 

OnPageIndexChanged="Job_Detail_PageIndexChanged" OnPageSizeChanged="Job_Detail_Grid_PageSizeChanged" OnSortCommand="Job_Detail_Grid_SortCommand" OnExcelMLExportStylesCreated="JobDetailGrid_ExcelMLExportStylesCreated" OnItemCreated="JobDetailGrid_ItemCreated" ShowGroupPanel="true" OnNeedDataSource="JobDetailGrid_NeedDataSource" OnGroupsChanging="JobDetailGrid_GroupsChanging" OnExcelMLExportRowCreated="JobDetailGrid_ExcelMLExportRowCreated" >

 

 

<ExportSettings FileName="BulkJobDetailReport" OpenInNewWindow="true" IgnorePaging="true" ExportOnlyData="true" >

 

 

<Excel Format="ExcelML" />

 

 

<Pdf FontType="Subset" />

 

 

</ExportSettings>

 

 

<MasterTableView AutoGenerateColumns="false" GroupsDefaultExpanded="false" >

 

 

 

<RowIndicatorColumn>

 

 

<HeaderStyle Width="20px" />

 

 

</RowIndicatorColumn>

 

 

<ExpandCollapseColumn>

 

 

<HeaderStyle Width="20px" />

 

 

</ExpandCollapseColumn>

 

 

<Columns>

 

 

<telerik:GridBoundColumn HeaderText="Pri" DataField="FILENO" UniqueName="FILENO" ReadOnly="True" SortExpression="FILENO" HeaderButtonType="TextButton" >

 

 

<HeaderStyle Width="50px" />

 

 

<ItemStyle Width="50px" />

 

 

</telerik:GridBoundColumn>

 

 

<telerik:GridBoundColumn HeaderText="CheckNumber" DataField="CHECKID" UniqueName="CHKID" ReadOnly="True" SortExpression="CHECKID" HeaderButtonType="TextButton">

 

 

<HeaderStyle Width="50px" />

 

 

<ItemStyle Width="50px" />

 

 

</telerik:GridBoundColumn>

 

 

<telerik:GridBoundColumn HeaderText="Location" DataField="LOCATION" UniqueName="LOCATION" ReadOnly="True" SortExpression="LOCATION" HeaderButtonType="TextButton">

 

 

<HeaderStyle Width="50px" />

 

 

<ItemStyle Width="50px" />

 

 

</telerik:GridBoundColumn>

 

 

<telerik:GridBoundColumn HeaderText="EvntCode" DataField="EVENTCODE" UniqueName="EVENTCODE" ReadOnly="True" SortExpression="EVENTCODE" HeaderButtonType="TextButton" >

 

 

<HeaderStyle Width="50px" />

 

 

<ItemStyle Width="50px" />

 

 

</telerik:GridBoundColumn>

 

 

<telerik:GridBoundColumn HeaderText="EarnDate" DataField="SERVICEDT" UniqueName="SERVICEDT" ReadOnly="True" DataFormatString="{0:MM/dd/yyyy}" SortExpression="SERVICEDT" HeaderButtonType="TextButton">

 

 

<HeaderStyle Width="50px" />

 

 

<ItemStyle Width="50px" />

 

 

</telerik:GridBoundColumn>

 

 

<telerik:GridBoundColumn HeaderText="ServiceHrs" DataField="HRS" UniqueName="HRS" ReadOnly="True" SortExpression="HRS" HeaderButtonType="TextButton">

 

 

<HeaderStyle Width="50px" />

 

 

<ItemStyle Width="50px" />

 

 

</telerik:GridBoundColumn>

 

 

<telerik:GridBoundColumn HeaderText="ServiceMins" DataField="MINS" UniqueName="MINS" ReadOnly="True" SortExpression="MINS" HeaderButtonType="TextButton" >

 

 

<HeaderStyle Width="50px" />

 

 

<ItemStyle Width="50px" />

 

 

</telerik:GridBoundColumn>

 

 

<telerik:GridBoundColumn HeaderText="ServicePers" DataField="PERS" UniqueName="PERS" ReadOnly="True" SortExpression="PERS" HeaderButtonType="TextButton" >

 

 

<HeaderStyle Width="50px" />

 

 

<ItemStyle Width="50px" />

 

 

</telerik:GridBoundColumn>

 

 

<telerik:GridBoundColumn HeaderText="RsnCode" DataField="REASONCODE" UniqueName="REASONCODE" ReadOnly="True" SortExpression="REASONCODE" HeaderButtonType="TextButton" >

 

 

<HeaderStyle Width="50px" />

 

 

<ItemStyle Width="50px" />

 

 

</telerik:GridBoundColumn>

 

 

<telerik:GridBoundColumn HeaderText="PayAm" DataField="PAYAMOUNT" UniqueName="PAYAMOUNT" ReadOnly="True" DataFormatString="{0:$###.#0}" SortExpression="PAYAMOUNT" HeaderButtonType="TextButton" >

 

 

<HeaderStyle Width="50px" />

 

 

<ItemStyle Width="50px" />

 

 

</telerik:GridBoundColumn>

 

 

 

</Columns>

 

 

</MasterTableView>

 

 

<ClientSettings EnableRowHoverStyle="True" AllowDragToGroup="true">

 

 

 

 

</ClientSettings>

 

 

<GroupingSettings ShowUnGroupButton="true" />

 

 

</telerik:RadGrid>

 

 

 

 

 

</asp:Panel>

 

 

</div>

 

 

 

<script type ="text/javascript" language="javascript">

 

 

 

 

function ValidateData()

 

{

 

 

if((document.getElementById ('<%=JobTextBox.ClientID %>').value.trim().length <= 0) && (document.getElementById ('<%=LocTextBox.ClientID %>').value.trim().length <= 0) && (document.getElementById ('<%=CFNList1.FindControl("ddlCFN").ClientID %>').value.trim()== "SELECT CFN"))

 

{

 

document.getElementById (

'<%=lblError.ClientID %>').innerText = 'Please enter at least Job or Location or CFN for Search Criteria';

 

 

document.getElementById (

'<%=lblError.ClientID %>').style.display = 'block';

 

 

 

return false;

 

}

 

document.getElementById (

'<%=lblError.ClientID %>').style.display = 'none';

 

 

return true;

 

}

</

 

script>

 

[Maria Ilieva]

Hello Vasya,

The code you provided looks ok to me. In order to provide more to-the-point solution please open a regular support ticket and send a runnbale application which replicates the issue. We will test it locally and advise you further.

Regards,
Maria Ilieva
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Vasya Ivanov]

Thanks Maria,its working now.I was able to figure out what was a problem.
Thanks again.