This is a migrated thread and some comments may be shown as answers.

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

5 Answers 178 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
Joey
Top achievements
Rank 1
Joey asked on 02 Aug 2013, 11:58 PM
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

5 Answers, 1 is accepted

Sort by
0
Nencho
Telerik team
answered on 05 Aug 2013, 08:55 AM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
0
Joey
Top achievements
Rank 1
answered on 10 Aug 2013, 12:17 PM
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!!
0
A2H
Top achievements
Rank 1
answered on 11 Aug 2013, 10:01 PM
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



           
0
Shinu
Top achievements
Rank 1
answered on 12 Aug 2013, 03:54 AM
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.
0
ksuh
Top achievements
Rank 1
Veteran
answered on 15 Nov 2013, 11:22 PM
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.
Tags
ComboBox
Asked by
Joey
Top achievements
Rank 1
Answers by
Nencho
Telerik team
Joey
Top achievements
Rank 1
A2H
Top achievements
Rank 1
Shinu
Top achievements
Rank 1
ksuh
Top achievements
Rank 1
Veteran
Share this question
or