How to make scrollbar auto enabled or disabled in a Kendo grid?
29,618
Solution 1
You can use something like this to show the vertical scroll bar:
$("#grid .k-grid-content").css({
"overflow-y": "scroll"
});
and this to hide it:
$("#grid .k-grid-content").css({
"overflow-y": "hidden"
});
where grid
is the id of your grid element.
Solution 2
You can add .Scrollable(scrollable => scrollable.Virtual(true))
@{
if (Model.GenericEntityList.Count > 0)
{
@(Html.Kendo().Grid(Model.GenericEntityList).Name(screenNames.ToString()).Columns(
columns =>
{
columns.Bound(a => a.ID).Title("<input id='checkAll' type='checkbox' />").ClientTemplate("<input type='checkbox' id=#=genericCheckbox(ID,ViewFlag)#").Width(7);
columns.Bound(a => a.Name).Title(screen.ToString() + " Name").Width(93);
}
)
.Selectable()
.Scrollable(scrollable => scrollable.Virtual(true))
.DataSource(
datasource =>
datasource.Ajax().Read(read => read.Action("CompSetHide", "Compset"))
).Events(a => a.Change("rowclick")
)
.HtmlAttributes(new {style = "height: 185px;"})
)
}
}
Solution 3
Use the k-scrollable
attribute
<kendo-grid k-scrollable="false" ... />
Solution 4
Below CSS should fix the issue and remove the vertical scrolling as decribed at http://docs.telerik.com/kendo-ui/controls/data-management/grid/appearance#scrolling.
#GridID .k-grid-header
{
padding: 0 !important;
}
#GridID .k-grid-content
{
overflow-y: visible;
}
Author by
user3139423
Updated on July 09, 2022Comments
-
user3139423 almost 2 years
This is my code for creating the grid:
@{ if (Model.GenericEntityList.Count > 0) { @(Html.Kendo().Grid(Model.GenericEntityList).Name(screenNames.ToString()).Columns( columns => { columns.Bound(a => a.ID).Title("<input id='checkAll' type='checkbox' />").ClientTemplate("<input type='checkbox' id=#=genericCheckbox(ID,ViewFlag)#").Width(7); columns.Bound(a => a.Name).Title(screen.ToString() + " Name").Width(93); } ).Selectable().Scrollable().DataSource( datasource => datasource.Ajax().Read(read => read.Action("CompSetHide", "Compset")) ).Events(a => a.Change("rowclick") ) .HtmlAttributes(new {style = "height: 185px;"}) ) } }
How can I disable and enable the vertical scrollbar that appears inside the kendo grid automatically?