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

RadAjaxManager with nested updated areas

19 Answers 635 Views

Ajax

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

Gavin Pollock asked on 28 Apr 2009, 12:33 PM

Hi there,

I have a scenario I'm trying to make more efficient, and although it is all working correctly, I am noticing something I just wanted to check.

On a page I have a large area which is a dynamically loaded user control which acts as a form. dvPageDetail. It adds itself as an ajaxified area programmatically like such:

manager.AjaxSettings.AddAjaxSetting(

this.dvPageDetail, this.dvPageDetail, LoadingPanel);

Within this area, there is a RadEditor, a bunch of other controls, and a heirarchical dropdown RadComboBox control (1st dropdown updates the list available in the second). The heirarchical dropdown also uses AddAjaxSettings to get the 1st to ComboBox to update the items in the 2nd.

oAjax.AjaxSettings.AddAjaxSetting(cmbContent, cmbSubContent, LdingPnl1);

When you select an item in the 1st combobox, a loading panel appears just over the 2nd dropdown box and its items are updated correctly. However I also notice that the Editor itself (outside of the heirarchical dropdown, but in dvPageDetail) also re-renders itself after the Ajax postback completes.

So the question is, is this happening unnecessarily and is there a way to contain what occurs in terms of re-rendering when the heirarchical dropdown control fires an Ajax postback. Or is the event bubbling up through and all of dvPageDetail is being re-rendered as well and there is no way to avoid this?

Thanks
Gavin

Within FormControl

19 Answers, 1 is accepted

Accepted

answered on 01 May 2009, 08:53 AM

Hello Gavin,

The observed behavior is expected and here is why - RadAjaxManager uses internally UpdatePanels to ajaxify controls. UpdatePanels have a property called ChildrenAsTriggers, which determines whether postbacks from their child controls will cause them to update their content. By default the value of this property is True.

When using RadAjaxManager, you can set ChildrenAsTriggers for a given update panel to false programmatically. Here is an example:

    
            <%@ Page Language="C#" %> 
        
            <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
        
            <script runat="server"> 
        
                protected void Button_Click(object sender, EventArgs e) 
        
                { 
        
                    Label1.Text = Label2.Text = DateTime.Now.ToLongTimeString(); 
        
                } 
        
                protected void RadAjaxManager1_AjaxSettingCreated(object sender, AjaxSettingCreatedEventArgs e) 
        
                { 
        
                    if (e.Initiator.ID == "Button1") 
        
                    { 
        
                        e.UpdatePanel.ChildrenAsTriggers = false; 
        
                    } 
        
                } 
        
            </script> 
        
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
        
            <html xmlns="http://www.w3.org/1999/xhtml"> 
        
            <head runat="server"> 
        
            <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
        
            <title>RadControls for ASP.NET AJAX</title> 
        
            </head> 
        
            <body> 
        
            <form id="form1" runat="server"> 
        
            <asp:ScriptManager ID="ScriptManager1" runat="server" /> 
        
            <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Transparency="50" BackColor="Yellow" /> 
        
            <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1" 
        
                OnAjaxSettingCreated="RadAjaxManager1_AjaxSettingCreated"> 
        
                <AjaxSettings> 
        
                    <telerik:AjaxSetting AjaxControlID="Button1"> 
        
                        <UpdatedControls> 
        
                            <telerik:AjaxUpdatedControl ControlID="Panel1" /> 
        
                        </UpdatedControls> 
        
                    </telerik:AjaxSetting> 
        
                    <telerik:AjaxSetting AjaxControlID="Button2"> 
        
                        <UpdatedControls> 
        
                            <telerik:AjaxUpdatedControl ControlID="Panel2" /> 
        
                        </UpdatedControls> 
        
                    </telerik:AjaxSetting> 
        
                </AjaxSettings> 
        
            </telerik:RadAjaxManager> 
        
            <asp:Button ID="Button1" runat="server" Text="Button 1 updates Panel 1" OnClick="Button_Click" /> 
        
            <asp:Panel ID="Panel1" runat="server" style="border:1px solid blue;padding:20px"> 
        
                Panel1<br /> 
        
                <asp:Label ID="Label1" runat="server" Text="DateTime.Now" /> 
        
                <br /><br /> 
        
                <asp:Button ID="Button2" runat="server" Text="Button 2 updates Panel 2" OnClick="Button_Click" /> 
        
                <asp:Panel ID="Panel2" runat="server" style="border:1px solid blue;padding:20px"> 
        
                    Panel 2<br /> 
        
                    <asp:Label ID="Label2" runat="server" Text="DateTime.Now" /> 
        
                </asp:Panel> 
        
            </asp:Panel> 
        
            </form> 
        
            </body> 
        
            </html>

