Hello!
When I have many columns of type GridDateTimeColumn in a grid with AllowFilteringByColumn="true", the Chrome shows the horizontal scroll bar for the whole browser window in addition to the grid’s scroll bar (please see the code and the attached screenshot below).
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Test.aspx.cs" Inherits="Test.Test" %>
<!DOCTYPE html>
<
html
xmlns
=
"http://www.w3.org/1999/xhtml"
>
<
head
runat
=
"server"
>
<
title
>Test</
title
>
</
head
>
<
body
>
<
form
id
=
"form1"
runat
=
"server"
>
<
telerik:RadScriptManager
ID
=
"RadScriptManager1"
runat
=
"server"
/>
<
telerik:RadSkinManager
ID
=
"RadSkinManager1"
runat
=
"server"
PersistenceMode
=
"Cookie"
ShowChooser
=
"false"
EnableViewState
=
"false"
/>
<
telerik:RadGrid
ID
=
"RadGrid1"
runat
=
"server"
Width
=
"100%"
AutoGenerateColumns
=
"False"
CellSpacing
=
"0"
GridLines
=
"Vertical"
EnableLinqExpressions
=
"false"
AllowFilteringByColumn
=
"true"
OnNeedDataSource
=
"RadGrid1_NeedDataSource"
>
<
MasterTableView
Width
=
"100%"
AllowSorting
=
"true"
>
<
Columns
>
<
telerik:GridDateTimeColumn
HeaderText
=
"Column 1"
UniqueName
=
"C1"
DataField
=
"C1"
HeaderStyle-Width
=
"150px"
FilterControlWidth
=
"100px"
/>
<
telerik:GridDateTimeColumn
HeaderText
=
"Column 2"
UniqueName
=
"C2"
DataField
=
"C1"
HeaderStyle-Width
=
"150px"
FilterControlWidth
=
"100px"
/>
<
telerik:GridDateTimeColumn
HeaderText
=
"Column 3"
UniqueName
=
"C3"
DataField
=
"C1"
HeaderStyle-Width
=
"150px"
FilterControlWidth
=
"100px"
/>
<
telerik:GridDateTimeColumn
HeaderText
=
"Column 4"
UniqueName
=
"C4"
DataField
=
"C1"
HeaderStyle-Width
=
"150px"
FilterControlWidth
=
"100px"
/>
<
telerik:GridDateTimeColumn
HeaderText
=
"Column 5"
UniqueName
=
"C5"
DataField
=
"C1"
HeaderStyle-Width
=
"150px"
FilterControlWidth
=
"100px"
/>
<
telerik:GridDateTimeColumn
HeaderText
=
"Column 6"
UniqueName
=
"C6"
DataField
=
"C1"
HeaderStyle-Width
=
"150px"
FilterControlWidth
=
"100px"
/>
<
telerik:GridDateTimeColumn
HeaderText
=
"Column 7"
UniqueName
=
"C7"
DataField
=
"C1"
HeaderStyle-Width
=
"150px"
FilterControlWidth
=
"100px"
/>
<
telerik:GridDateTimeColumn
HeaderText
=
"Column 8"
UniqueName
=
"C8"
DataField
=
"C1"
HeaderStyle-Width
=
"150px"
FilterControlWidth
=
"100px"
/>
<
telerik:GridDateTimeColumn
HeaderText
=
"Column 9"
UniqueName
=
"C9"
DataField
=
"C1"
HeaderStyle-Width
=
"150px"
FilterControlWidth
=
"100px"
/>
<
telerik:GridDateTimeColumn
HeaderText
=
"Column 10"
UniqueName
=
"C10"
DataField
=
"C1"
HeaderStyle-Width
=
"150px"
FilterControlWidth
=
"100px"
/>
<
telerik:GridDateTimeColumn
HeaderText
=
"Column 11"
UniqueName
=
"C11"
DataField
=
"C1"
HeaderStyle-Width
=
"150px"
FilterControlWidth
=
"100px"
/>
<
telerik:GridDateTimeColumn
HeaderText
=
"Column 12"
UniqueName
=
"C12"
DataField
=
"C1"
HeaderStyle-Width
=
"150px"
FilterControlWidth
=
"100px"
/>
<
telerik:GridDateTimeColumn
HeaderText
=
"Column 13"
UniqueName
=
"C13"
DataField
=
"C1"
HeaderStyle-Width
=
"150px"
FilterControlWidth
=
"100px"
/>
<
telerik:GridDateTimeColumn
HeaderText
=
"Column 14"
UniqueName
=
"C14"
DataField
=
"C1"
HeaderStyle-Width
=
"150px"
FilterControlWidth
=
"100px"
/>
<
telerik:GridDateTimeColumn
HeaderText
=
"Column 15"
UniqueName
=
"C15"
DataField
=
"C1"
HeaderStyle-Width
=
"150px"
FilterControlWidth
=
"100px"
/>
<
telerik:GridDateTimeColumn
HeaderText
=
"Column 16"
UniqueName
=
"C16"
DataField
=
"C1"
HeaderStyle-Width
=
"150px"
FilterControlWidth
=
"100px"
/>
<
telerik:GridDateTimeColumn
HeaderText
=
"Column 17"
UniqueName
=
"C17"
DataField
=
"C1"
HeaderStyle-Width
=
"150px"
FilterControlWidth
=
"100px"
/>
<
telerik:GridDateTimeColumn
HeaderText
=
"Column 18"
UniqueName
=
"C18"
DataField
=
"C1"
HeaderStyle-Width
=
"150px"
FilterControlWidth
=
"100px"
/>
<
telerik:GridDateTimeColumn
HeaderText
=
"Column 19"
UniqueName
=
"C19"
DataField
=
"C1"
HeaderStyle-Width
=
"150px"
FilterControlWidth
=
"100px"
/>
</
Columns
>
</
MasterTableView
>
<
ClientSettings
>
<
Selecting
AllowRowSelect
=
"true"
/>
<
Scrolling
AllowScroll
=
"True"
UseStaticHeaders
=
"True"
ScrollHeight
=
"180"
/>
<
Resizing
AllowResizeToFit
=
"true"
AllowColumnResize
=
"true"
/>
</
ClientSettings
>
</
telerik:RadGrid
>
</
form
>
</
body
>
</
html
>
using
System;
using
System.Data;
using
Telerik.Web.UI;
namespace
Test
{
public
partial
class
Test : System.Web.UI.Page
{
protected
void
RadGrid1_NeedDataSource(
object
sender, GridNeedDataSourceEventArgs e)
{
RadGrid1.DataSource =
new
DataTable();
}
}
}
If I change FilterControlWidth from “100px” to "100%" it does not help.
If I replace GridDateTimeColumn with GridBoundColumn, or if I set AllowFilteringByColumn="false", the concerned scroll bar disappears.
There is no scroll bar in Internet Explorer 11 and Firefox, but it is shown in Chrome and Opera.
Telerik.Web.UI version is 2017.2.711.45.
So, could you please advise me how to get rid of that scroll bar in the browser window?
Thank you!