RadComboBox HeaderTemplate horizontal scroll

4 posts, 0 answers
  1. Bilal
    Bilal avatar
    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>


  2. Kevin
    Kevin avatar
    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.
  3. Bilal
    Bilal avatar
    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.
  4. Ivana
    Admin
    Ivana avatar
    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
Back to Top