style issue for multi-column combo box with selections

3 posts, 1 answers
  1. Bin
    Bin avatar
    2 posts
    Member since:
    May 2015

    Posted 26 May 2015 Link to this post

    hi,

    I am running into a style issue for multi-column combo box with selections. The checkbox and corresponding item are in two lines. (see attached). Here is my code:

     

    <%@ Page AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="ComboBox.Examples.Functionality.MultiColumnCombo.DefaultCS"
        Language="c#" MasterPageFile="~/MasterPage.master" %>

    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
        <link rel="stylesheet" type="text/css" href="styles.css" />
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceholder1" runat="Server">
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="Button1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="Label1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>

        <div class="demo-container size-narrow">
            <h2>Grid-like multi-column:</h2>
            <telerik:RadComboBox runat="server" ID="RadComboBox1" Height="190px" Width="460px" CheckBoxes="true"
                MarkFirstMatch="true" DataSourceID="SessionDataSource1" EnableLoadOnDemand="true"
                HighlightTemplatedItems="true" OnClientItemsRequested="UpdateItemCountField"
                OnDataBound="RadComboBox1_DataBound" OnItemDataBound="RadComboBox1_ItemDataBound"
                OnItemsRequested="RadComboBox1_ItemsRequested" DropDownCssClass="exampleRadComboBox">
                <HeaderTemplate>
                    <ul>
                        <li class="col1">Contact Name</li>
                        <li class="col2">City</li>
                        <li class="col3">Title</li>
                    </ul>
                </HeaderTemplate>
                <ItemTemplate>
                    <ul>
                        <li class="col1">
                            <%# DataBinder.Eval(Container.DataItem, "ContactName") %></li>
                        <li class="col2">
                            <%# DataBinder.Eval(Container.DataItem, "City") %></li>
                        <li class="col3">
                            <%# DataBinder.Eval(Container.DataItem, "ContactTitle") %></li>
                    </ul>
                </ItemTemplate>
                <FooterTemplate>
                    A total of
    <asp:Literal runat="server" ID="RadComboItemsCount" />
                    items
                </FooterTemplate>
            </telerik:RadComboBox>
            <br />
            <br />
            <h2>Multiple rows and columns:</h2>
            <telerik:RadComboBox ID="RadComboBox2" runat="server" Height="190px" Width="460px"
                DropDownCssClass="multipleRowsColumns" DropDownWidth="460px" />

            <telerik:RadButton runat="server" ID="Button1" Text="Select" OnClick="Button1_Click"></telerik:RadButton>
            <asp:Label runat="server" ID="Label1" />
        </div>

        <asp:SqlDataSource ID="SessionDataSource1" runat="server"
            ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString35 %>"
            SelectCommand="SELECT * FROM [Customers]"></asp:SqlDataSource>

        <telerik:RadScriptBlock runat="server">
            <script type="text/javascript">
                function UpdateItemCountField(sender, args) {
                    //Set the footer text.
                    sender.get_dropDownElement().lastChild.innerHTML = "A total of " + sender.get_items().get_count() + " items";
                }
            </script>
        </telerik:RadScriptBlock>
    </asp:Content>

    Your help will be greatly appreciated.

  2. Answer
    Aneliya Petkova
    Admin
    Aneliya Petkova avatar
    207 posts

    Posted 27 May 2015 Link to this post

    Hello Bin,

    Please add the following styles to your CSS file:
    html .rcbHeader ul,
    html .rcbFooter ul,
    html .rcbItem ul,
    html .rcbHovered ul {
        margin: 0;
        padding: 0;
        width: 90%;
        display: inline-block;
        list-style-type: none;
    }
     
    html div.RadComboBoxDropDown .rcbItem > label,
    html div.RadComboBoxDropDown .rcbHovered > label {
        display: inline-block;
    }


    Regards,
    Aneliya Petkova
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Bin
    Bin avatar
    2 posts
    Member since:
    May 2015

    Posted 27 May 2015 in reply to Aneliya Petkova Link to this post

    Hi Aneliya,

    Thanks for your quick response. I just tried that out and it works like a charm.

     Thanks,

     Bin

Back to Top