Sincerely yours,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

answered on 20 Jan 2014, 04:11 PM

hallo,
I have a near identical issue in a bit more complex scenario. I tryed the solution you proposed, but didn't seem to be able to sort it out.
My control chain is:

Master Page (wIth Ajax Manager) > Content Page (with Ajax Manager Proxy) > RadGrid > NestedViewTemplate > Asp:Panel (useless at the moment) > RadMultipage > UserControl (with Ajax Manager Proxy)

Now inside this user control I have form-like inputs (without FormView, just divs, dropdowns and RadTextBoxes and such).
What I want is to be able to use the Ajax Manager Proxy inside this User Control, without having the whole page to update.

Sinche in the content page I have:

<telerik:RadAjaxManagerProxy ID="RadAjaxManagerProxy1" runat="server">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="RadGrid1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManagerProxy>

Even if in my User Control I have something like

<telerik:RadAjaxManagerProxy ID="RadAjaxManagerProxy1" runat="server">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="Subscription">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="FormAjaxContainer1" LoadingPanelID="RadAjaxLoadingPanel1" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManagerProxy>

The whole content page is refreshed which is not what I want. I would like to be able to Ajaxify form controls inside my User Control.

I tryied with this in the content page code behind (following your suggestions above) but with no luck... full page si always updated:

Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load

Dim manager As RadAjaxManager = RadAjaxManager.GetCurrent(Page)

AddHandler manager.AjaxSettingCreated, AddressOf RadAjaxManager1_AjaxSettingCreated

End Sub

Protected Sub RadAjaxManager1_AjaxSettingCreated(sender As Object, e As AjaxSettingCreatedEventArgs)

If e.Initiator.ID = RadGrid1.UniqueID Then

e.UpdatePanel.ChildrenAsTriggers = False

End If

End Sub

Any hint on how to avoid the ajax manager (and automatically created panels) inside my User Control propagating to the whole RadGrid?

Thanks in advance

answered on 21 Jan 2014, 06:47 AM

Hi Massimiliano,

Please have a look into the sample code snippet which works fine at my end.

MasterPage :

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">

</telerik:RadAjaxManager>

Content Page :

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">

<telerik:RadAjaxManagerProxy ID="RadAjaxManagerProxy1" runat="server">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="RadGrid1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadGrid1" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManagerProxy>

<telerik:RadGrid ID="RadGrid1" DataSourceID="SqlDataSource1" runat="server" AutoGenerateColumns="False"

OnItemCreated="RadGrid1_ItemCreated" OnPreRender="RadGrid1_PreRender" OnItemCommand="RadGrid1_ItemCommand">

<MasterTableView DataSourceID="SqlDataSource1" DataKeyNames="EmployeeID">

<NestedViewTemplate>

<asp:Panel runat="server" ID="InnerContainer" CssClass="viewWrap" Visible="false">

<telerik:RadTabStrip runat="server" ID="TabStip1" MultiPageID="Multipage1">

<Tabs>

<telerik:RadTab runat="server" Text="Tab1" PageViewID="PageView1">

</telerik:RadTab>

</Tabs>

</telerik:RadTabStrip>

<telerik:RadMultiPage runat="server" ID="Multipage1">

<telerik:RadPageView runat="server" ID="PageView1">

<uc1:gridContentuser ID="gridContentuser1" runat="server" />

</telerik:RadPageView>

