Prevent redraw after ajax request with target

[Bastian]

Hello,

 

I'm having multiple charts on page. After changing the value of a dropdown list i want to refresh some (but not all!) charts on the page. I'm using ajaxRequestWithTarget to do this and the request is working properly. The "LoadingPanels" also appear correctly over the charts, I specified. But then all charts of the page are redrawn. This suggests that changing the dropdown does change the values of all charts, even though it does not. Thats why I would like to prevent the redraw.

 

Is there any way to do this?

[Marin Bratanov]

Hi Bastian,

What parts of the page update depends on the AJAX setup defined by the developer and what is the target of the request. I will try to provide a few examples:

• If you use RadAjaxManager and you have a setting that has all your charts in its UpdatedControls section, and a request is initiated by this setting's target, it is expected that all charts will be redrawn because they will all be disposed when the response comes back.
• If you have placed all your charts (or the entire page) in a RadAjaxPanel or an UpdatePanel it is, again, expected that all of them will be disposed.
• If you have individual asp:UpdatePanel controls around each chart and their UpdateMode==Conditional, you can call the server-side Update() method only for those whose content you need to see changed on the client-side. Note that this requires that you avoid wrapping them in other UpdatePanels or AjaxSettings. You will also needs to show LoadingPanels over them yourself or use the UpdateProgress control.

Regards,

Marin Bratanov
Telerik

[Bastian]

Hi Marin,

 I'm using RadAjaxManager  (RadAjaxManagerProxy) and I have the following settings:

<telerik:RadAjaxManagerProxy ID="RadAjaxManagerProxy" runat="server" EnableViewState="False" >
   <AjaxSettings>
      <telerik:AjaxSetting AjaxControlID="RbDropDown1">
         <UpdatedControls>
            <telerik:AjaxUpdatedControl ControlID="Chart1" LoadingPanelID="RadAjaxLoadingPanel" UpdatePanelHeight="100%"/>
            <telerik:AjaxUpdatedControl ControlID="Chart2" LoadingPanelID="RadAjaxLoadingPanel" UpdatePanelHeight="100%"/>
         </UpdatedControls>
      </telerik:AjaxSetting>
      <telerik:AjaxSetting AjaxControlID="RbDropDown2">
         <UpdatedControls>
            <telerik:AjaxUpdatedControl ControlID="Chart3" LoadingPanelID="RadAjaxLoadingPanel" UpdatePanelHeight="100%"/>
            <telerik:AjaxUpdatedControl ControlID="Chart4" LoadingPanelID="RadAjaxLoadingPanel" UpdatePanelHeight="100%"/>
         </UpdatedControls>
      </telerik:AjaxSetting>
   </AjaxSettings>
</telerik:RadAjaxManagerProxy>
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel" runat="server" Width="100%" Height="100%" />

No I'm doing an ajaxRequestWithTarget for 'RbDropDown1'. The loading panels appear correctly on top of "Chart1" and "Chart2", but after the loading panels disappear and the ajax request is finished, all charts (so also "Chart3" and "Chart4") are redrawn. (the redraw animation of the charts is shown) 

 

So even though the charts are not updated by the request, the redraw animation is shown.

 

Regards,

Bastian

[Marin Bratanov]

Hi Bastian,

Can you confirm you do not have any errors (either client-side, or server-side)?

Also, can you confirm you are using the name attribute (UniqueID server property) of the IPostBack control that you use to initiate the request, as shown here: http://docs.telerik.com/devtools/aspnet-ajax/controls/ajaxmanager/client-side-programming/overview#ajaxrequestwithtargeteventtarget-eventargument?

Note that the ajaxRequestWithTarget method is available for the RadAjaxManager control, so the AjaxSettings must be applied to its own instance, not to the proxy.

I will, once again, advise that you prepare asp:UpdatePanel controls with UpdateMode=Conditional in order to have granular control over the partial page rendering. You can add asp:Button controls with display:none to get easy access to their server-side Click events by using __doPostBack("<%=someHiddenButton.UniqueID%>","")

