This is a migrated thread and some comments may be shown as answers.
DropDownAutoWidth and multi-column combo box
5 Answers 87 Views
This is a migrated thread and some comments may be shown as answers.
dhuss
Top achievements
Rank 1
dhuss asked on 10 Jun 2013, 06:50 PM
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







5 Answers, 1 is accepted

Sort by
0
Magdalena
Telerik team
answered on 11 Jun 2013, 11:06 AM
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.
0
dhuss
Top achievements
Rank 1
answered on 13 Jun 2013, 04:51 PM
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.
0
Magdalena
Telerik team
answered on 17 Jun 2013, 11:56 AM
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.
0
dhuss
Top achievements
Rank 1
answered on 18 Jun 2013, 01:36 PM
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?
0
Magdalena
Telerik team
answered on 19 Jun 2013, 10:55 AM
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.
Asked by
dhuss
Top achievements
Rank 1
Answers by
Magdalena
Telerik team
dhuss
Top achievements
Rank 1
Share this question
or