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

Prevent redraw after ajax request with target

3 Answers 135 Views
Chart (HTML5)
This is a migrated thread and some comments may be shown as answers.
Bastian
Top achievements
Rank 1
Bastian asked on 04 Feb 2016, 09:10 AM

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?

3 Answers, 1 is accepted

Sort by
0
Marin Bratanov
Telerik team
answered on 08 Feb 2016, 11:38 AM

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
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
0
Bastian
Top achievements
Rank 1
answered on 08 Feb 2016, 01:49 PM

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

0
Marin Bratanov
Telerik team
answered on 09 Feb 2016, 06:44 AM

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
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
Chart (HTML5)
Asked by
Bastian
Top achievements
Rank 1
Answers by
Marin Bratanov
Telerik team
Bastian
Top achievements
Rank 1
Share this question
or