</telerik:RadMultiPage>

</asp:Panel>

</NestedViewTemplate>

<Columns>

<telerik:GridBoundColumn SortExpression="FirstName" HeaderText="First Name" HeaderButtonType="TextButton"

DataField="FirstName" UniqueName="FirstName">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn SortExpression="LastName" HeaderText="Last Name" HeaderButtonType="TextButton"

DataField="LastName" UniqueName="LastName">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn SortExpression="Title" HeaderText="Title" HeaderButtonType="TextButton"

DataField="Title" UniqueName="Title">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn SortExpression="BirthDate" DataFormatString="{0:MM/dd/yyyy}"

HeaderText="Birth Date" HeaderButtonType="TextButton" DataField="BirthDate" UniqueName="BirthDate">

</telerik:GridBoundColumn>

</Columns>

</MasterTableView>

</telerik:RadGrid>

<asp:SqlDataSource ID="SqlDataSource1" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"

ProviderName="System.Data.SqlClient" SelectCommand="SELECT top 5 * FROM Employees"

runat="server"></asp:SqlDataSource>

</asp:Content>

Content Page VB:

Protected Sub RadGrid1_PreRender(sender As Object, e As EventArgs)

If Not Page.IsPostBack Then

RadGrid1.MasterTableView.Items(0).Expanded = True

RadGrid1.MasterTableView.Items(0).ChildItem.FindControl("InnerContainer").Visible = True

End If

End

Sub

Protected Sub RadGrid1_ItemCommand(source As Object, e As GridCommandEventArgs)

If e.CommandName = RadGrid.ExpandCollapseCommandName AndAlso TypeOf e.Item Is GridDataItem Then

DirectCast(e.Item, GridDataItem).ChildItem.FindControl("InnerContainer").Visible = Not e.Item.Expanded

End If

End Sub

Protected Sub RadGrid1_ItemCreated(sender As Object, e As GridItemEventArgs)

If TypeOf e.Item Is GridNestedViewItem Then

e.Item.FindControl("InnerContainer").Visible = DirectCast(e.Item, GridNestedViewItem).ParentItem.Expanded

End If

End Sub

UserControl Page:

<telerik:RadAjaxManagerProxy ID="RadAjaxManagerProxy2" runat="server">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="DropDownList1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadTextBox1" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManagerProxy>

<telerik:RadTextBox ID="RadTextBox1" runat="server">

</telerik:RadTextBox>

<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="true" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">

<asp:ListItem Text="Item1">

</asp:ListItem>

<asp:ListItem Text="Item2">

</asp:ListItem>

<asp:ListItem Text="Item3">

</asp:ListItem>

</asp:DropDownList>

UserControl Page VB:

Protected Sub DropDownList1_SelectedIndexChanged(sender As Object, e As EventArgs)

RadTextBox1.Text = DropDownList1.SelectedItem.Text

End Sub

Thanks,
Shinu.

answered on 22 Jan 2014, 04:38 PM

I checked with the panel visibility set to false by default but experienced the same issue, so upon further investigation it seems that it's not the whole grid refreshing (you were right that this behaviour is by default) it's all the user controls inside the multipage refreshing just like if the ajax manager proxy inside one of the user controls triggers a refresh up in the control chain (like in the nestedviewtemplate or multipage?).
So in your example it's like if the DropDownList1 when changed will refresh the whole user control and also all the user controls in the pages of the multipage.

My tabstrip+multipage config

<NestedViewTemplate>

<asp:Panel runat="server" ID="RadGrid1DetailContainer" CssClass="RadGridDetailContainer" Visible="false">

<telerik:RadTabStrip runat="server" ID="RadGrid1DetailTabStrip" MultiPageID="RadGrid1DetailMultipage" SelectedIndex="0" CssClass="RadGridTabStrip" CausesValidation="true">

<Tabs>

<telerik:RadTab runat="server" Text="Dati utente" ImageUrl="~/img/icons/user.png" PageViewID="RadGrid1DetailRadPageView1">

</telerik:RadTab>

