DropDownAutoWidth and multi-column combo box

[dhuss]

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

[Magdalena]

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

[dhuss]

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.

[Magdalena]

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

[dhuss]

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?

[Magdalena]

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