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

RadAjaxLoadingPanel activated onClick do not work with master page

1 Answer 89 Views
Ajax
This is a migrated thread and some comments may be shown as answers.
Nikos
Top achievements
Rank 1
Nikos asked on 29 Feb 2016, 11:27 AM

Hi!

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">
    </asp:ContentPlaceHolder>
</head>
<body>
 
    ...
 
    <form id="form1" runat="server">
 
            <telerik:RadScriptManager ID="RadScriptManager1" runat="server" EnablePartialRendering="true">
                <Scripts>
                    <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" />
                </Scripts>
            </telerik:RadScriptManager>
             
            <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            </telerik:RadAjaxManager>
 
            <div>
                <asp:ContentPlaceHolder id="MainContent" runat="server">
         
                </asp:ContentPlaceHolder>
            </div>
    </form>
    ...

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">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadButtonAverageImageResolutionOfCountries">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadHtmlChartAverageImageResolutionOfCountries" LoadingPanelID="AjaxLoadingPanel1" />
                    </UpdatedControls>
            </telerik:AjaxSetting>
            ...
             
    </telerik:RadAjaxManagerProxy>
    ...
    <telerik:RadCodeBlock ID="RadCodeBlock65" runat="server">
        <script type="text/javascript">
            function AverageImageResolutionOfCountriesOnClientSeriesClicked(sender, args) {
                var btn1 = $find("<%=RadButtonAverageImageResolutionOfCountries.ClientID%>");
                if (args.get_seriesName() !== "Sites") {
                    btn1.set_commandName(args.get_category());
                    $find('<%= RadAjaxManager.GetCurrent(Page).ClientID %>').ajaxRequestWithTarget("RadButtonAverageImageResolutionOfCountries", "");
                }
            }
        </script>
    </telerik:RadCodeBlock>
    ...
    <telerik:RadAjaxLoadingPanel ID="AjaxLoadingPanel1" runat="server" Skin="BlackMetroTouch">
    </telerik:RadAjaxLoadingPanel>
    ...
    <div style="display: none;">
        <telerik:RadButton ID="RadButtonAverageImageResolutionOfCountries" runat="server" Text="RadButtonAverageImageResolutionOfCountries" OnClick="RadButtonAverageImageResolutionOfCountries_Click" />
    </div>
    ...
    ...
    <div class="col4">
        <telerik:RadHtmlChart runat="server" ID="RadHtmlChartAverageImageResolutionOfCountries" Skin="Black"  Height="280" OnClientSeriesClicked="AverageImageResolutionOfCountriesOnClientSeriesClicked">
                        <Appearance>
                            <FillStyle BackgroundColor="#262626"></FillStyle>
                        </Appearance>
                        <ChartTitle Text="Average Image Resolution">
                            <Appearance>
                                <TextStyle Color="#7f7f7f" FontSize="18" FontFamily="Arial,sans-serif" Margin="5 0 40 0" Padding="0" Bold="true" Italic="false" />
                            </Appearance>
                        </ChartTitle>
                        <Legend>
                            <Appearance Visible="false" />
                        </Legend>
                        <PlotArea>
                            <Appearance></Appearance>
                            <Series>
                                <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>
                                </telerik:ColumnSeries>
                            </Series>
                            <XAxis DataLabelsField="Country" Color="#8f8686">
                                <MajorGridLines Color="#424040" Width="1" Visible="true"></MajorGridLines>
                                <MinorGridLines Color="#343333" Width="1" Visible="true"></MinorGridLines>
                            </XAxis>
                            <YAxis Color="#8f8686">
                                <LabelsAppearance DataFormatString="{0}" />
                                <MajorGridLines Color="#424040" Width="1" Visible="true"></MajorGridLines>
                                <MinorGridLines Color="#343333" Width="1" Visible="true"></MinorGridLines>
                            </YAxis>
                        </PlotArea>
         </telerik:RadHtmlChart>
    </div>
     
</asp:Content>

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
        System.Threading.Thread.Sleep(2000)
         
        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.PlotArea.Series(0).Name="Sites"
            RadHtmlChartAverageImageResolutionOfCountries.DataSource = GetAverageImageResolutionOfEntitiesSelectedParentTimeSpan("Sites", CountryRes, FromDateValue, ToDateValue)
            RadHtmlChartAverageImageResolutionOfCountries.DataBind()
         
        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?

1 Answer, 1 is accepted

Sort by
0
Maria Ilieva
Telerik team
answered on 02 Mar 2016, 03:15 PM
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.

Regards,
Maria Ilieva
Telerik
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
Tags
Ajax
Asked by
Nikos
Top achievements
Rank 1
Answers by
Maria Ilieva
Telerik team
Share this question
or