RadPanelBar with dynamic User control

[Somnath]

Hi,

I have one RadPanelBar on my page. My requirement is to add or remove RadPaneItem dynamically on check change of one checkboxlist. There is a User control with multiple radgrids to load inside every RadPanelItem. Check chenge of checkboxlist will be handled at client side and there will be an ajax call to add RadPanelItem with Usercontrol inside. Now my problem is I am unable to add Ajax response of new RadPanelItem in RadPanelBar. 

I am working on version: Asp.Net Ajax Q3 2011
Telerik.Web.UI Version 2011.3.1115.40
Runtime version v4.0.30319
Asp.net 4.0

Please find attached image and code for batter understanding.

Regards,
Ankit

[Kate]

Hi Ankit,

I noticed that you also opened a support ticket that I have already answered. In case someone else needs similar information here are the links that I pasted in my answer:

    http://www.telerik.com/help/aspnet-ajax/ajax-load-user-controls.html
    www.telerik.com/help/aspnet-ajax/ajax-client-side-api.html
    http://www.telerik.com/help/aspnet-ajax/ajax-ajaxpanel.html

Greetings,
Kate
the Telerik team

[Somnath]

Hi Kate,

Thanks for your reply. As I go through the provided links I have changed my approach and now I am binding RadPanelItems on a server side event while using RadAjaxManager. It is also up to my requirement of dynamic addition of RadPaneItem. What I did is I created one RadPanelBar on aspx with one itemTeplate and I am adding RadPanelItems on selectedIndexChange event of a checkboxlist. I have followed these two links for the same:
http://www.telerik.com/help/aspnet-ajax/panelbar-templates-overview.html 
http://www.telerik.com/community/forums/aspnet-ajax/panelbar/rad-paner-bar-items-moves-one-step-down-for-every-ajaxrequest-in-ie9.aspx#1754874 

Now my problem is, when the first radpanelItem is added it looks fine with perfect design. But afterwords each postback is adding a radpanelitem(which is normal requirement) and  a child iitem on previously added radpanelItem as well. Hance after 3 selections UI will show 3 radpanelitems. First two of them will have repeated itemtemplate. 

Please have a look at bellow code and attached images for batter understanding.

CS code:

public partial class Default2 : System.Web.UI.Page

{

    protected void Page_Load(object sender, EventArgs e)

    {         

    }

     protected void chklstSupervisor_OnSelectedIndexChanged(object sender, EventArgs e)

    {

         var motherDiv = new HtmlGenericControl("div");

        TemplateItem template = new TemplateItem(motherDiv);     

        RadPanelItem item4 = new RadPanelItem();

        item4.Text = "Item 1 omload";

        item4.ItemTemplate = template; 

        RadPanelItem item44 = new RadPanelItem();

        item4.Items.Add(item44); 

        RadPanelBar1.Items.Add(item4);       

    }

 }

     public class TemplateItem:ITemplate

    {

        Control control;

        #region ITemplate Members

         public void InstantiateIn(Control container)

        {

            container.Controls.Add(control);

        }

         #endregion

         public TemplateItem(Control ctrl)

        {

            control = ctrl;

        }

    }

Aspx Code:

<form id="form1" runat="server">
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" >
       <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="chklstSupervisor">
               <UpdatedControls>
                   <telerik:AjaxUpdatedControl ControlID="RadPanelBar1" />
               </UpdatedControls>
           </telerik:AjaxSetting>
       </AjaxSettings>
   </telerik:RadAjaxManager>

   <table width="99%">
       <tr>
           <td>
               <fieldset style="width: 98%; border-color: Silver; border-width: thin;">
                   <asp:CheckBoxList ID="chklstSupervisor" runat="server" RepeatDirection="Horizontal"
                       AutoPostBack="true" OnSelectedIndexChanged="chklstSupervisor_OnSelectedIndexChanged">
                       <asp:ListItem Text="sp1"></asp:ListItem>
                       <asp:ListItem Text="sp2"></asp:ListItem>
                       <asp:ListItem Text="sp3"></asp:ListItem>
                   </asp:CheckBoxList>
               </fieldset>
           </td>
       </tr>
       <tr>
           <td>
           <telerik:RadScriptManager ID="ScriptManager1" runat="server"></telerik:RadScriptManager>
               <Telerik:RadPanelBar ID="RadPanelBar1" runat="server" Skin="Telerik">
                   <ItemTemplate>
                       <div class="module" style="width: 100%; float: left">
                           <dl>
                               <dt>Name:</dt>
                               <dd>
                                   <asp:TextBox ID="Name" runat="server" Width="140px" />
                               </dd>
                               <dt>Address:</dt>
                               <dd>
                                   <asp:TextBox TextMode="MultiLine" Columns="20" Rows="3" ID="Address" runat="server"
                                       Width="140px" />
                               </dd>
                               <dt>Phone:</dt>
                               <dd>
                                   <asp:TextBox ID="Phone" runat="server" />
                               </dd>
                           </dl>
                       </div>
                   </ItemTemplate>
               </Telerik:RadPanelBar>
           </td>
       </tr>
   </table>
   </form>

Thanks and regards,
Ankit

[Kate]

Hi Ankit,

As explained in the ticket:

Using ItemTemplates in both paces (the markup and code behind) - the template you created in the markup will be a global one - means that it will be applied to all items. However, since you create another template in code behind, the latest will overwrite the global one and be applied instead. This is explained here. Considering the fact that you get two global templates in an item it is an expected behavior having the current logic of your code (you add both a root item and a child item which will render two templates in a single item).

Greetings,
Kate
the Telerik team