This is a migrated thread and some comments may be shown as answers.

how can i display RadListBox listing horizontally instead of vertically?

6 Answers 753 Views
ListBox
This is a migrated thread and some comments may be shown as answers.
visionXpert
Top achievements
Rank 1
visionXpert asked on 06 Sep 2013, 08:28 PM
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?

6 Answers, 1 is accepted

Sort by
0
User
Top achievements
Rank 2
answered on 07 Sep 2013, 04:42 PM
Hi,

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

Thanks.
0
visionXpert
Top achievements
Rank 1
answered on 09 Sep 2013, 04:58 PM
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
0
Shinu
Top achievements
Rank 2
answered on 10 Sep 2013, 11:16 AM
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.
0
Freddy
Top achievements
Rank 1
answered on 10 Sep 2013, 06:20 PM
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.
0
Shinu
Top achievements
Rank 2
answered on 11 Sep 2013, 03:20 AM
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.
0
ELNG
Top achievements
Rank 1
answered on 15 Mar 2017, 06:14 PM
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
Tags
ListBox
Asked by
visionXpert
Top achievements
Rank 1
Answers by
User
Top achievements
Rank 2
visionXpert
Top achievements
Rank 1
Shinu
Top achievements
Rank 2
Freddy
Top achievements
Rank 1
ELNG
Top achievements
Rank 1
Share this question
or