Multiple columns in RadListBox with checkboxes

10 posts, 0 answers
  1. Danielle Mascher
    Danielle Mascher avatar
    5 posts
    Member since:
    Nov 2009

    Posted 15 Apr 2010 Link to this post

    HI there

    I have a radlistbox on my page that displays a list of items with checkboxes that I programatically add items to:

     <telerik:RadListBox ID="NewslettersRadListBox" runat="server" Width="100%" CheckBoxes="true" Height="200px"></telerik:RadListBox>

    What I need to do is to display the items in 2 columns. Is this at all possible?

    I have attenpted to do this by modifying the styles as descibedin the following thread: http://www.telerik.com/community/forums/aspnet-ajax/listbox/how-to-show-two-columns-when-use-checkboxes.aspx but this doesn't work.

    Thanks in advance!





  2. Veronica
    Admin
    Veronica avatar
    1213 posts

    Posted 15 Apr 2010 Link to this post

    Hi Danielle Mascher,

    Yana was right. The Css workaround which she offered is working:

    <style type="text/css">
            .RadListBox .rlbCheck
            {
                float: left;
            }
        </style>

    However, for this to work, you need to use Templates. Here's an example:

    <telerik:RadListBox ID="NewslettersRadListBox" runat="server" Height="200px" CheckBoxes="true">
                <ItemTemplate>
                      <asp:Label ID="Label1" runat="server" Text='<%# DataBinder.Eval(Container, "Text") %>'></asp:Label>                   
                </ItemTemplate>
                <Items>
                    <telerik:RadListBoxItem Text="Argentina"/>
                    <telerik:RadListBoxItem Text="Australia" />
                    <telerik:RadListBoxItem Text="Brazil" />
                    <telerik:RadListBoxItem Text="Canada" />
                    <telerik:RadListBoxItem Text="Chile" />
                    <telerik:RadListBoxItem Text="China" />
                    <telerik:RadListBoxItem Text="Egypt" />
                    <telerik:RadListBoxItem Text="England" />
                    <telerik:RadListBoxItem Text="France" />
                    <telerik:RadListBoxItem Text="Germany" />
                    <telerik:RadListBoxItem Text="India" />
                    <telerik:RadListBoxItem Text="Indonesia" />
                    <telerik:RadListBoxItem Text="Kenya" />
                    <telerik:RadListBoxItem Text="Mexico" />
                    <telerik:RadListBoxItem Text="New Zealand" />
                    <telerik:RadListBoxItem Text="South Africa" />
                    <telerik:RadListBoxItem Text="USA" />
                </Items>
            </telerik:RadListBox>

    Don't forget to call DataBind() method to be able to see the templates.

    Here's the result without the Css fix:



    and with the Css fix:



    Find the full code in the attached .zip file.

    Hope this helps.

    Kind regards,
    Veronica Milcheva
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Danielle Mascher
    Danielle Mascher avatar
    5 posts
    Member since:
    Nov 2009

    Posted 15 Apr 2010 Link to this post

    Hi veronica

    Thank you for your reply.

    But what I'm actually looking at doing is to split the list of checkboxes into 2 columns. - I have  avery long list of items and it would make it easier to read.

    Thanks!
  5. Veronica
    Admin
    Veronica avatar
    1213 posts

    Posted 15 Apr 2010 Link to this post

    Hello Danielle Mascher,

    Sorry for the inconvenience. There was an misunderstanding.

    Unfortunately, RadListBox does not support mutli-columns. You can consider the following RadCombBox example instead:
    http://demos.telerik.com/aspnet-ajax/combobox/examples/functionality/multicolumncombo/defaultcs.aspx


    Best wishes,
    Veronica Milcheva
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  6. Clyde
    Clyde avatar
    41 posts
    Member since:
    Feb 2008

    Posted 24 Apr 2010 Link to this post

    You can, however, use a template. I have multiple columns in my ListBox by using the ItemTemplate option.

            <telerik:RadListBox ID="RadListBox1" runat="server" CausesValidation="False" CheckBoxes="True"  
                Height="350px" Width="600px"  
                EmptyMessage="No Records Found" > 
                <ItemTemplate> 
                    <asp:Label ID="Label1" runat="server" Text='<%# Eval("MemberInformation") %>' CssClass="listName"></asp:Label> 
                    <asp:Label ID="Label2" runat="server" Text='<%# Eval("Balance") %>' CssClass="listEmail"></asp:Label> 
                </ItemTemplate> 
                <EmptyMessageTemplate> 
                    No Records Found 
                </EmptyMessageTemplate> 
            </telerik:RadListBox> 

    You will need to add some styles to deal with the formatting.
            .listName { 
               floatleft
               width320px
            } 
            .listNameCompany { 
               floatleft
               width320px
            }         
            .listEmail { 
                floatleft
                width200px;             
            } 
            .rfdCheckboxChecked, .rfdCheckboxUnchecked,  
            .RadListBox .rlbCheck  
            { 
                float:left
            } 

    Regards
    Clyde



  7. Dhamodharan
    Dhamodharan avatar
    300 posts
    Member since:
    Sep 2010

    Posted 26 Apr 2011 Link to this post

    Hi,

    How to get those two labels in page load..

    Is is possible?

    Thanks,
    Dhamu
  8. Veronica
    Admin
    Veronica avatar
    1213 posts

    Posted 27 Apr 2011 Link to this post

    Hi Clyde,

    As I understand you need to create the templates at runtime so here's a useful help article for how to do this.

    Regards,
    Veronica Milcheva
    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.

  9. Michael Rogers
    Michael Rogers avatar
    22 posts
    Member since:
    Mar 2010

    Posted 07 Jan 2013 Link to this post

    This worked for me if anyone else is looking for it as a solution.

    .multiColumn ul
    {
        width:100%;                
    }
    .multiColumn li
    {
        float:left;             
        width:25%;
    }

    <telerik:RadListBox ID="rlbLocations" CssClass="multiColumn" runat="server" DataKeyField="LocationID" CheckBoxes="True" 
                                DataSourceID="edsLocations" DataTextField="LocationName" 
                                DataValueField="LocationID" style="top: 0px; left: 0px" Width="100%">
  10. Sridhar
    Sridhar avatar
    2 posts
    Member since:
    Apr 2016

    Posted 22 Apr Link to this post

    Hi Gyus!

    I have a radlistbox on my page that displays a list of items with checkboxes and I need to make them into column wise. One more thing I am using Items inside the RadListBox not the ItemTemplate.So suggest me how to make it as multiple columns.

  11. Sridhar
    Sridhar avatar
    2 posts
    Member since:
    Apr 2016

    Posted 22 Apr in reply to Michael Rogers Link to this post

    Hello Michael!

    You said

    .multiColumn ul
    {
        width:100%;                
    }
    .multiColumn li
    {
        float:left;             
        width:25%;
    }

    if it works for you, can you give me an idea where to add these in the UI.

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017