This is a migrated thread and some comments may be shown as answers.

Multi-Column DropDown

3 Answers 160 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
Christopher Blickley
Top achievements
Rank 2
Christopher Blickley asked on 24 Mar 2008, 01:51 PM
<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

3 Answers, 1 is accepted

Sort by
0
Paul
Telerik team
answered on 24 Mar 2008, 02:09 PM
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
0
Andrej
Top achievements
Rank 1
answered on 10 May 2008, 09:58 AM
Hi Paul,

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

Thanks
0
Paul
Telerik team
answered on 12 May 2008, 11:08 AM
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
Tags
ComboBox
Asked by
Christopher Blickley
Top achievements
Rank 2
Answers by
Paul
Telerik team
Andrej
Top achievements
Rank 1
Share this question
or