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:
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>3 Answers, 1 is accepted
0
Kevin
Top achievements
Rank 2
Rank 2
answered on 04 Nov 2011, 06:55 PM
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.
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.
0
Bilal
Top achievements
Rank 1
Rank 1
answered on 06 Nov 2011, 08:30 PM
Hi Kevin,
Yes but I really need to add scrollbars to the header as well.
Telerik Team: Please advice.
0
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
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