RadAjaxLoadingPanel activated onClick do not work with master page

2 posts, 0 answers
  1. Nikos
    Nikos avatar
    8 posts
    Member since:
    Sep 2015

    Posted 29 Feb Link to this post


    I am transfering some standalone .aspx pages (with telerik controls such as radButtons, radHtmlCharts, radCodeBlocks etc.) to pages that use a master page file for common layouting.

    I am facing an issue with AjaxManager and AjaxLoadingPanel, activated when the user clicks on a RadHtmlChart series to drill down. This was working just fine when the page was implemented as standalone however it stopped working when tried to bind the page to a master page file.

    What i exactly try to achieve is to have a chart loaded in a AjaxLoadingPanel on its series click event. I have also mupltiple RadHtmlCharts in my page so the only way to load each chart separately (on its series click event) is to have some hidden buttons in my page,passing some ajaxRequestWithTarget values to vode behind.

    Since i am using a master page, i use an RadAjaxManagerProxy in my .aspx page for managing telerik control ajax update actions.

    So here is my master page code:

    <%@ Master Language="VB" AutoEventWireup="true" CodeFile="DashboardMaster.master.vb" Inherits="DashboardMaster" %>
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <!DOCTYPE html>
    <head runat="server">
        <asp:ContentPlaceHolder id="head" runat="server">
        <form id="form1" runat="server">
                <telerik:RadScriptManager ID="RadScriptManager1" runat="server" EnablePartialRendering="true">
                        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
                        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
                        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
                <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
                    <asp:ContentPlaceHolder id="MainContent" runat="server">

    And here is the .aspx page relevant code:

    <%@ Page Title="" Language="VB" MasterPageFile="~/Dashboard2/DashboardMaster.master" AutoEventWireup="true" CodeFile="CorporateView3.aspx.vb" Inherits="CorporateView3" %>
    <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
        <telerik:RadAjaxManagerProxy ID="RadAjaxManagerProxy1" runat="server">
                <telerik:AjaxSetting AjaxControlID="RadButtonAverageImageResolutionOfCountries">
                            <telerik:AjaxUpdatedControl ControlID="RadHtmlChartAverageImageResolutionOfCountries" LoadingPanelID="AjaxLoadingPanel1" />
        <telerik:RadCodeBlock ID="RadCodeBlock65" runat="server">
            <script type="text/javascript">
                function AverageImageResolutionOfCountriesOnClientSeriesClicked(sender, args) {
                    var btn1 = $find("<%=RadButtonAverageImageResolutionOfCountries.ClientID%>");
                    if (args.get_seriesName() !== "Sites") {
                        $find('<%= RadAjaxManager.GetCurrent(Page).ClientID %>').ajaxRequestWithTarget("RadButtonAverageImageResolutionOfCountries", "");
        <telerik:RadAjaxLoadingPanel ID="AjaxLoadingPanel1" runat="server" Skin="BlackMetroTouch">
        <div style="display: none;">
            <telerik:RadButton ID="RadButtonAverageImageResolutionOfCountries" runat="server" Text="RadButtonAverageImageResolutionOfCountries" OnClick="RadButtonAverageImageResolutionOfCountries_Click" />
        <div class="col4">
            <telerik:RadHtmlChart runat="server" ID="RadHtmlChartAverageImageResolutionOfCountries" Skin="Black"  Height="280" OnClientSeriesClicked="AverageImageResolutionOfCountriesOnClientSeriesClicked">
                                <FillStyle BackgroundColor="#262626"></FillStyle>
                            <ChartTitle Text="Average Image Resolution">
                                    <TextStyle Color="#7f7f7f" FontSize="18" FontFamily="Arial,sans-serif" Margin="5 0 40 0" Padding="0" Bold="true" Italic="false" />
                                <Appearance Visible="false" />
                                    <telerik:ColumnSeries Name="Countries" DataFieldY="AverageImageResolution">
                                        <TooltipsAppearance DataFormatString="{0:0,0.00}" />
                                        <LabelsAppearance Visible="true" DataFormatString="{0:0,0.00}" Color="#b5acac" />
                                        <Appearance FillStyle-BackgroundColor="#336ca6" Overlay-Gradient="None"></Appearance>
                                <XAxis DataLabelsField="Country" Color="#8f8686">
                                    <MajorGridLines Color="#424040" Width="1" Visible="true"></MajorGridLines>
                                    <MinorGridLines Color="#343333" Width="1" Visible="true"></MinorGridLines>
                                <YAxis Color="#8f8686">
                                    <LabelsAppearance DataFormatString="{0}" />
                                    <MajorGridLines Color="#424040" Width="1" Visible="true"></MajorGridLines>
                                    <MinorGridLines Color="#343333" Width="1" Visible="true"></MinorGridLines>

    As you can see there is an RadHtmlChart: RadHtmlChartAverageImageResolutionOfCountries in the page, triggering AverageImageResolutionOfCountriesOnClientSeriesClicked when a series item is clicked.

    This jscript function is triggering: ajaxRequestWithTarget(RadButtonAverageImageResolutionOfCountries...) which updates the radHtmlChart using AjaxLoadingPanel1. 

    The code called on button "click" is:

    Protected Sub RadButtonAverageImageResolutionOfCountries_Click(ByVal sender As Object, ByVal e As EventArgs)
            'Execute some server logic
            Dim seriesNameRes As String = RadHtmlChartAverageImageResolutionOfCountries.PlotArea.Series(0).Name
            If seriesNameRes = "Countries" Then
                Dim CountryRes As String = (RadButtonAverageImageResolutionOfCountries.CommandName).ToString
                RadHtmlChartAverageImageResolutionOfCountries.PlotArea.XAxis.DataLabelsField = "Site"
                RadHtmlChartAverageImageResolutionOfCountries.PlotArea.Series(0).DataFieldY = "AverageImageResolution"
                RadHtmlChartAverageImageResolutionOfCountries.DataSource = GetAverageImageResolutionOfEntitiesSelectedParentTimeSpan("Sites", CountryRes, FromDateValue, ToDateValue)
            End If       
    End Sub

    The logic above used to work just fine, however is stopped working when start using a master page file

    Now when the user clicks on a series item event if jscript function is called (AverageImageResolutionOfCountriesOnClientSeriesClicked), the page get fully refrershed.

    AjaxLoadingPanel is not working any more and the code behind is not called at all (RadButtonAverageImageResolutionOfCountries_Click not called).

    Any ideas of what i may be missing?

  2. Maria Ilieva
    Maria Ilieva avatar
    4017 posts

    Posted 02 Mar Link to this post

    Hello Nikos,

    See the answer provided in the support ticket you have opened for the same issue. Test if the provided suggestion helps and if further assistance is needed I would suggests to continue our communication in the support thread so that we can easily track the case.

    Maria Ilieva
    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 Feedback Portal and vote to affect the priority of the items
  3. DevCraft R3 2016 release webinar banner
Back to Top