Multiple columns in RadListBox with checkboxes

[Danielle Mascher]

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!

[Veronica]

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.

[Danielle Mascher]

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!

[Veronica]

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.

[Clyde]

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 {
           float: left;
           width: 320px;
        }
        .listNameCompany {
           float: left;
           width: 320px;
        }
        .listEmail {
            float: left;
            width: 200px;
        }
        .rfdCheckboxChecked, .rfdCheckboxUnchecked,
        .RadListBox .rlbCheck
        {
            float:left;
        }

Regards
Clyde

[Dhamodharan]

Hi,

How to get those two labels in page load..

Is is possible?

Thanks,
Dhamu

[Veronica]

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

[Michael Rogers]

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%">

[Sridhar]

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.

[Sridhar]

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.