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

RadAjaxLoadingPanel activated onClick do not work with master page

1 Answer 128 Views

Ajax

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

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>

<html xmlns="http://www.w3.org/1999/xhtml">

<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?

RadAjaxLoadingPanel activated onClick do not work with master page

1 Answer, 1 is accepted