LoadingPanel around radHtmlChart

Thread is closed for posting
3 posts, 0 answers
  1. Shady
    Shady avatar
    13 posts
    Member since:
    Oct 2016

    Posted 02 Dec 2016 Link to this post

    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. Shady
    Shady avatar
    13 posts
    Member since:
    Oct 2016

    Posted 05 Dec 2016 Link to this post

    any luck guys?
  3. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3899 posts

    Posted 07 Dec 2016 Link to this post

    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:

     

    Regards,

    Marin Bratanov
    Telerik by Progress
    Telerik UI for ASP.NET AJAX is ready for Visual Studio 2017 RC! Learn more.
Back to Top