How to control scrollbar option per dataSource size in a kendoGrid control

You can set the scrollable property via options, e.g.

  var grid = $("#myGrid").data("kendoGrid");
  grid.options.scrollable = (data.length > 10);

However, it appears that it needs to be set before the dataSource is set -- if you set it after, either inline or via the dataBound event, it is too late.

This dojo provides an example. In the toggle() function, if you comment out setting scrollable before the dataSource and uncomment setting it after, it doesn't work. Similarly, uncommenting setting it in the dataBound event doesn't work either.

Hi George,

Dynamically Controlling the Scrollbar (Scrollable Option) Based on Data Size

The Kendo UI Grid’s scrollable option determines whether a vertical scrollbar appears when the data exceeds the visible area. This property must be set at initialization—changing it after the grid is created does not take effect. Here’s how you can dynamically adjust it based on your data size:

• Determine Data Size Before Initialization:
  Check your data array size after your API call but before creating the grid. Set the scrollable option accordingly.

• Example Implementation:

  var data = /* API response */;
  var scrollableOption = data.length > 10;
  
  $("#myGrid").kendoGrid({
      width: 1400,
      height: 500,
      sortable: {
          mode: "single",
          allowUnsort: false
      },
      resizable: true,
      editable: true,
      scrollable: scrollableOption,
      columns: modifiedColumns,
      dataSource: data,
      selectable: "multiple, row"
  });
  

• Updating Grid After Data Changes:
  If you want to reload the grid with new data and possibly a new scrollable value, destroy the existing grid and re-initialize it:

  $("#myGrid").data("kendoGrid").destroy();
  $("#myGrid").empty();
  
  var newData = /* new API data */;
  var newScrollable = newData.length > 10;
  
  $("#myGrid").kendoGrid({
      width: 1400,
      height: 500,
      sortable: {
          mode: "single",
          allowUnsort: false
      },
      resizable: true,
      editable: true,
      scrollable: newScrollable,
      columns: modifiedColumns,
      dataSource: newData,
      selectable: "multiple, row"
  });
  

You mentioned wanting to control a "slider control for the roles." If you are referring to the vertical scrollbar that appears when scrollable: true, the above approach will handle that. However, if "slider control" refers to a different UI element (such as the Slider or custom control inside the grid), please provide more details about what you need to achieve so I can offer a more targeted solution.

Regards,
Neli
Progress Telerik