Multi Columns with vertical ordering

6 posts, 1 answers
  1. Irving
    Irving avatar
    12 posts
    Member since:
    Jan 2014

    Posted 21 May 2014 Link to this post

    Hi everyone,

    I have followed the example of "RadComboBox Multiple Column" to display my items in multiple rows and columns which is working perfectly fine. The items are displayed in a horizontal ordering, so I would like to display it vertically instead. Thus, is it possible ?

    /* RadComboBox CSS*/
    .multipleRowsColumns .rcbItem,
            .multipleRowsColumns .rcbHovered
            {
                float:left;
                margin:0 1px;
                min-height:13px;
                overflow:hidden;
                padding:2px 19px 2px 6px;
                width:80px;
            }

    Markup:
    <telerik:RadComboBox ID="cboxHour" runat="server" Width="40px" DropDownCssClass="multipleRowsColumns"
        DropDownWidth="200px">
        <HeaderTemplate>
            <table style="width: 100%">
                <tr>
                    <td align="center">
                        <b>Select Hour</b>
                    </td>
                </tr>
            </table>
        </HeaderTemplate>
    </telerik:RadComboBox>

    C#:
    protected new void Page_Load(object sender, EventArgs e)
            {
                if(!IsPostBack)
                {
                    int[] hours = Enumerable.Range(0, 24).ToArray();
                    cboxHour.DataSource = hours;
                    cboxHour.DataBind();
                }
            }
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 22 May 2014 in reply to Irving Link to this post

    Hi Irving,

    In order to show the RadComboBoxItem vertically please try to remove the CSS mentioned in your code.

    Thanks,
    Shinu.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Irving
    Irving avatar
    12 posts
    Member since:
    Jan 2014

    Posted 22 May 2014 in reply to Shinu Link to this post

    Hi Shinu,

    Thanks for you quick reply, and yes I understand your solution. But what I would like is still maintaining the multi-column and multi-row. I would post a picture for your reference, so that it would be easier for you to understand.

    Anyway if the RadComboBox is not able to achieve this, then is there any other possible way to do it ? Thanks for your help.
  5. Irving
    Irving avatar
    12 posts
    Member since:
    Jan 2014

    Posted 22 May 2014 Link to this post

    I am sorry please ignore the first img i sent, this is img with the correct results that i would like for my RadComboBox to display when user click the ComboBox. Thanks again !
  6. Answer
    Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 23 May 2014 in reply to Irving Link to this post

    Hi Irving,

    Please try the sample code snippet which works fine at my end.

    ASPX:
    <telerik:RadComboBox runat="server" ID="RadComboBox2" Height="190px" Width="420px" EmptyMessage="Select" DataTextField="OrderID" DataSourceID="SqlDataSource1" OnItemDataBound="RadComboBox2_ItemDataBound" >
        <HeaderTemplate>
            <ul>
                <li class="col1">OrderID</li>
            </ul>
        </HeaderTemplate>
        <ItemTemplate>
            <ul>
                <li class="col1">
                    <%# DataBinder.Eval(Container.DataItem, "OrderID")%></li>
            </ul>
        </ItemTemplate>
    </telerik:RadComboBox>

    C#:
    protected void RadComboBox2_ItemDataBound(object sender, RadComboBoxItemEventArgs e)
    {
        e.Item.Text = ((DataRowView)e.Item.DataItem)["OrderID"].ToString();
    }

    CSS:
    <style type="text/css">
        .rcbList
        {
            display: inline-block !important;
            -webkit-column-count: 3 !important;
            -moz-column-count: 3 !important;
            column-count: 3 !important;
        }
    </style>

    Let me know if you have any concern.
    Thanks,
    Shinu.
  7. Irving
    Irving avatar
    12 posts
    Member since:
    Jan 2014

    Posted 26 May 2014 Link to this post

    Hey Shinu,

    Your solution works thanks alot !! I modified your codes to suit my needs and it work excellently. Just posted my codes for references for anyone who wants to use it too.

    ASPX:
    <telerik:RadComboBox ID="cboxHour" runat="server" Width="40px" DropDownCssClass="multipleRowsColumns2"
        DropDownWidth="200px">
        <HeaderTemplate>
            <table style="width: 100%">
                <tr>
                    <td align="center">
                        <b>Select Hour</b>
                    </td>
                </tr>
            </table>
        </HeaderTemplate>
    </telerik:RadComboBox>



    C#:
    protected new void Page_Load(object sender, EventArgs e)
            {
                if(!IsPostBack)
                {
                    int[] hours = Enumerable.Range(0, 24).ToArray();
                    cboxHour.DataSource = hours;
                    cboxHour.DataBind();
                }
            }


    CSS:
    .multipleRowsColumns2 .rcbList
    {
        display: inline-block !important;
        -webkit-column-count: 5 !important;
    }




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