How to make scrollbar auto enabled or disabled in a Kendo grid?

Question

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?

Answer 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.

Answer 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;"}) 
          )
}
}