Using templated combobox with checkboxes puts checkbox on top of each row

[Joey]

i'm following the demo here
http://demos.telerik.com/aspnet-ajax/combobox/examples/overview/defaultcs.aspx#qsf-demo-source

works well but when i set

CheckBoxes="true" EnableCheckAllItemsCheckBox="True"

the check box does not appear in the same line as each item row, instead it appears on top of each item (2 rows for each item, 1st row shows the check box, 2nd row shows the actual item). The total number of rows appearing in the dropdown becomes item count x 2.

[checkbox]
[item]
[checkbox]
[item]

What can I do to make the check box appear on the same row as the item?

Thanks for reading

[Nencho]

Hello Joey,

The referenced demo, demonstrates the usage of four RadComboBoxes. Would you specify which one you had use as a pattern for implementation at your end?

Regards,
Nencho
Telerik

[Joey]

Hello Nencho,

  Thanks for replying. Here's the code I used, based on the demo (Sorry I couldn't attach the code files, it seems only pictures files are allowed as attachment)

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////ASPX Page:

        <telerik:RadScriptManager runat="server"></telerik:RadScriptManager>
    
        <telerik:RadComboBox ID="RadComboBoxProduct" runat="server" Height="200" Width="200"
                                  DropDownWidth="310" EmptyMessage="Choose a Product" HighlightTemplatedItems="true"
                                  EnableLoadOnDemand="true" Filter="StartsWith" OnItemsRequested="RadComboBoxProduct_ItemsRequested"
                                  Label="Product: " Skin="Office2010Silver" CheckBoxes="True">
            <HeaderTemplate>
                <table style="width: 275px" cellspacing="0" cellpadding="0">
                    <tr>
                            <td style="width: 175px;">
                                Product Name
                            </td>
                            <td style="width: 60px;">
                                Quantity
                            </td>
                            <td style="width: 40px;">
                                Price
                            </td>
                    </tr>
                </table>
            </HeaderTemplate>
            <ItemTemplate>
                <table style="width: 275px" cellspacing="0" cellpadding="0">
                    <tr>
                            <td style="width: 175px;">
                                <%# DataBinder.Eval(Container, "Text")%>
                            </td>
                            <td style="width: 60px;">
                                <%# DataBinder.Eval(Container, "Attributes['UnitsInStock']")%>
                            </td>
                            <td style="width: 40px;">
                                <%# DataBinder.Eval(Container, "Attributes['UnitPrice']")%>
                            </td>
                    </tr>
                </table>
            </ItemTemplate>
        </telerik:RadComboBox>


////////////////////////////////////////////////////////////////////////////////////////////////////////////////Code Behind

        protected void RadComboBoxProduct_ItemsRequested(object sender, RadComboBoxItemsRequestedEventArgs e)
        {
            DataTable dt = new DataTable();

            //[ProductID], [ProductName], [UnitPrice], [UnitsInStock]
            dt.Columns.Add(new DataColumn("ProductID", typeof (int)));
            dt.Columns.Add(new DataColumn("ProductName", typeof(string)));
            dt.Columns.Add(new DataColumn("UnitPrice", typeof(decimal)));
            dt.Columns.Add(new DataColumn("UnitsInStock", typeof(int)));

            dt.Rows.Add(dt.NewRow());
            dt.Rows.Add(dt.NewRow());
            dt.Rows.Add(dt.NewRow());
            dt.Rows.Add(dt.NewRow());
            dt.Rows.Add(dt.NewRow());

            dt.Rows[0]["ProductID"] = 1;dt.Rows[0]["ProductName"] = "Product 1";dt.Rows[0]["UnitPrice"] = 1;dt.Rows[0]["UnitsInStock"] = 1;
            dt.Rows[1]["ProductID"] = 2; dt.Rows[1]["ProductName"] = "Product 2"; dt.Rows[1]["UnitPrice"] = 2; dt.Rows[1]["UnitsInStock"] = 2;
            dt.Rows[2]["ProductID"] = 3; dt.Rows[2]["ProductName"] = "Product 3"; dt.Rows[2]["UnitPrice"] = 3; dt.Rows[2]["UnitsInStock"] = 3;
            dt.Rows[3]["ProductID"] = 4; dt.Rows[3]["ProductName"] = "Product 4"; dt.Rows[3]["UnitPrice"] = 4; dt.Rows[3]["UnitsInStock"] = 4;
            dt.Rows[4]["ProductID"] = 5; dt.Rows[4]["ProductName"] = "Product 5"; dt.Rows[4]["UnitPrice"] = 5; dt.Rows[4]["UnitsInStock"] = 5;

            foreach (DataRow dataRow in dt.Rows)
            {
                RadComboBoxItem item = new RadComboBoxItem();

                item.Text = (string)dataRow["ProductName"];
                item.Value = dataRow["ProductID"].ToString();

                decimal unitPrice = (decimal)dataRow["UnitPrice"];
                int unitsInStock = (int)dataRow["UnitsInStock"];

                item.Attributes.Add("UnitPrice", unitPrice.ToString());
                item.Attributes.Add("UnitsInStock", unitsInStock.ToString());

                item.Value += ":" + unitPrice;

                RadComboBoxProduct.Items.Add(item);

                item.DataBind();
            }
        }