<telerik:RadTab runat="server" Text="Anagrafica" ImageUrl="~/img/icons/profile.png" PageViewID="RadGrid1DetailRadPageView2">

</telerik:RadTab>

<telerik:RadTab runat="server" Text="Permessi" ImageUrl="~/img/icons/chart_organisation.png" PageViewID="RadGrid1DetailRadPageView3">

</telerik:RadTab>

</Tabs>

</telerik:RadTabStrip>

<telerik:RadMultiPage runat="server" ID="RadGrid1DetailMultipage" SelectedIndex="0" RenderSelectedPageOnly="false">

<telerik:RadPageView runat="server" ID="RadGrid1DetailRadPageView1" CssClass="RadGridPageView">

<eva:EvaUserForm runat="server" ID="EvaUserForm1" />

</telerik:RadPageView>

<telerik:RadPageView runat="server" ID="RadGrid1DetailRadPageView2" CssClass="RadGridPageView">

<eva:EvaProfileForm runat="server" ID="EvaProfileForm1" />

</telerik:RadPageView>

<telerik:RadPageView runat="server" ID="RadGrid1DetailRadPageView3" CssClass="RadGridPageView">

<eva:UserPermissions runat="server" ID="UserPermissions1" UserId="<%#: Item.UserId %>" UserName="<%#: Item.UserName %>" />

</telerik:RadPageView>

</telerik:RadMultiPage>

</asp:Panel>

</NestedViewTemplate>

As a side note, before I had a FormView in my user control as a wrapper, with ajax manager proxy defined in each of the templates (EditItemTemplate, InsertItemTemplate) and it was working as intended so that only the referenced controls where refreshed and not the whole multipage. I had to remove it because it introduced other issues and added a layer of complexity.

Any hint?

Another curiosity on the approach with "InnerContainer" panel wrapping the multipage. What is this useful for?
Also let's say I want to collapse all the other rows when expaning one row ho can I set back that panel visibility to false.
I have something like this to collapse all the other rows in CommandEvent (when a user expands a row or on other custom commands)

If TypeOf (e.Item) Is GridDataItem Then

' Collapse all other opened details

For Each item As GridItem In e.Item.OwnerTableView.Items

If item.Expanded AndAlso Not item Is e.Item Then

' Collapse item

item.Expanded = False

'item.ChildItem.FindControl(grid.ID & "DetailContainer").Visible = Not e.Item.Expanded

End If

Next item

End If

The commented row won't work since this is a GridItem and not a GridDataItem... How to I access the GridDataItem for that GridItem? :)
EDIT(solved): About this last question I guess I just have to set the item.Expanded to false and then use the following code snipped in ItemCreated event, since ItemCommand fires first than ItemCreated. This will take care of rendering invisible all the panels inside collapsed rows.

If TypeOf e.Item Is GridNestedViewItem Then

e.Item.FindControl(grid.ID & "DetailContainer").Visible = DirectCast(e.Item, GridNestedViewItem).ParentItem.Expanded

End If

Thanks in advance for your contribution!

Ps. I had some email contacts with Mahesh he's really a kind person and you are the best group imho.

answered on 27 Jan 2014, 03:03 PM

Hi Massimiliano,

As the scenario you are implementing appears to be rather complex it would be best if we have an option to test it locally. Therefore could I kindly ask you to open a regular support ticket and send us runnable version of your application as well as exact description of the required functionality? Thus we will be able to debug it locally and advise you further.

Regards,
Maria Ilieva
Telerik

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the UI for ASP.NET AJAX, subscribe to the blog feed now.

answered on 30 Jan 2014, 11:18 AM

Hello Massimiliano,

In case you need to have the whole RadGrid control perform Ajax and not only the NestedViewTemplate the whole Grid should be ajaxified which will cause the inner control to also perform Ajax. In case you need only the UserControl placed in a PageView in the NestedViewTemplate the whole RadMultiPage should be updated. This could be done by adding programmatic settings for the nested MultiPage in the RadGrid ItemCreated event. See the demo below;

http://demos.telerik.com/aspnet-ajax/ajax/examples/manager/partialajaxification/defaultcs.aspx

