loading a listbox dynamically with radiobuttons

5 posts, 0 answers
  1. newbie
    newbie avatar
    355 posts
    Member since:
    Feb 2008

    Posted 20 Jul 2010 Link to this post

    I want to create a listbox dynamically and I want to put radiobuttons and Checkboxes in the listbox.
    I want the listbox to be something like this:

    <telerik:RadListBox runat="server" ID="RadListBox">
      <ItemTemplate>
         <table>
            <tr>
               <td>
                  <asp:CheckBox ID="CheckBox1" runat="server" onclick="stopPropagation(event, this);" />
               </td>
               <td>
                   <asp:RadioButton ID="RadioButton1" runat="server" GroupName="Type" onclick="SetUniqueRadioButton();" />
               </td>
               <td>
                    <%# DataBinder.Eval(Container.DataItem,"FullName") %>
               </td>
             </tr>
           </table>
        </ItemTemplate>
     </telerik:RadListBox>

    I was having trouble creating a listbox dynamically with the item template as desired. Could you tell me how to create the control in the required manner from the code.
  2. newbie
    newbie avatar
    355 posts
    Member since:
    Feb 2008

    Posted 26 Jul 2010 Link to this post

    Hi telerik Team,

    Could you please help me with this issue.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. newbie
    newbie avatar
    355 posts
    Member since:
    Feb 2008

    Posted 26 Jul 2010 Link to this post

    After struggling with the control for a while I was able to create the control dynamically. this is the functionality i am using:

    RadListBox listBoxParticipants = new RadListBox();
                    listBoxParticipants.ID = "RadListBoxParticipants";
                    listBoxParticipants.ItemDataBound += new RadListBoxItemEventHandler(listBoxParticipants_ItemDataBound);
                    listBoxParticipants.SelectedIndexChanged += new EventHandler(listBoxParticipants_SelectedIndexChanged);
                    listBoxParticipants.Width = Unit.Pixel(300);
                    listBoxParticipants.ItemTemplate = new ItemTemplate();
    The class :
    class ItemTemplate : ITemplate
        {        
      
            public void InstantiateIn(Control container)
            {
                CheckBox checkBox = new CheckBox();
                checkBox.ID = "CheckBox1";
                //checkBox.DataBinding += new EventHandler(checkBox_DataBinding);
                container.Controls.Add(checkBox);            
      
                RadioButton radioButton = new RadioButton();
                radioButton.ID = "RadioButton1";
                //radioButton.DataBinding += new EventHandler(radioButton_DataBinding);
                container.Controls.Add(radioButton);
      
                LiteralControl lc = new LiteralControl();
                lc.DataBinding += new EventHandler(label_DataBinding);
                container.Controls.Add(lc);
            }
      
            private void checkBox_DataBinding(object sender, EventArgs e)
            {
                CheckBox target = (CheckBox)sender;
                RadListBoxItem item = (RadListBoxItem)target.BindingContainer;
            }
      
            private void radioButton_DataBinding(object sender, EventArgs e)
            {
                RadioButton target = (RadioButton)sender;
                RadListBoxItem item = (RadListBoxItem)target.BindingContainer;
            }
      
            private void label_DataBinding(object sender, EventArgs e)
            {
                LiteralControl target = (LiteralControl)sender;
                RadListBoxItem item = (RadListBoxItem)target.BindingContainer;
                target.Text = (string)DataBinder.Eval(item, "Text");
            }
        }

    I have the desired checkboxes and radio buttons. However, I want the user to be able to select only one radiobutton at any given time. The current functionality allows the user to check multiple radio buttons. I had a similar functionality with a combo box where I call the 'SetUniqueRadioButton' onclick event and it does the required. I used the same function here but it did not give me the desired results.
    Is it because now the control is being created dynamically so the ID changes? Could you help me with the solution here.
    Posted below is the js code:
    function SetUniqueRadioButton(nameregex, current) {
                        re = new RegExp(nameregex);
      
                        for (i = 0; i < document.forms[0].elements.length; i++) {
      
                            elm = document.forms[0].elements[i]
      
                            if (elm.type == 'radio') {
                                if (re.test(elm.name)) {
                                    elm.checked = false;
                                }
                            }
                        }
      
                        current.checked = true;
                    }

    Please help.
  5. Anumeha
    Anumeha avatar
    36 posts
    Member since:
    Aug 2010

    Posted 27 Dec 2010 Link to this post

    Any help on this issue?
  6. Genady Sergeev
    Admin
    Genady Sergeev avatar
    1596 posts

    Posted 29 Dec 2010 Link to this post

    Hi newbie,

    You can find sample project as an attachment, demonstrating how to create radio buttons using templates. I hope that this will help you to get started.

    Best wishes,
    Genady Sergeev
    the Telerik team
    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017