DropDownAutoWidth and multi-column combo box

6 posts, 0 answers
  1. dhuss
    dhuss avatar
    120 posts
    Member since:
    Sep 2009

    Posted 10 Jun 2013 Link to this post

    We finally got our telerik.dll's updated to the current version and the DropDownAutoWidth works perfect for a standard radComboBox. If you create a multi-column (2 columns) radComboBox the DropDownAutoWidth has a very strange behavior. You can see in multi_1.jpg that the second column is not left justified and extends to the left (first time I click the dropdown). In multi_2.jpg, the second column is working its way towards the right and drop down is getting wider (second time I click the dropdown). In multi_3.jpg, the second column is left justified with the other rows and the drop down is even wider (third time I click the dropdown). I have tried this with several of the skins and they all behave the same way. This is my aspx code for the drop down.
    <telerik:RadComboBox ID="radCBOMulti" runat="server" MarkFirstMatch="true" AllowCustomText="false"
        Width="150px" MaxHeight="300px" NoWrap="true" HighlightTemplatedItems="true"
        ExpandDirection="Down" ExpandDelay="0" CollapseDelay="0" DropDownAutoWidth="Enabled">
        <HeaderTemplate>
            <table style="width: 100%; text-align: left; font-size: 8pt">
                <tr>
                    <td style="width: 20%;">
                        Code
                    </td>
                    <td style="width: 80%;">
                        Description
                    </td>
                </tr>
            </table>
        </HeaderTemplate>
        <ItemTemplate>
            <table style="width: 100%; text-align: left; font-size: 8pt">
                <tr>
                    <td style="width: 20%;">
                        <%#DataBinder.Eval(Container.DataItem, "Master_Type_Code")%>
                    </td>
                    <td style="width: 80%;">
                        <%#DataBinder.Eval(Container.DataItem, "Master_Desc")%>
                    </td>
                </tr>
            </table>
        </ItemTemplate>
    </telerik:RadComboBox>

    Page_Load
    radCBOMulti.DataSource = LoadRadTemplate()
     
    radCBOMulti.DataBind()


    This is the code to load the combo box:
    Private Function LoadRadTemplate() As DataTable
     
        Dim dtTemp As New DataTable
        Dim drTemp As DataRow
     
        Dim dcCol1 As New DataColumn("Master_Type_Code", GetType(System.String))
        Dim dcCol2 As New DataColumn("Master_Desc", GetType(System.String))
     
        dtTemp.Columns.Add(dcCol1.ColumnName, dcCol1.DataType)
        dtTemp.Columns.Add(dcCol2.ColumnName, dcCol1.DataType)
     
        drTemp = dtTemp.NewRow
        drTemp.Item(0) = ""
        drTemp.Item(1) = ""
        dtTemp.Rows.Add(drTemp)
     
        drTemp = dtTemp.NewRow
        drTemp.Item(0) = "BR"
        drTemp.Item(1) = "Bedrest BRP"
        dtTemp.Rows.Add(drTemp)
     
        drTemp = dtTemp.NewRow
        drTemp.Item(0) = "CA"
        drTemp.Item(1) = "Cane Required"
        dtTemp.Rows.Add(drTemp)
     
        drTemp = dtTemp.NewRow
        drTemp.Item(0) = "CB"
        drTemp.Item(1) = "Complete Bedrest"
        dtTemp.Rows.Add(drTemp)
     
        drTemp = dtTemp.NewRow
        drTemp.Item(0) = "CR"
        drTemp.Item(1) = "Crutches Required"
        dtTemp.Rows.Add(drTemp)
     
        drTemp = dtTemp.NewRow
        drTemp.Item(0) = "EP"
        drTemp.Item(1) = "Exercises Prescribed - this is a very long description of this service"
        dtTemp.Rows.Add(drTemp)
     
        drTemp = dtTemp.NewRow
        drTemp.Item(0) = "IH"
        drTemp.Item(1) = "Independent at Home"
        dtTemp.Rows.Add(drTemp)
     
        Session("radComboData") = dtTemp
     
        Return dtTemp
     
    End Function

    Private Sub radCBOMulti_ItemDataBound(ByVal sender As Object, ByVal e As Telerik.Web.UI.RadComboBoxItemEventArgs) Handles radCBOMulti.ItemDataBound
        Try
     
            e.Item.Text = (DirectCast(e.Item.DataItem, DataRowView))("Master_Type_Code").ToString
     
            e.Item.Value = (DirectCast(e.Item.DataItem, DataRowView))("Master_Type_Code").ToString.Trim
     
        Catch objEx As Exception
     
     
        End Try
    End Sub







  2. Magdalena
    Admin
    Magdalena avatar
    487 posts

    Posted 11 Jun 2013 Link to this post

    Hello Dennis,

    Thank you for contacting us.

    When you enable the DropDownAutoWidth property, it calculates the width of the container depending on the width of the content inside. By setting relative content width in percents, there isn't a fixed dimension to calculate the width of a container. I attached a very simplified runnable page containing an example solution with the following changes included:

    • set up fixed width of the first column in pixels
    • using rendering with spans and divs instead of table tags

    Regards,
    Magda
    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. dhuss
    dhuss avatar
    120 posts
    Member since:
    Sep 2009

    Posted 13 Jun 2013 Link to this post

    That did the trick. I just had to set the header template width on the first column to match the item template and everything lines up perfect.

    Now for a followup question for the multi-column drop down. If I add the property "CheckBoxes="true", then the checkboxes render above each row. How do you get them to line up with the row without adding a asp:checkbox to the item template. See screen shot.
  4. Magdalena
    Admin
    Magdalena avatar
    487 posts

    Posted 17 Jun 2013 Link to this post

    Hi Dennis,

    You could apply following CSS code snippet to get the checkboxes to line up with the row:

    .RadComboBoxDropDown .rcbItem > label,
    .RadComboBoxDropDown .rcbHovered > label,
    .RadComboBoxDropDown .rcbDisabled > label {
        float: left;
    }
    .RadComboBoxDropDown .rcbItem > label input,
    .RadComboBoxDropDown .rcbHovered > label input,
    .RadComboBoxDropDown .rcbDisabled > label input {
        margin-top: 1px;
        margin-bottom: 0;
    }
    Regards,
    Magdalena
    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.
  5. dhuss
    dhuss avatar
    120 posts
    Member since:
    Sep 2009

    Posted 18 Jun 2013 Link to this post

    Thank you. I will give this a try.

    The CSS code you supplied doesn't work. I have tried it in several places: my combobox.css, my custom skin CSS, in a custom ascx control and on a page. None place the checkbox next to the line. Suggestions?
  6. Magdalena
    Admin
    Magdalena avatar
    487 posts

    Posted 19 Jun 2013 Link to this post

    Hi Dennis,

    We created for you a solution with a working and cross-browser tested code with floating check-boxes. Here, you can see a video of the current behavior in Chrome, Firefox, Opera and Internet Explorer.

    Regards,
    Magdalena
    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.
Back to Top