When the below page is being loaded, i wanted to have the loading page displayed while the charts (ex. RadHtmlChart3) are being loaded. It is not working for me. Anything wrong with my code?
Code:
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="HotelView.aspx.vb" Inherits="web_grm_dashboard_HotelView" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Hotel Dashboard - PULSE</title>
<link href="~/styles/Default.css" rel="stylesheet" type="text/css" />
<style>
.tablecell
{
border:1px solid silver;
border-radius:10px;
background-color:white;
}
.labeltitle
{
color:darkgray;
font-size:11px;
}
.labelcell{
font-size:22px;
font-weight:bold;
color:black;
}
.labeltitlevertical
{
font-weight:bold;
color:white;
writing-mode:vertical-rl;
-webkit-transform:rotate(270deg);
font-weight:normal;
font-size:11px;
}
</style>
</head>
<body class="body">
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<telerik:RadAjaxManager runat="server" ID="RadAjaxManager1">
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="RadHtmlChart1"></telerik:AjaxUpdatedControl>
<telerik:AjaxUpdatedControl ControlID="RadHtmlChart2"></telerik:AjaxUpdatedControl>
<telerik:AjaxUpdatedControl ControlID="RadHtmlChart3"></telerik:AjaxUpdatedControl>
<telerik:AjaxUpdatedControl ControlID="RadHtmlChart4"></telerik:AjaxUpdatedControl>
</UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>
</telerik:RadAjaxManager>
<telerik:RadAjaxLoadingPanel runat="server" ID="LoadingPanel1" Skin="MetroTouch">
</telerik:RadAjaxLoadingPanel>
<table style="width: 100%">
<tr>
<td class="tablecell" colspan="2" style="width:66%">
<table class="table" style="width: 100%; text-align: center">
<tr>
<td>
<asp:Label ID="Label10" CssClass="labeltitle" runat="server" Text="Unassigned"></asp:Label><br />
<asp:Label ID="Label11" CssClass="labelcell" ForeColor="red" runat="server" Text="2"></asp:Label>
</td>
<td style="border-right: 1px solid gray"></td>
<td>
<asp:Label ID="Label12" CssClass="labeltitle" runat="server" Text="Inprogress"></asp:Label><br />
<asp:Label ID="Label13" CssClass="labelcell" ForeColor="Blue" runat="server" Text="6"></asp:Label>
</td>
<td style="border-right: 1px solid gray"></td>
<td>
<asp:Label ID="Label2" CssClass="labeltitle" runat="server" Text="Today"></asp:Label><br />
<asp:Label ID="Label3" CssClass="labelcell" runat="server" Text="42"></asp:Label>
</td>
<td style="border-right: 1px solid gray"></td>
<td>
<asp:Label ID="Label4" CssClass="labeltitle" runat="server" Text="This Week"></asp:Label><br />
<asp:Label ID="Label5" CssClass="labelcell" runat="server" Text="155"></asp:Label>
</td>
<td style="border-right: 1px solid gray"></td>
<td>
<asp:Label ID="Label6" CssClass="labeltitle" runat="server" Text="This Month"></asp:Label><br />
<asp:Label ID="Label7" CssClass="labelcell" runat="server" Text="684"></asp:Label>
</td>
</tr>
</table>
</td>
<td class="tablecell" style="background-color:rgba(0, 0, 0, 1)">
<table style="width: 100%; text-align: center">
<tr>
<td class="labeltitlevertical" style="width:10px">
<asp:Label ID="Label8" Font-Size="13px" Font-Bold="true" runat="server" Text="Timers"></asp:Label><br />hh:mm
</td>
<td>
<asp:Label ID="Label1" CssClass="labeltitle" runat="server" Text="Avg. Assign"></asp:Label><br />
<asp:Label ID="Label14" CssClass="labelcell" ForeColor="white" runat="server" Text="00:12"></asp:Label>
</td>
<td style="border-right: 1px solid gray"></td>
<td>
<asp:Label ID="Label15" CssClass="labeltitle" runat="server" Text="Avg. Close"></asp:Label><br />
<asp:Label ID="Label16" CssClass="labelcell" ForeColor="white" runat="server" Text="02:40"></asp:Label>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="tablecell" style="height:250px">
<telerik:RadHtmlChart ID="RadHtmlChart3" runat="server" ToolTip="Data for the past 30 days" Height="250px" Skin="Bootstrap" Width="100%" DataSourceID="SqlDataSource3">
<ChartTitle Text="Departmental Assignments"></ChartTitle>
<Legend>
<Appearance Visible="false">
</Appearance>
</Legend>
<PlotArea>
<XAxis Visible="True" DataLabelsField="Department"></XAxis>
<YAxis Visible="false"></YAxis>
<Series>
<telerik:BarSeries DataFieldY="Opened" Name="Request by Department" Gap="0.5">
<Appearance FillStyle-BackgroundColor="ForestGreen"></Appearance>
<LabelsAppearance DataField="Opened" Position="Center" Color="white" DataFormatString="{0}">
</LabelsAppearance>
<TooltipsAppearance DataFormatString="{0} requests"></TooltipsAppearance>
</telerik:BarSeries>
</Series>
</PlotArea>
</telerik:RadHtmlChart>
<asp:SqlDataSource ID="SqlDataSource3" runat="server" ConnectionString="<%$ ConnectionStrings:grmConnectionString %>"
SelectCommand="SELECT TOP 5 [Department], [Opened] FROM [rep_department_performance] Where Property_ID = @Property_ID ORDER BY [Department]">
<SelectParameters>
<asp:SessionParameter Name="Property_ID" SessionField="Property_ID" Type="Int32" />
</SelectParameters>
</asp:SqlDataSource>
</td>
<td class="tablecell">
<%--<telerik:RadHtmlChart ID="RadHtmlChart4" NameField="Area" ToolTip="Data for the past 30 days" Width="100%" Height="230px" runat="server" Skin="Bootstrap" DataSourceID="SqlDataSource4">
<ChartTitle Text="Area Requests"></ChartTitle>
<Legend>
<Appearance Visible="false"></Appearance>
</Legend>
<PlotArea>
<XAxis DataLabelsField="Area"></XAxis>
<Series>
<telerik:ColumnSeries DataFieldY="Opened" Name="Opened" Gap="0.5">
<Appearance FillStyle-BackgroundColor="brown"></Appearance>
<LabelsAppearance Color="white" DataField="Opened" Position="Center" DataFormatString="{0}">
</LabelsAppearance>
<TooltipsAppearance DataFormatString="{0} requests"></TooltipsAppearance>
</telerik:ColumnSeries>
</Series>
</PlotArea>
</telerik:RadHtmlChart>
<asp:SqlDataSource ID="SqlDataSource4" runat="server" ConnectionString="<%$ ConnectionStrings:grmConnectionString %>"
SelectCommand="SELECT [Area], [Opened], [Percentage] FROM [rep_request_by_area] WHERE ([Property_ID] = @Property_ID)">
<SelectParameters>
<asp:SessionParameter Name="Property_ID" SessionField="Property_ID" Type="Int32" />
</SelectParameters>
</asp:SqlDataSource>--%>
<telerik:RadHtmlChart ID="RadHtmlChart4" runat="server" DataSourceID="SqlDataSource4" ToolTip="Data for the past 30 days" Skin="Bootstrap" Width="100%" Height="250px">
<ChartTitle Text="Performance Indicator"></ChartTitle>
<PlotArea>
<XAxis Visible="True" DataLabelsField="Department"></XAxis>
<Series>
<telerik:BarSeries DataFieldY="Ontime" Gap="0.5" Stacked="true" Name="Ontime" StackType="Stack100">
<Appearance FillStyle-BackgroundColor="MediumPurple"></Appearance>
<TooltipsAppearance Color="Black"></TooltipsAppearance>
<LabelsAppearance Position="Center" Color="white"></LabelsAppearance>
</telerik:BarSeries>
<telerik:BarSeries DataFieldY="Delayed" Stacked="true" Name="Delayed" StackType="Stack100">
<Appearance FillStyle-BackgroundColor="LightGray"></Appearance>
<LabelsAppearance Position="Center"></LabelsAppearance>
</telerik:BarSeries>
</Series>
</PlotArea>
<Legend>
<Appearance Position="bottom"></Appearance>
</Legend>
</telerik:RadHtmlChart>
<asp:SqlDataSource ID="SqlDataSource4" runat="server" ConnectionString="<%$ ConnectionStrings:grmConnectionString %>"
SelectCommand="SELECT [Department],[Delayed], [Ontime] FROM [rep_department_performance] Where Property_ID = @Property_ID ORDER BY [Department]">
<SelectParameters>
<asp:SessionParameter Name="Property_ID" SessionField="Property_ID" Type="Int32" />
</SelectParameters>
</asp:SqlDataSource>
</td>
<td class="tablecell">
<telerik:RadHtmlChart ID="RadHtmlChart2" runat="server" DataSourceID="SqlDataSource2" ToolTip="Data for the past 30 days" Skin="Bootstrap" Width="100%" Height="250px">
<ChartTitle Text="Categorical Requests"></ChartTitle>
<PlotArea>
<XAxis Visible="True" DataLabelsField="Category">
</XAxis>
<Series>
<telerik:DonutSeries DataFieldY="Percentage" NameField="Category" StartAngle="360" ExplodeField="Percentage" Visible="true">
<LabelsAppearance DataField="Percentage" Position="Center" DataFormatString="{0}%">
<TextStyle Margin="0" Padding="0" />
</LabelsAppearance>
<TooltipsAppearance DataFormatString="{0}%"></TooltipsAppearance>
</telerik:DonutSeries>
</Series>
</PlotArea>
<Legend>
<Appearance Position="Left"></Appearance>
</Legend>
</telerik:RadHtmlChart>
<asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:grmConnectionString %>"
SelectCommand="SELECT Top 10 [Category],[Percentage], [Opened] FROM [rep_request_by_category] Where Property_ID = @Property_ID ORDER BY [Category]">
<SelectParameters>
<asp:SessionParameter Name="Property_ID" SessionField="Property_ID" Type="Int32" />
</SelectParameters>
</asp:SqlDataSource>
</td>
</tr>
<tr>
<td colspan="3" class="tablecell" style="height:210px">
<telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" ToolTip="Data for the past 30 days" Width="100%" Height="210px" Skin="Bootstrap" DataSourceID="SqlDataSource1">
<PlotArea>
<XAxis Visible="True" DataLabelsField="Date"></XAxis>
<YAxis Visible="True"></YAxis>
<Series>
<telerik:AreaSeries DataFieldY="Opened" Name="Open Requests">
<Appearance>
<FillStyle BackgroundColor="blue"></FillStyle>
</Appearance>
<TooltipsAppearance DataFormatString="{0} requests"></TooltipsAppearance>
<LineAppearance Width="1"></LineAppearance>
<MarkersAppearance MarkersType="Circle" BackgroundColor="White" Size="6" BorderColor="blue"></MarkersAppearance>
</telerik:AreaSeries>
</Series>
<XAxis AxisCrossingValue="0" Color="black" Reversed="false">
<LabelsAppearance DataFormatString="{0:dd/MM}" RotationAngle="45" Skip="0"></LabelsAppearance>
</XAxis>
<YAxis Color="black" MinorTickType="None" MinValue="0" Reversed="false"></YAxis>
</PlotArea>
<Legend>
<Appearance Visible="false"></Appearance>
</Legend>
<Navigator>
<SelectionHint Visible="False"></SelectionHint>
</Navigator>
</telerik:RadHtmlChart>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:grmConnectionString %>"
SelectCommand="SELECT [Date], [Opened] FROM [rep_request_per_day] WHERE Property_ID = @Property_ID">
<SelectParameters>
<asp:SessionParameter Name="Property_ID" SessionField="Property_ID" Type="Int32" />
</SelectParameters>
</asp:SqlDataSource>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
2 Answers, 1 is accepted
Rank 1
Hi Shady,
With this configuration a loading panel will not be shown for two reasons:
- the RadAjaxManager is not configured to use the loading panel
- the charts will load their data during the initial page load, so no subsequent requests will be made
Since I am not sure what your setup is, here are some general ideas you may find useful:
- how to configure a RadAjaxLoadingPanel:
- either use the DefaultLoadingPanelID property like this:
<telerik:RadAjaxManagerrunat="server"ID="RadAjaxManager1"DefaultLoadingPanelID="LoadingPanel1"> - and/or configure loading panels for each updated control, e.g.:
<telerik:AjaxUpdatedControlControlID="RadHtmlChart1"LoadingPanelID="LoadingPanel1"></telerik:AjaxUpdatedControl>
- either use the DefaultLoadingPanelID property like this:
- if you do not bind the charts on the initial page load, you can invoke an AJAX request to fetch the data after the page loads quickly for the first time: http://docs.telerik.com/devtools/aspnet-ajax/controls/ajaxloadingpanel/how-to/show-ajaxloadingpanel-on-initial-page-load. In this case you would just have to set the DataSourceID property on the server on the second page load.
- you may also want to look into data binding he charts on the client to improve the server page load performance:
- http://demos.telerik.com/aspnet-ajax/htmlchart/examples/clientsidedatabinding/defaultcs.aspx. In such a case you may want to show and hide the loading panel with your own code when the data requests start and end: http://docs.telerik.com/devtools/aspnet-ajax/controls/ajaxloadingpanel/how-to/show-and-hide-ajaxloadingpanel-explicitly.
- or by using the ClientDataSource control: http://demos.telerik.com/aspnet-ajax/htmlchart/examples/databinding/clientdatasource/defaultcs.aspx.
Regards,
Marin BratanovTelerik by Progress