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

6 posts, 0 answers
  1. Joey
    Joey avatar
    27 posts
    Member since:
    Jun 2013

    Posted 02 Aug 2013 Link to this post

    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
  2. Nencho
    Admin
    Nencho avatar
    1457 posts

    Posted 05 Aug 2013 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Joey
    Joey avatar
    27 posts
    Member since:
    Jun 2013

    Posted 10 Aug 2013 Link to this post

    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!!
  5. A2H
    A2H avatar
    177 posts
    Member since:
    Mar 2010

    Posted 11 Aug 2013 Link to this post

    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



               
  6. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 11 Aug 2013 Link to this post

    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.
  7. ksuh
    ksuh avatar
    44 posts
    Member since:
    Jul 2006

    Posted 15 Nov 2013 Link to this post

    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017