Telerik Forums / UI for ASP.NET AJAX Forum / ComboBox /

RadComboBox HeaderTemplate horizontal scroll

Telerik UI for ASP.NET AJAX
Resources Buy Try

4 posts, 0 answers

Bilal

27 posts

Member since:
Sep 2011

Posted 04 Nov 2011 Link to this post

Hi,

I'm using RadComboBox Templates with the "OnItemsRequested" event.
I have the following scenario:
The ItemTemplate width is about 2300px, and indeed the HeaderTemplate should be 2300px also. The dropdown width is set to 500px (due to the maximum container width). I can see the Horizontal Scroll when the data is bounded; however the scroll only affect the ItemTemplate and not the HeaderTemplate. I want the scrollbar to scroll also the HeaderTemplate so the Items and the Header are matching.

Please do let me know what is needed to be done.
Here is my code:

                     <telerik:RadComboBox ID="ddHomeLocation" runat="server"

                         DropDownWidth="500px" EmptyMessage="Choose a Location" Skin="Windows7" HighlightTemplatedItems="true"

                          EnableLoadOnDemand="true" Filter="StartsWith" Height="200px" Width="500px"

                                 OnItemsRequested="ddHomeLocation_ItemsRequested" OnLoad="ddHomeLocation_Load"

                                   >

<HeaderTemplate>

                           <div style="width:2300px;height:50px; " >

                            <div style="float:left;width:90px">

                              <%= Session["LocationTypesLocationTypeCode"].ToString()%>

                            </div>

                            <div style="float:left;width:80px">

                                 <%= Session["LocationTypesLocationTypeName"].ToString()%>

                            </div>

                            <div style="float:left;width:60px">

                                 <%= Session["LocationsLocationID"].ToString()%>

                            </div>

                            <div style="float:left;width:60px">

                                 <%= Session["LocationsLocationName"].ToString()%>

                            </div>

                            <div style="float:left;width:60px">

                                 <%= Session["LocationsLocationCodeHome"].ToString()%>

                            </div>

                            <div style="float:left;width:70px">

                                 <%# Session["LocationsLocationNameHome"].ToString()%></div>

                            <div style="float:left;width:80px">

                                 <%= Session["LocationsLocationCodeCurrent"].ToString()%>

                            </div>

                            <div style="float:left;width:80px">

                                 <%= Session["LocationsLocationNameCurrent"].ToString()%>

                            </div>

                            <div style="float:left;width:80px">

                                 <%= Session["AddressesAddressName"].ToString()%>

                            </div>

                            <div style="float:left;width:80px">

                                 <%= Session["AddressesAddress1"].ToString()%>

                            </div>

                            <div style="float:left;width:80px">

                                 <%= Session["AddressesAddress2"].ToString()%>

                            </div>

                            <div style="float:left;width:80px">

                                 <%= Session["AddressesCity"].ToString()%>

                            </div>

                            <div style="float:left;width:80px">

                                 <%= Session["AddressesState"].ToString()%>

                            </div>

                            <div style="float:left;width:80px">

                                 <%= Session["AddressesZip"].ToString()%>

                            </div>

                            <div style="float:left;width:80px">

                                 <%= Session["AddressesCountry"].ToString()%>

                            </div>

                            <div style="float:left;width:80px">

                                 <%= Session["LocationsBuilding"].ToString()%>

                            </div>

                            <div style="float:left;width:80px">

                                 <%= Session["LocationsFloor"].ToString()%>

                            </div>

                            <div style="float:left;width:80px">

                                 <%= Session["LocationsRoom"].ToString()%>

                            </div>

                            <div style="float:left;width:80px">

                                 <%= Session["LocationsArea"].ToString()%>

                            </div>

                            <div style="float:left;width:80px">

                                 <%= Session["LocationsAisle"].ToString()%>

                            </div>

                            <div style="float:left;width:80px">

                                 <%= Session["LocationsShelf"].ToString()%>

                            </div>

                            <div style="float:left;width:80px">

                                 <%= Session["LocationsBin"].ToString()%>

                            </div>

                            <div style="float:left;width:80px">

                                 <%= Session["LocationsVIN"].ToString()%>

                            </div>

                            <div style="float:left;width:80px">

                                 <%= Session["LocationsMake"].ToString()%>

                            </div>

                            <div style="float:left;width:80px">

                                 <%= Session["LocationsModel"].ToString()%>

                            </div>

                            <div style="float:left;width:80px">

                                 <%= Session["LocationsColor"].ToString()%>

                            </div>

                            <div style="float:left;width:80px">

                                 <%= Session["LocationsLicensePlate"].ToString()%>

                            </div>

                            <div style="float:left;width:80px">

                                 <%= Session["LocationsPalletteNumber"].ToString()%>

                            </div>

                            <div style="float:left;width:80px">

                                 <%= Session["LocationsNotes"].ToString()%>

                            </div>

                        </div>

