Multi-Column DropDown

[Christopher Blickley]

<telerik:radcombobox
                id="rcbPayEndDates"
                Runat="server"
                Skin="WindowsXP"
                ShowToggleImage="True"
                AutoPostBack="True"
                Height="150px"
                AllowCustomText="False"
                MarkFirstMatch="False"
                HighlightTemplatedItems="true"
                DropDownWidth="300px"

                OnClientSelectedIndexChanging="handleDateChange"
                >
                <headertemplate>
                  <table cellspacing="0" cellpadding="0" style="width:100%; text-align:left;" >
                     <tr>
                           <td style="width:100px;">
                              Pay End Date
                           </td>
                           <td style="width:80px;">
                              Pay Cycle
                           </td>
                           <td style="width:50px;">
                              School
                           </td>
                           <td style="width:70px;">
                              Org
                           </td>
                     </tr>
                  </table>
               </headertemplate>
               <itemtemplate>
                    <table cellspacing="0" cellpadding="0" style="width:100%; text-align:left;">
                     <tr>
                        <td style="width:100px;">
                           <%# Format(DataBinder.Eval(Container.DataItem, "PAY_END_DATE"), "yyyy-MM-dd")%>
                        </td>
                        <td style="width:80px;">
                           <%# DataBinder.Eval(Container.DataItem, "PAY_SCHEDULE") %>
                        </td>
                        <td style="width:50px;">
                           <%# DataBinder.Eval(Container.DataItem, "HOME_SCHOOL_CTR") %>
                        </td>
                        <td style="width:50px;">
                           <%# DataBinder.Eval(Container.DataItem, "HOME_DEPT_ORG") %>
                        </td>
                     </tr>
                  </table>

                </itemtemplate>
         </telerik:radcombobox>

Hello,

I'm in the process of converting all my classic RadComboBoxes to Prometheus.  One issue I'm running into is that when I have a multi-column dropdown, there always appears to be a horizontal scrollbar in the dropdown.  I'm using tables in the header and item templates, but I can't seem to find a combination of width settings for the tables in the templates, cells, or DropDownWidth that eliminates this.

The only way I can do it is to eliminate the DropDownWidth setting from the RadComboBox and set the Width of the entire RadComboBox to the width I wanted for the dropdown.  However, this is not really want I need, I really need the RadComboBox to be smaller in width than the dropdown so I can display more information in the dropdown without taking up too much room on the page with the actual RadComboBox.

Is anyone else having trouble with the dropdown having horizontal scrollbars with MultiColumn setups?

Here is the code I am using:

<telerik:radcombobox
                id="rcbPayEndDates"
                Runat="server"
                Skin="WindowsXP"
                ShowToggleImage="True"
                AutoPostBack="True"
                Height="150px"
                AllowCustomText="False"
                MarkFirstMatch="False"
                HighlightTemplatedItems="true"
                DropDownWidth="300px"

                OnClientSelectedIndexChanging="handleDateChange"
                >
                <headertemplate>
                  <table cellspacing="0" cellpadding="0" style="width:100%; text-align:left;" >
                     <tr>
                           <td style="width:100px;">
                              Pay End Date
                           </td>
                           <td style="width:80px;">
                              Pay Cycle
                           </td>
                           <td style="width:50px;">
                              School
                           </td>
                           <td style="width:70px;">
                              Org
                           </td>
                     </tr>
                  </table>
               </headertemplate>
               <itemtemplate>
                    <table cellspacing="0" cellpadding="0" style="width:100%; text-align:left;">
                     <tr>
                        <td style="width:100px;">
                           <%# Format(DataBinder.Eval(Container.DataItem, "PAY_END_DATE"), "yyyy-MM-dd")%>
                        </td>
                        <td style="width:80px;">
                           <%# DataBinder.Eval(Container.DataItem, "PAY_SCHEDULE") %>
                        </td>
                        <td style="width:50px;">
                           <%# DataBinder.Eval(Container.DataItem, "HOME_SCHOOL_CTR") %>
                        </td>
                        <td style="width:50px;">
                           <%# DataBinder.Eval(Container.DataItem, "HOME_DEPT_ORG") %>
                        </td>
                     </tr>
                  </table>

                </itemtemplate>
         </telerik:radcombobox>

Thanks,
Chris

[Paul]

Hi Christopher,

You can easily fix this unwanted behavior by using the following CSS style:

<style type="text/css">
.rcbScroll
{
    overflow-x: hidden !important;
}
</style>

Regards,
Paul
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Andrej]

Hi Paul,

May I ask how does one use this css style? Where? An example would be welcomed.

Thanks

[Paul]

Hi n,

You can place it in the head tag of your page.

Regards,
Paul
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center