how can i display RadListBox listing horizontally instead of vertically?

7 posts, 0 answers
  1. visionXpert
    visionXpert avatar
    9 posts
    Member since:
    Jun 2012

    Posted 06 Sep 2013 Link to this post

    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?
  2.
  3. User
    User avatar
    8 posts
    Member since:
    Jul 2013

    Posted 07 Sep 2013 Link to this post

    Hi,

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

    Thanks.
  5. visionXpert
    visionXpert avatar
    9 posts
    Member since:
    Jun 2012

    Posted 09 Sep 2013 Link to this post

    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
  7. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 10 Sep 2013 Link to this post

    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.
  8.
  9. Freddy
    Freddy avatar
    25 posts
    Member since:
    Feb 2013

    Posted 10 Sep 2013 Link to this post

    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.
  11. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 10 Sep 2013 Link to this post

    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.
  13. ELNG
    ELNG avatar
    2 posts
    Member since:
    Jun 2012

    Posted 15 Mar 2017 Link to this post

    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
  14.
Back to Top