I have attached a screenshot. Please take a look. Thanks!!

[A2H]

Hello,
Please try the below implementation

1) Add the following css styles

<style type="text/css">
       .rcbItem ul, .rcbHovered ul, .rcbDisabled ul
       {
           width: 100%;
           display: inline;
           margin: 0;
           padding: 0;
           list-style-type: none;
       }

       .rcbHeader ul, .rcbFooter ul
       {
           width: 100%;
           margin: 0;
           padding: 0;
           list-style-type: none;
           min-height: 0;
           _zoom: 1;
       }
       .rcbHeader ul:after, .rcbFooter ul:after
       {
           content: "";
           clear: both;
           display: block;
       }

      .column1header
       {
           float: left;
           width: 150px;
           margin: 0;
           padding: 0 5px 0 15px;
       }
      .column2header
       {
           float: left;
           width: 60px;
           margin: 0;
           padding: 0 0px 0 0px;
       }
       .column3header
       {
           float: left;
           width: 40px;
           margin: 0;
           padding: 0 0px 0 0px;
       }
       .column1
       {
           float: left;
           width: 155px;
           margin: 0;
           padding: 0 5px 0 0px;
       }
       .column2
       {
           float: left;
           width: 60px;
           margin: 0;
           padding: 0 0px 0 0px;
       }

       .column3
       {
           float: left;
           width: 30px;
           margin: 0;
           padding: 0 0px 0 0px;
       }
       div.RadComboBoxDropDown .rcbCheckBox, div.RadComboBoxDropDown .rcbCheckAllItemsCheckBox
       {
           vertical-align: middle;
           float: left;
           margin: 0;
           padding: 0 5px 0 0;
           line-height: 14px;
       }

   </style>

2) Modify your html mark up like given below

<telerik:RadComboBox ID="RadComboBoxProduct" runat="server" Height="200" Width="200"
            DropDownWidth="310px" EmptyMessage="Choose a Product" HighlightTemplatedItems="true"
             EnableLoadOnDemand="true" Filter="StartsWith"
            OnItemsRequested="RadComboBoxProduct_ItemsRequested" Label="Product: " Skin="Office2010Silver"
            EnableCheckAllItemsCheckBox="true" CheckBoxes="true">
            <HeaderTemplate>
                  <ul style="width: 310px;">
                    <li class="column1header">Product Name</li>
                    <li class="column2header">Quantity</li>
                    <li class="column3header">Price</li>
                </ul>
            </HeaderTemplate>
            <ItemTemplate>
                <ul style="width: 310px;">
                    <li class="column1">
                        <%# DataBinder.Eval(Container, "Text")%></li>
                    <li class="column2">
                        <%# DataBinder.Eval(Container, "Attributes['UnitsInStock']")%></li>
                    <li class="column3">
                        <%# DataBinder.Eval(Container, "Attributes['UnitPrice']")%></li>
                </ul>
            </ItemTemplate>
        </telerik:RadComboBox>

Thanks,
A2H

           

[Shinu]

Hi Joey,

Please try the following CSS Class:

CSS:

div.RadComboBoxDropDown .rcbCheckBox, div.RadComboBoxDropDown .rcbCheckAllItemsCheckBox
{
    vertical-align:middle !important;
    float: left !important;
    margin: 0 !important;
    padding: 0 5px 0 0 !important;
    line-height: 14px !important;
}

ASPX:

<telerik:RadComboBox ID="RadComboBoxProduct" runat="server" Height="200" Width="200"
    DropDownWidth="310" EmptyMessage="Choose a Product" HighlightTemplatedItems="true"
    EnableLoadOnDemand="true" Filter="StartsWith"       OnItemsRequested="RadComboBoxProduct_ItemsRequested"
    Label="Product: " Skin="Office2010Silver" CheckBoxes="True" EnableCheckAllItemsCheckBox="True">
    <HeaderTemplate>
        <table style="width: 275px" cellspacing="0" cellpadding="0">
            <tr>
                <td style="width: 175px;">
                    Product Name
                </td>
                <td style="width: 60px;">
                    Quantity
                </td>
                <td style="width: 40px;">
                    Price
                </td>
            </tr>
        </table>
    </HeaderTemplate>
    <ItemTemplate>
        <table style="width: 275px" cellspacing="0" cellpadding="0">
            <tr>
                <td class="temp" style="width: 175px;">
                    <%# DataBinder.Eval(Container, "Text")%>
                </td>
                <td style="width: 60px;">
                    <%# DataBinder.Eval(Container, "Attributes['UnitsInStock']")%>
                </td>
                <td style="width: 40px;">
                    <%# DataBinder.Eval(Container, "Attributes['UnitPrice']")%>
                </td>
            </tr>
        </table>
    </ItemTemplate>
</telerik:RadComboBox>

Thanks,
Shinu.

[ksuh]

Yikes what a mess.

Anyhow when the checkbox is added, a label tag is also put in.  The problem is that the label has a display: block style assigned, which is totally unnecessary.  This should removed.

As a workaround, using

.RadComboBoxDropDown label
{
  display: inline !important;
}

will fix the issue.  OP can probably use his original CSS with this fix.