Listbox with radio buttons

13 posts, 0 answers
  1. Caro
    Caro avatar
    34 posts
    Member since:
    Mar 2012

    Posted 02 Mar 2012 Link to this post

    Hi,

    I would like to create a listbox with radio button choice for each line.
    It's a listbox of "capacity" and the radio buttons the level for each capacity.

    For example :

    listbox element :          radio buttons:
    History                        good  bad middle
    Mathematics               good  bad middle

    Thanks for your help and sorry for my bad English :)

  2. Caro
    Caro avatar
    34 posts
    Member since:
    Mar 2012

    Posted 03 Mar 2012 Link to this post

    Nobody can hemp me? :(

    I don't know if I was clear yesterday. What I want is :

    Mathematics Bad Middle Good
    History   Bad Middle Good
    Spanish Bad Middle Good
    Sport Bad Middle Good

    Where "Mathematics" is an item of the listbox and "bad" "middle" "good" are radio buttons. So, on each row of the listbox, the user can choose a capacity and give it a level. So he can choose for example :

    Mathematics good
    History good
    Sport middle

    Please help me to do this ... :)

    Caro

  3. DevCraft Release
  4. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 05 Mar 2012 Link to this post

    Hello,

    Try the following code.
    ASPX:

    <telerik:RadListBox runat="server" ID="RadListBoxSource" Width="250px" Height="200px">
     <Items>
      <telerik:RadListBoxItem Text="Mathematics" Value="Mathematics"  />
      <telerik:RadListBoxItem Text="History" Value="History"/>
      <telerik:RadListBoxItem Text="Spanish" Value="Spanish"  />
      <telerik:RadListBoxItem Text="Sport" Value="Sport"/>
     </Items>
    </telerik:RadListBox>
    C#:
    protected void Page_Load(object sender, EventArgs e)
     {
      foreach (RadListBoxItem item in RadListBoxSource.Items)
       {
        Label label = new Label();
        label.Text = item.Text;
        RadioButton button1 = new RadioButton();
        button1.Text = "Bad ";
        RadioButton button2 = new RadioButton();
        button2.Text = "Middle  ";
        RadioButton button3 = new RadioButton();
        button3.Text = "Good ";
        item.Controls.Add(label);
        item.Controls.Add(button1);
        item.Controls.Add(button2);
        item.Controls.Add(button3);
       }
      }

    Thanks,
    Princy.

  5. Bozhidar
    Admin
    Bozhidar avatar
    756 posts
    Member since:
    Sep 2012

    Posted 05 Mar 2012 Link to this post

    Hello,

    Another alternative is to use templates. Here's how the code should look like in that case:

    .aspx:

    <telerik:RadListBox ID="RadListBox1" runat="server">
        <Items>
            <telerik:RadListBoxItem Text="Math" />
            <telerik:RadListBoxItem Text="Science" />
            <telerik:RadListBoxItem Text="Literature" />
        </Items>
        <ItemTemplate>
            <%# DataBinder.Eval(Container, "Text") %>
            <asp:RadioButtonList runat="server">
                <asp:ListItem Text="Bad"></asp:ListItem>
                <asp:ListItem Text="Good"></asp:ListItem>
                <asp:ListItem Text="Excellent"></asp:ListItem>
            </asp:RadioButtonList>
        </ItemTemplate>
    </telerik:RadListBox>

    .cs:
    protected void Page_Load(object sender, EventArgs e)
    {
        RadListBox1.DataBind();
    }

     
    Greetings,
    Bozhidar
    the Telerik team
    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 RadControls for ASP.NET AJAX, subscribe to their blog feed now.

  6. Caro
    Caro avatar
    34 posts
    Member since:
    Mar 2012

    Posted 05 Mar 2012 Link to this post

    Thanks for yours answers.

    Princy's solution doesn't work.

    With Bozhidar's solution, There are radio buttons on my listbox, but when I select one of them and put my row on the other side (on the "destination Listbox"), the 3 buttons are selected :

    example : Sport bad middle good and not sport good like I had choosen

    Caro

  7. Caro
    Caro avatar
    34 posts
    Member since:
    Mar 2012

    Posted 06 Mar 2012 Link to this post

    Nobody knows why I can't select only one radio button?
    Nobody have an other solution for my problem?

    I'm a beginner so, I need you please :)

  8. Bozhidar
    Admin
    Bozhidar avatar
    756 posts
    Member since:
    Sep 2012

    Posted 07 Mar 2012 Link to this post

    Hi Caro,

    This is an expected behavior. When you transfer an item from one listbox to another, the ItemTemplate is generated again for the transferred item, so basically the RadioButtonList you see is a new one, rather than the list the item had in the previous ListBox.

    To preserve the selection on transfer, you can store the selected value of each item in a custom attribute for instance, and on each load check its value and select the corresponding radio button (in the OnClientLoad event). I've attached a small sample page demonstrating the approach.
     
    Regards,
    Bozhidar
    the Telerik team

    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 RadControls for ASP.NET AJAX, subscribe to their blog feed now.

  9. Caro
    Caro avatar
    34 posts
    Member since:
    Mar 2012

    Posted 09 Mar 2012 Link to this post

    Thank you so much Bozhidar !! That's works!

    Caro

  10. Caro
    Caro avatar
    34 posts
    Member since:
    Mar 2012

    Posted 13 Mar 2012 Link to this post

    Hi :)

    I finally resolved my first problem which was that the items stayed on the first list.
    But I still can't reach the radio button's values to fill my List :(

  11. Bozhidar
    Admin
    Bozhidar avatar
    756 posts
    Member since:
    Sep 2012

    Posted 13 Mar 2012 Link to this post

    Hi Caro,

    You can control whether an item is deleted or not from the source listbox upon transfer through the TransferMode property. When you set it to Copy a copy of the item is transferred to the destination listbox, and the item remains in the source listbox. When it's set to Move the item is deleted from the first listbox.

    The value can be obtained through the RadListBox1.SelectedValue property, or through the Value property of the item (RadListBox1.SelectedItem.Value or RadListBox.Items[0].Value).

    As for you last question, could you clarify what exactly do you want to achieve: populate a list from the RadListBox or populate the RadListBox from the list. Also. where are the id, name and capacity properties stored in the ListBoxItem.
     
    Regards,
    Bozhidar
    the Telerik team

    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 RadControls for ASP.NET AJAX, subscribe to their blog feed now.

  12. Caro
    Caro avatar
    34 posts
    Member since:
    Mar 2012

    Posted 13 Mar 2012 Link to this post

    In fact, I can obtain the radlistbox item which is "Math" or "Sport' ... but I can't obtain the value of the radio button selected.
    I want to fill a list :

    List <Capacity> C = new List <Capacity>

    my class :

    public class Capacity
     {
            private int id = -1;
            private String name = "";
            private int level = -1;
     }

    I can make :

    foreach (RadListBoxItem item in capacityListbox.Items)
     {
           id = capacityListbox.SelectedIndex;
           name = capacityListbox.SelectedValue;
           level = ??? (how to obtain the value of the radio button?)
           user.C.Add(new Capacity(id, name, level));
      }

    Thanks

  13. Bozhidar
    Admin
    Bozhidar avatar
    756 posts
    Member since:
    Sep 2012

    Posted 13 Mar 2012 Link to this post

    Hi Caro,

    If your RadListBox has the following structure:

    <telerik:RadListBox ID="RadListBox1" runat="server" >
        <ItemTemplate>
            <%# DataBinder.Eval(Container, "Text") %>
            <asp:RadioButtonList ID="RadioButtonList1" runat="server">
                <asp:ListItem Text="Bad"></asp:ListItem>
                <asp:ListItem Text="Good"></asp:ListItem>
                <asp:ListItem Text="Excellent"></asp:ListItem>
            </asp:RadioButtonList>
        </ItemTemplate>
    </telerik:RadListBox>

    you can get the selected radio button's text like this:
    foreach (RadListBoxItem item in RadListBox1.Items)
    {
        RadioButtonList list = (RadioButtonList)item.FindControl("RadioButtonList1");
        string selectedText = list.SelectedItem.Text;
    }

     
    Regards,
    Bozhidar
    the Telerik team
    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 RadControls for ASP.NET AJAX, subscribe to their blog feed now.

  14. Caro
    Caro avatar
    34 posts
    Member since:
    Mar 2012

    Posted 14 Mar 2012 Link to this post

    Thanks Bozhidar :)

Back to Top
DevCraft Release