</HeaderTemplate>

                         <ItemTemplate>

                        <div style="width:2300px;" >

                            <div style="float:left;width:90px">



                               <%# DataBinder.Eval(Container, "Attributes['LocationTypeCode']")%>

                            </div>

                            <div style="float:left;width:80px">



                                  <%# DataBinder.Eval(Container, "Attributes['LocationTypeName']")%>

                            </div>

                            <div style="float:left;width:60px">



                                  <%# DataBinder.Eval(Container, "Attributes['LocationCode']")%>

                            </div>

                            <div style="float:left;width:60px">



                                  <%# DataBinder.Eval(Container, "Attributes['LocationName']")%>

                            </div>

                            <div style="float:left;width:60px">



                                  <%# DataBinder.Eval(Container, "Attributes['HomeLocationCode']")%>

                            </div>

                            <div style="float:left;width:70px">



                                  <%# DataBinder.Eval(Container, "Attributes['HomeLocationName']")%>

                                  </div>

                            <div style="float:left;width:80px">



                                  <%# DataBinder.Eval(Container, "Attributes['CurrentLocationCode']")%>

                            </div>

                            <div style="float:left;width:80px">



                                  <%# DataBinder.Eval(Container, "Attributes['CurrentLocationNam']")%>

                            </div>

                            <div style="float:left;width:80px">



                                  <%# DataBinder.Eval(Container, "Attributes['AddressName']")%>

                            </div>

                            <div style="float:left;width:80px">



                                  <%# DataBinder.Eval(Container, "Attributes['Address1']")%>

                            </div>

                            <div style="float:left;width:80px">



                                  <%# DataBinder.Eval(Container, "Attributes['Address2']")%>

                            </div>

                            <div style="float:left;width:80px">



                                  <%# DataBinder.Eval(Container, "Attributes['City']")%>

                            </div>

                            <div style="float:left;width:80px">



                                  <%# DataBinder.Eval(Container, "Attributes['State']")%>

                            </div>

                            <div style="float:left;width:80px">



                                  <%# DataBinder.Eval(Container, "Attributes['Zip']")%>

                            </div>

                            <div style="float:left;width:80px">



                                  <%# DataBinder.Eval(Container, "Attributes['Country']")%>

                            </div>

                            <div style="float:left;width:80px">



                                  <%# DataBinder.Eval(Container, "Attributes['Building']")%>

                            </div>

                            <div style="float:left;width:80px">



                                  <%# DataBinder.Eval(Container, "Attributes['Floor']")%>

                            </div>

                            <div style="float:left;width:80px">



                                  <%# DataBinder.Eval(Container, "Attributes['Room']")%>

                            </div>

                            <div style="float:left;width:80px">



                                  <%# DataBinder.Eval(Container, "Attributes['Area']")%>

                            </div>

                            <div style="float:left;width:80px">



                                  <%# DataBinder.Eval(Container, "Attributes['Aisle']")%>

                            </div>

                            <div style="float:left;width:80px">



                                  <%# DataBinder.Eval(Container, "Attributes['Shelf']")%>

                            </div>

                            <div style="float:left;width:80px">



                                  <%# DataBinder.Eval(Container, "Attributes['Bin']")%>

                            </div>

                            <div style="float:left;width:80px">



                                  <%# DataBinder.Eval(Container, "Attributes['VIN']")%>

                            </div>

                            <div style="float:left;width:80px">



                                  <%# DataBinder.Eval(Container, "Attributes['Make']")%>

                            </div>

                            <div style="float:left;width:80px">



                                  <%# DataBinder.Eval(Container, "Attributes['Model']")%>

                            </div>

                            <div style="float:left;width:80px">



                                  <%# DataBinder.Eval(Container, "Attributes['Color']")%>

                            </div>

                            <div style="float:left;width:80px">



                                  <%# DataBinder.Eval(Container, "Attributes['LicensePlate']")%>

                            </div>

                            <div style="float:left;width:80px">



                                  <%# DataBinder.Eval(Container, "Attributes['PlateNumber']")%>

                            </div>

                            <div style="float:left;width:80px">



                                  <%# DataBinder.Eval(Container, "Attributes['Notes']")%>

                            </div>

                        </div>

                         </ItemTemplate>

                     </telerik:RadComboBox>
Kevin

360 posts

Member since:
Jul 2012

Posted 04 Nov 2011 Link to this post

Hello Bilal,

When you use a HeaderTemplate or FooterTemplate, the RadComboBox only adds the scrollbars to the Items to avoid scrolling the header and footer. I don't think you can change it to scroll the header horizontally.
Bilal

27 posts

Member since:
Sep 2011

Posted 06 Nov 2011 Link to this post

Hi Kevin, Yes but I really need to add scrollbars to the header as well. Telerik Team: Please advice.
Ivana
Admin

657 posts

Posted 09 Nov 2011 Link to this post

Hi Bilal,

Have you considered using another data container instead of the RadComboBox. Since you want to show a big amount of data as a single item, using a RadComboBox for this purpose might not be a good idea. You could take a look at our RadGrid control, which might better fit your needs for this scenario:
RadGrid: OverView.

If you really need to use RadComboBox, you could use Custom Attributes to store additional information for every item. For example, lets say you have a table containing: ID, Name, Description. Now you want only the Name and the Description to be shown in the ComboBox's items, but you still need the ID of every item. When having a situation like this, the most appropriate way to have a track of a particular item's ID is to keep it in a Custom Attribute.
To get an idea how the Custom Attributes are used, take a look at the help article explaining its purpose in details: RadComboBox: Custom Attributes Help and the online demo: RadComboBox: Custom Attributes online demo.

Kind regards,
Ivana
the Telerik team

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 their blog feed now

RadComboBox HeaderTemplate horizontal scroll

Bilal

Kevin

Bilal

Ivana