For all its worth, here is an example that will update charts two by two. You can use the Page_Load event to look into the Request["__EVENTTARGET"] field to check against the desired value when you click the button. OR, use the easier approach, handle the OnAjaxRequest of the AjaxManager and use its ajaxRequest() method.

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" EnableViewState="False">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="RbDropDown1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="Chart1" LoadingPanelID="RadAjaxLoadingPanel" UpdatePanelHeight="100%" />
                <telerik:AjaxUpdatedControl ControlID="Chart2" LoadingPanelID="RadAjaxLoadingPanel" UpdatePanelHeight="100%" />
            </UpdatedControls>
        </telerik:AjaxSetting>
        <telerik:AjaxSetting AjaxControlID="RbDropDown2">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="Chart3" LoadingPanelID="RadAjaxLoadingPanel" UpdatePanelHeight="100%" />
                <telerik:AjaxUpdatedControl ControlID="Chart4" LoadingPanelID="RadAjaxLoadingPanel" UpdatePanelHeight="100%" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel" runat="server" Width="100%" Height="100%" />
<telerik:RadDropDownList runat="server" ID="RbDropDown1" AutoPostBack="true">
    <Items>
        <telerik:DropDownListItem Text="one" />
        <telerik:DropDownListItem Text="two" />
    </Items>
</telerik:RadDropDownList>
<telerik:RadDropDownList runat="server" ID="RbDropDown2" AutoPostBack="true">
    <Items>
        <telerik:DropDownListItem Text="first" />
        <telerik:DropDownListItem Text="second" />
    </Items>
</telerik:RadDropDownList>
<asp:Button ID="Button1" Text="initiate request with target" OnClientClick="initiateRequest();

return false;" runat="server" />
<telerik:RadCodeBlock runat="server" ID="RadCodeBlock1">
    <script>
        function initiateRequest() {
            var ajaxManager = $find("<%= RadAjaxManager1.ClientID %>");
            ajaxManager.ajaxRequestWithTarget('<%= RbDropDown1.UniqueID %>', $find('<%=RbDropDown1.ClientID%>').get_selectedItem().get_text());
        }
    </script>
</telerik:RadCodeBlock>
<telerik:RadHtmlChart ID="Chart1" runat="server" Width="200px" Height="200px">
    <ChartTitle Text="Chart1"></ChartTitle>
    <PlotArea>
        <Series>
            <telerik:ColumnSeries>
                <SeriesItems>
                    <telerik:CategorySeriesItem Y="1" />
                    <telerik:CategorySeriesItem Y="1" />
                    <telerik:CategorySeriesItem Y="1" />
                </SeriesItems>
            </telerik:ColumnSeries>
        </Series>
    </PlotArea>
</telerik:RadHtmlChart>
<telerik:RadHtmlChart ID="Chart2" runat="server" Width="200px" Height="200px">
    <ChartTitle Text="Chart2"></ChartTitle>
    <PlotArea>
        <Series>
            <telerik:ColumnSeries>
                <SeriesItems>
                    <telerik:CategorySeriesItem Y="1" />
                    <telerik:CategorySeriesItem Y="1" />
                    <telerik:CategorySeriesItem Y="1" />
                </SeriesItems>
            </telerik:ColumnSeries>
        </Series>
    </PlotArea>
</telerik:RadHtmlChart>
<telerik:RadHtmlChart ID="Chart3" runat="server" Width="200px" Height="200px">
    <ChartTitle Text="Chart3"></ChartTitle>
    <PlotArea>
        <Series>
            <telerik:ColumnSeries>
                <SeriesItems>
                    <telerik:CategorySeriesItem Y="1" />
                    <telerik:CategorySeriesItem Y="1" />
                    <telerik:CategorySeriesItem Y="1" />
                </SeriesItems>
            </telerik:ColumnSeries>
        </Series>
    </PlotArea>
</telerik:RadHtmlChart>
<telerik:RadHtmlChart ID="Chart4" runat="server" Width="200px" Height="200px">
    <ChartTitle Text="Chart4"></ChartTitle>
    <PlotArea>
        <Series>
            <telerik:ColumnSeries>
                <SeriesItems>
                    <telerik:CategorySeriesItem Y="1" />
                    <telerik:CategorySeriesItem Y="1" />
                    <telerik:CategorySeriesItem Y="1" />
                </SeriesItems>
            </telerik:ColumnSeries>
        </Series>
    </PlotArea>
</telerik:RadHtmlChart>

Regards,

Marin Bratanov
Telerik