Regards,
Maria Ilieva
Telerik

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the UI for ASP.NET AJAX, subscribe to the blog feed now.

answered on 11 Feb 2014, 02:57 PM

Hello Massimiliano,

I'm afraid that after adding the whole RadGrid control to update itself when and inner control initiate an Ajax request the response will include the whole RadGrid contain in the response base on the updated control which is the whole RadGrid. Thus behavior could not be avoid with the current RadAjax implementation.

Regards,
Maria Ilieva
Telerik

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the UI for ASP.NET AJAX, subscribe to the blog feed now.

answered on 19 Feb 2014, 02:30 PM

In this topic (first 2-3 posts here) Dimo (Telerik Admin) proposed this solution which seemed to work for the user:

<script runat="server">

protected void Button_Click(object sender, EventArgs e)

{

Label1.Text = Label2.Text = DateTime.Now.ToLongTimeString();

}

protected void RadAjaxManager1_AjaxSettingCreated(object sender, AjaxSettingCreatedEventArgs e)

{

if (e.Initiator.ID == "Button1")

{

e.UpdatePanel.ChildrenAsTriggers = false;

}

</script>

and this seem to have worked for the user but it's not working for me I don't know why. About this solution I would like to try (and it would be really the best option) to apply it to the multipage inside the nestedview template, so that my usercontrols inside the multipage will stop ajax propagation at the multipage level. Any hint on how to obtain this?

answered on 19 Feb 2014, 03:24 PM

Upon further investigation I think that this solution is not working for me because (from Microsoft reference):
"Gets or sets a value that indicates whether postbacks from immediate child controls of an UpdatePanel control update the panel's content."
But I guess che a controls inside > usercontrol > multipage > panel > nestedviewtemplate > radgrid cannot be considered an immediate child of the radgrid. This makes things even more odd because I wonder why then is all submitted?

Now the firs thing that comes to my mind is that the nestedviewtemplate item OR the multipage are creating another UpdatePanel implicitly (are they?). If this is the case is there I have to change it to prevent the children triggers

answered on 19 Feb 2014, 07:02 PM

Just to let you better understand what I'm trying to do, I'm trying to extend your demo here:
http://demos.telerik.com/aspnet-ajax/grid/examples/hierarchy/hierarchy-with-templates/defaultcs.aspx
With editing functionalities inside the pages in the multipage so that you can view details and if you want you can switch to edit/insert them
It should be a "straightforward" scenario but the problem described above surfaces when you want to ajaxify something inside the multipage.

PS. sorry for double posting but the "edit" option disappeared from the forum it seems :(

answered on 24 Feb 2014, 03:20 PM

Hi Massimiliano,

As the scenario you are implementing appear to be a complex one and the requirements you have could not be easily implement , could I kindly ask you to open a regular support ticket and provide us isolated runnable version of your application as well as the exact requirement you have? Thus we will have the option to review your case and apply the needed modifications to cover the required functionality.

Regards,
Maria Ilieva
Telerik

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the UI for ASP.NET AJAX, subscribe to the blog feed now.

answered on 26 Feb 2019, 12:31 AM

Hi @Dimo, I know its an old post but I am having issues with nested controls as well that this solution you provided doesn't work for.

Because I have several user controls I have to use a RadAjaxManagerProxy in each one. With a single RadAjaxManager only on the default/mater page that loads the controls in questions

I have two user controls, A and B. Both use a RadGrid within them, both use RadAjaxManagerProxy each with different IDs and both contain a single RadAjaxLoadingPanel each with different IDs mapped .

A uses B in a NestedViewTemplate.

A control used used for one type of user logged in while B is used for another type.

B does not use NestViewTemplate.

A's RadAjaxLoadingPanel works find on it but B has no RadAjaxLoadingPanel displayed at all.

B's RadAjaxLoadingPanel works find when its not inside the NestedViewTemplate, making me think its setup correctly.

The only issue is when B is nested and when you do the same actions on it it does not display any loading panel, when its not being nested it does display the loading panel.