Multi Columns with vertical ordering

[Irving]

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();
            }
        }

[Shinu]

Hi Irving,

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

Thanks,
Shinu.

[Irving]

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.

[Irving]

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 !

[Shinu]

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.

[Irving]

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;
}