Ajaxifying Nested Listview

[Stephen]

Using this Demo, with a listview nested within another listview, I am attempting to ajaxify the controls with a tabstrip above (Clicking tab buttons refreshes the listview with different data). I've tried and tried, but i cannot get the settings right for ajaxing with an ajax manager. If I place the tapstrip and listviews in an ajax panel, it works perfectly, but I'd prefer not to use an ajax panel (it can reduce performance, correct?).

What is the proper way to ajaxify the tapstrip and listviews with ajax manager?

[Iana Tsolova]

Hello Stephen,

To achieve your goal, you can try adding the ajax settings dynamically. For instance on the outer RadListView PreRender event, you can loop throuth its items, find there the controls you need to ajaxify and add the setting as described here.
Another option is to add a RadAjaxManagerProxy control in the outer RadListView ItemTemplate, and there add the ajax settings for ajaxifying the controls in the ItemTemplate declaratively.

Let me know if this helps.

Best wishes,
Iana
the Telerik team

[bradley baker]

Im trying to ajaxify some buttons in a nested listview as well and I want to use the proxy method but it doesnt seem to work

code is below:   Ideas?

<!-- Custom -->
                            <telerik:RadListView ID="RadListViewOuter" runat="server" DataSourceID="SQL_Encounter_Zones_Dates" DataKeyNames="hashid">
                                <ItemTemplate>
                                    <telerik:RadAjaxManagerProxy ID="RadAjaxManagerProxy1" runat="server">
                                        <AjaxSettings>
                                            <telerik:AjaxSetting AjaxControlID="EncButton">
                                                <UpdatedControls>
                                                    <telerik:AjaxUpdatedControl ControlID="PlayersGrid" LoadingPanelID="RadAjaxLoadingPanel2" />
                                                    <telerik:AjaxUpdatedControl ControlID="PlayersEncounterListBox" LoadingPanelID="RadAjaxLoadingPanel2" />
                                                    <telerik:AjaxUpdatedControl ControlID="TypeEncounterListBox" LoadingPanelID="RadAjaxLoadingPanel2" />
                                                    <telerik:AjaxUpdatedControl ControlID="PlayerChart" LoadingPanelID="RadAjaxLoadingPanel2" />
                                                    <telerik:AjaxUpdatedControl ControlID="DamageTypeGrid" LoadingPanelID="RadAjaxLoadingPanel2" />
                                                    <telerik:AjaxUpdatedControl ControlID="DamageHealTimeChart" LoadingPanelID="RadAjaxLoadingPanel2" />
                                                </UpdatedControls>
                                            </telerik:AjaxSetting>
                                        </AjaxSettings>
                                    </telerik:RadAjaxManagerProxy>
                                    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel2" runat="server" Skin="Metro" IsSticky="True" Overlay="True"></telerik:RadAjaxLoadingPanel>
                                    <li>
                                        <a href="javascript:;">
                                            <i class="fa fa-cogs"></i>
                                            <span class="badge badge-info">
                                                <asp:Label runat="server" ID="ITAVGDPS" Text='<%# Eval("avgdps")%>' />
                                            </span>
                                            <asp:Label CssClass="title" runat="server" ID="ZoneDateITLabel" Text='<%# Eval("zone") + " :: " + Eval("datetimeenc", "{0:MM/dd/yy hh:mm}")%>' />
                                            <span class="arrow"></span>
                                        </a>
                                        <ul class="sub-menu">
                                            <telerik:RadListView ID="RadListViewInner" runat="server">
                                                <ItemTemplate>
                                                    <li>
                                                        <asp:LinkButton ID="EncButton" runat="server" OnCommand="EncButton_Click" CommandArgument='<%# Eval("encid")%>'>
                                                            <span class="badge badge-info">
                                                                <asp:Label runat="server" ID="RDDPS" Text='<%# Eval("rddps")%>' />
                                                            </span>
                                                            <asp:Label runat="server" ID="Title" Text='<%# Eval("title") + " :: " + Eval("endtime", "{0:hh:mm}")%>' />
                                                        </asp:LinkButton></li>
                                                </ItemTemplate>
                                                <AlternatingItemTemplate>
                                                    <li>
                                                        <asp:LinkButton ID="EncButton" runat="server" OnCommand="EncButton_Click" CommandArgument='<%# Eval("encid")%>'>
                                                            <span class="badge badge-default">
                                                                <asp:Label runat="server" ID="RDDPS" Text='<%# Eval("rddps")%>' />
                                                            </span>
                                                            <asp:Label runat="server" ID="Title" Text='<%# Eval("title") + " :: " + Eval("endtime", "{0:hh:mm}")%>' />
                                                        </asp:LinkButton></li>
                                                </AlternatingItemTemplate>
                                            </telerik:RadListView>
                                        </ul>
                                    </li>
                                </ItemTemplate>
                                <AlternatingItemTemplate>
                                    <li>
                                        <a href="javascript:;">
                                            <i class="fa fa-cogs"></i>
                                            <span class="badge badge-default">
                                                <asp:Label runat="server" ID="ITAVGDPS" Text='<%# Eval("avgdps")%>' />
                                            </span>
                                            <asp:Label CssClass="title" runat="server" ID="ZoneDateITLabel" Text='<%# Eval("zone") + " :: " + Eval("datetimeenc", "{0:MM/dd/yy hh:mm}")%>' />
                                            <span class="arrow"></span>
                                        </a>
                                        <ul class="sub-menu">
                                            <telerik:RadListView ID="RadListViewInner" runat="server">
                                                <ItemTemplate>
                                                    <li>
                                                        <asp:LinkButton ID="EncButton" runat="server" OnCommand="EncButton_Click" CommandArgument='<%# Eval("encid")%>'>
                                                            <span class="badge badge-info">
                                                                <asp:Label runat="server" ID="RDDPS" Text='<%# Eval("rddps")%>' />
                                                            </span>
                                                            <asp:Label runat="server" ID="Title" Text='<%# Eval("title") + " :: " + Eval("endtime", "{0:hh:mm}")%>' />
                                                        </asp:LinkButton></li>
                                                </ItemTemplate>
                                                <AlternatingItemTemplate>
                                                    <li>
                                                        <asp:LinkButton ID="EncButton" runat="server" OnCommand="EncButton_Click" CommandArgument='<%# Eval("encid")%>'>
                                                            <span class="badge badge-default">
                                                                <asp:Label runat="server" ID="RDDPS" Text='<%# Eval("rddps")%>' />
                                                            </span>
                                                            <asp:Label runat="server" ID="Title" Text='<%# Eval("title") + " :: " + Eval("endtime", "{0:hh:mm}")%>' />
                                                        </asp:LinkButton></li>
                                                </AlternatingItemTemplate>
                                            </telerik:RadListView>
                                        </ul>
                                    </li>
                                </AlternatingItemTemplate>
                            </telerik:RadListView>
                            <!-- End Custom -->
                            <li></li>
                    </ul>
                    <!-- END SIDEBAR MENU -->
                </div>
            </div>

