how can i display RadListBox listing horizontally instead of vertically?

[visionXpert]

I have about 30 items i need to list on a customer page in a radlistbox

Each Customer can have multiple countries selected (CHECKBOX)

but insted of displaying it like:

United States
Canada
Mexico
Brazil
Chile
Belize
Panama
Cuba
France
Germany
England
Holland
Switzerland
Sweden
Finland

I would like to display it like  this (even 4 or more columns) with checbox beside each item:
United States            Canada             Mexico
Brazil                         Chile                 Belize
Panama                    Cuba                 France
Germany                   England            Holland
Switzerland                Sweden             Finland


Can this be done?

[User]

Hi,

Take a look into the following forum thread.
How to allign items in horizontal direction inside listbox

Thanks.

[visionXpert]

hi User,

The solution doesn't help me, i need 2 things - the results to be in columns, and a nicely controlled size of the box.

i may need headers above columns.

thanks for the try = it almost did it

[Shinu]

Hi visionXpert,

With reference to this forum thread, RadListBox does not support multi-column where individual items can be listed in separate columns. Suppose you are using ItemTemplate then you can have a look at the following code.

ASPX:

<telerik:RadListBox runat="server" ID="RadListBox1" CheckBoxes="true" DataKeyField="ProductID"
    DataSourceID="SqlDataSource1" DataTextField="ProductName" DataValueField="ProductID"
    Width="250px">
    <ItemTemplate>
        <div style="float: left; width: 200px;">
            <%# DataBinder.Eval(Container.DataItem, "ProductName") %>
        </div>
        <div>
            <%# DataBinder.Eval(Container.DataItem, "UnitPrice") %>
        </div>
    </ItemTemplate>
</telerik:RadListBox>
<asp:SqlDataSource runat="server" ID="SqlDataSource1" ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
    SelectCommand="SELECT top 5 [ProductID], [ProductName], [UnitPrice] FROM [Products]">
</asp:SqlDataSource>

Another possible approach is to horizontally align the items and set a fixed width for the RadlistBox so that the items seems to appear in multiple columns.

Thanks,
Shinu.

[Freddy]

Hi User,Shinu, I was searching for radlistbox with horizontal alignment of items and found the link given by User. But after applying the style, the items are horizontally aligned but I can see a bold black line over the items. Also the control now does not look like a listbox with no box. So someone provide me a fix. Its pretty urgent for me.
Freddy.

[Shinu]

Hi Freddy,

The .rlbGroup CSS class of the RadListBox has a default border style and this is causing the black line over the items as you mentioned. You can override the default CSS and provide a custom CSS in order to remove that and provide a border around the items so that you can regain the box like look.

CSS:

<style type="text/css">
    .rlbItem
    {
        float: left !important;
    }
    .rlbGroup, .RadListBox
    {
        width: auto !important;
    }
    #RadListBox1
    {
        border: 1px solid black;
    }
    .RadListBox_Silk .rlbGroup
    {
        border: none !important;
    }
</style>

In the above CSS RadListBox1 is the ID of the RadListBox and Silk skin is being used.

Thanks,
Shinu.

[ELNG]

Hi,
Can anybody advice how to apply width% for the horizontal orientation of the radlistbox, i am using the below css:
       .clsHorizontal .rlbItem
    {
        float: left !important;
    }
    .clsHorizontal .rlbGroup, .clsHorizontal .RadListBox
    {
        width: auto !important;
    }

Thank you