Horizontal Scrollbar in Grid SOLVED!!!

[Robert]

I have been plagued on more than one occasion dealing with scrollbars on the grid and in the past I gave up.  Fortunately I have found a resolution today which seems to work all the time.  I figured I would share this to help anyone else having problems.

Problems:  
    - Horizontal scrollbar is present when you enable scrolling.
    - Documentation recommendations don't really explain how to fix the problem. 
    - I don't use auto generation of columns. Who does??  Is this something people really use for production applications?
    - Setting widths of columns not to exceed grid width doesn't work and misleading.

Solution: 
    - To remove the horizontal scrollbar when NOT USING auto generate columns.  

    - Set grid width to 100%
    - DO NOT set the Master Table View width.
    - Assign all of your columns a fixed width except for 1 and apply 50% or other large % to it.
        * Make sure this is done in the <headerstyle> elements on ALL columns 
    - Make sure you do not set any widths in the <itemStyle> elements.
    - Enable scrolling using static headers.
    - If any hidden columns are present set the widths to 0px.

Post if this helped you.

-Robert

[Peter]

This helped me - thanks!

[Rohit]

I am using below given

<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" LoadingPanelID="ralpDashboard">

<div>
<input type="hidden" id="radGridClickedRowIndex" name="radGridClickedRowIndex" /> <telerik:RadGrid ID="gvDashboard" AllowPaging="True" OnNeedDataSource="gvDashboard_NeedDataSource" AllowFilteringByColumn="True" runat="server" AutoGenerateColumns="false" AllowSorting="True" PageSize="13" GridLines="None" VirtualItemCount="100" Height="595px" Width="100%" CellPadding="0" AllowMultiRowSelection="false" OnItemCreated="gvDashboard_ItemCreated" OnItemDataBound="gvDashboard_ItemDataBound"> <MasterTableView ShowFooter="True" DataKeyNames="BookingId" AutoGenerateColumns="false">
<Columns>
<telerik:GridClientSelectColumn UniqueName="CheckboxSelectColumn" HeaderStyle-Width="50%"> </telerik:GridClientSelectColumn> <telerik:GridTemplateColumn UniqueName="RegistrationNo" DataField="RegistrationNo" SortExpression="RegistrationNo" HeaderStyle-Width="200px" HeaderText="Registration No" AllowFiltering="true" CurrentFilterFunction="Contains" AutoPostBackOnFilter="true"> <ItemTemplate> <a href="javascript:void(0);" onclick="return ShowVehicleModal('<%#Eval("VehicleId")%>')"><%#Eval("RegistrationNo")%></a> </ItemTemplate> </telerik:GridTemplateColumn> <telerik:GridTemplateColumn UniqueName="BookingId" DataField="BookingId" HeaderText="Job No." HeaderStyle-Width="200px" AllowFiltering="true" CurrentFilterFunction="EqualTo" AutoPostBackOnFilter="true" SortExpression="BookingId"> <ItemTemplate> <a href='<%#"Estimate/JobHistory.aspx?JobNo=" + Eval("BookingId")%>'><%#Eval("BookingId")%></a> </ItemTemplate> </telerik:GridTemplateColumn> <telerik:GridTemplateColumn DataField="CustomerName" UniqueName="CustomerName" HeaderStyle-Width="200px" HeaderText="Customer Name" CurrentFilterFunction="Contains" AutoPostBackOnFilter="true" AllowFiltering="true" SortExpression="CustomerName"> <ItemTemplate> <a href="javascript:void(0);" onclick="return ShowCustomerDetail('<%#Eval("CustomerId")%>')"><%#Eval("CustomerName")%></a> </ItemTemplate> </telerik:GridTemplateColumn> <telerik:GridBoundColumn DataField="CustomerId" HeaderText="CustomerId" UniqueName="CustomerId" AllowFiltering="false" HeaderStyle-Width="0"></telerik:GridBoundColumn> <telerik:GridTemplateColumn DataField="InsuranceCompany" HeaderStyle-Width="200px" HeaderText="Insurance Co." CurrentFilterFunction="Contains" AutoPostBackOnFilter="true" AllowFiltering="true" SortExpression="InsuranceCompany"> <ItemTemplate> <a href="javascript:void(0);" onclick="return ShowCompanyDetail('<%#Eval("InsuranceCompanyId")%>')"><%#Eval("InsuranceCompany")%></a> </ItemTemplate> </telerik:GridTemplateColumn> <custom:DropdownFilterColumn DataField="ProgressStatus" HeaderStyle-Width="200px" UniqueName="colProgressStatus" LookupName="ProgressStatus" HeaderText="Progress Status" AllowFiltering="true"> </custom:DropdownFilterColumn> <telerik:GridDateTimeColumn DataField="DateDueIn" HeaderText="Date In" HeaderStyle-Width="130px" SortExpression="DateDueIn" UniqueName="DateDueIn" PickerType="DatePicker" DataFormatString="{0:d}"> </telerik:GridDateTimeColumn> <telerik:GridDateTimeColumn DataField="DateDuoOut" HeaderStyle-Width="130px" HeaderText="Date Out" SortExpression="DateDuoOut" UniqueName="DateDuoOut" PickerType="DatePicker" DataFormatString="{0:d}"> </telerik:GridDateTimeColumn> <telerik:GridTemplateColumn DataField="Courtesy_Car" HeaderText="Courtesy Car Reg." AllowFiltering="true" HeaderStyle-Width="200px"> <ItemTemplate> <a href="javascript:void(0);" onclick="return ShowCCarDetail('<%#Eval("CourtesyCarId")%>')"><%#Eval("Courtesy_Car")%></a> </ItemTemplate> </telerik:GridTemplateColumn> <telerik:GridTemplateColumn DataField="InvoiceCompany" HeaderStyle-Width="60px" HeaderText="Invoices" AllowFiltering="false"> <ItemTemplate> <a href="javascript:void(0);" onclick="return ShowInvoiceDetail('<%#Eval("InvoiceCompany")%>')"><%#Eval("InvoiceCompany")%></a> </ItemTemplate> </telerik:GridTemplateColumn> <telerik:GridTemplateColumn DataField="Email" HeaderStyle-Width="60px" HeaderText="Emails" AllowFiltering="false"> <ItemTemplate> <a href="javascript:void(0);" onclick="return ShowCEmailDetail('<%#Eval("BookingId")%>')"><%#Eval("Email")%></a> </ItemTemplate>

 

 

 

