RadPanelBar with dynamic User control

4 posts, 0 answers
  1. Somnath
    Somnath avatar
    43 posts
    Member since:
    Jun 2012

    Posted 13 Feb 2012 Link to this post

    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
  2. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 15 Feb 2012 Link to this post

    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
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Somnath
    Somnath avatar
    43 posts
    Member since:
    Jun 2012

    Posted 17 Feb 2012 Link to this post

    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
  5. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 22 Feb 2012 Link to this post

    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
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
Back to Top