[Maria Ilieva]

Hi Bradley,

As my colleague has previously suggested, in order to ajaxify nested ListView items you should handle the server ItemCreated event of the parent ListView loop through the mentioned items and add dynamic Ajax settings for them.
Similar approach for RadGrid control is presented int he online demo below
http://demos.telerik.com/aspnet-ajax/ajax/examples/manager/partialajaxification/defaultcs.aspx

I hope this helps.

Regards,
Maria Ilieva
Telerik

[bradley baker]

Odd I guess you didnt read the section called, seems like that would be easier than having to do it in the code behind especially when I need the button to update multiple controls.

Another option is to add a RadAjaxManagerProxy control in the outer RadListView ItemTemplate, and there add the ajax settings for ajaxifying the controls in the ItemTemplate declaratively.

[bradley baker]

I set the pre render to fire on the outer and inner listview but I can not find the button or the "Inner" list view on either event

Protected Sub RadListView_PreRender(ByVal sender As Object, ByVal e As EventArgs)
        Dim RadList As RadListView = Me.FindControl("RadListViewOuter")
        Dim RadList2 As RadListView = RadList.FindControl("RadListViewInner")

        For Each Item As RadListViewDataItem In RadList.Items
            Dim btn As LinkButton = TryCast(Item.FindControl("EncButton"), LinkButton)
            RadAjaxManager1.AjaxSettings.AddAjaxSetting(btn, RadGrid1, RadAjaxLoadingPanel2)
        Next

        '<telerik:AjaxUpdatedControl ControlID="PlayersGrid" LoadingPanelID="RadAjaxLoadingPanel1" />
        '                <telerik:AjaxUpdatedControl ControlID="PlayersEncounterListBox" LoadingPanelID="RadAjaxLoadingPanel1" />
        '                <telerik:AjaxUpdatedControl ControlID="TypeEncounterListBox" LoadingPanelID="RadAjaxLoadingPanel1" />
        '                <telerik:AjaxUpdatedControl ControlID="PlayerChart" LoadingPanelID="RadAjaxLoadingPanel1" />
        '                <telerik:AjaxUpdatedControl ControlID="DamageTypeGrid" LoadingPanelID="RadAjaxLoadingPanel1" />
        '                <telerik:AjaxUpdatedControl ControlID="DamageHealTimeChart" LoadingPanelID="RadAjaxLoadingPanel1" />
    End Sub

[bradley baker]

Dim RadList As RadListView = Me.FindControl("RadListViewOuter")
       Dim RadList2 As RadListView

       For Each Item As RadListViewDataItem In RadList.Items
           RadList2 = Item.FindControl("RadListViewInner")
           For Each Item2 As RadListViewDataItem In RadList2.Items
               Dim btn As LinkButton = TryCast(Item2.FindControl("EncButton"), LinkButton)
               RadAjaxManager1.AjaxSettings.AddAjaxSetting(btn, RadGrid1, RadAjaxLoadingPanel2)
           Next
       Next

Above is the fix

[Maria Ilieva]

Hi Bradley,

I'm glad to hear that adding programmatic setting for the RadListView control works properly on your end. Do let us know if further assistance is needed or if additional questions arise.

Regards,
Maria Ilieva
Telerik