</telerik:GridTemplateColumn>

 

 

 

<telerik:GridTemplateColumn DataField="SMS" HeaderStyle-Width="60px" HeaderText="SMS" AllowFiltering="false">

 

 

 

<ItemTemplate>

 

 

 

<a href="javascript:void(0);" onclick="return ShowCSMSDetail('<%#Eval("BookingId")%>')"><%#Eval("SMS")%></a>

 

 

 

</ItemTemplate>

 

 

 

</telerik:GridTemplateColumn>

 

 

 

</Columns>

 

 

 

</MasterTableView>

 

 

 

<ClientSettings>

 

 

 

<Selecting AllowRowSelect="true" EnableDragToSelectRows="false"></Selecting>

 

 

 

<Scrolling AllowScroll="True" EnableVirtualScrollPaging="True" UseStaticHeaders="True" SaveScrollPosition="True"></Scrolling>
<ClientEvents OnRowContextMenu="RowContextMenu"></ClientEvents>
</ClientSettings>

<GroupingSettings CaseSensitive="false" />

</telerik:RadGrid>

 

But still getting horizontal scrollbar in grid while I am expecting the grid to be auto expand for not to showing any horizontal scrollbar. Please suggest

[Venelin]

Hi Rohit,

The principle of scrolling in general is very simple - if the content width/height exceed the container (with overflow set to auto/scroll) width/height, then scroll bars appear. The only thing you need to consider is whether the total width of all columns is greater than the width of the grid. Since in your case the grid is 100% wide it depends on the width of its container. If the container size vary with the window size, this means that the grid width vary too and in some moment, when the window size is too small it is possible scroll bars to appear.

In short, if you remove all column widths you ensure that horizontal scroll bars will never appear. Sometimes this is not convenient and you need to set width for some columns. In this case the same principle holds, the columns which have explicit width will remain with constant widths, the others will shrink/expand.

If you want to set width for all columns and you don't want horizontal scroll, then you should consider to set a fixed width for the grid too (to ensure that it is as wide as its columns)

I hope this helps.

Regards,
Venelin
Telerik