MVC Grid toggle "Scrollable" via jQuery

1 Answer 35 Views
Top achievements
Rank 1
Jeff asked on 30 Jul 2021, 03:14 PM

Hi all.

I'm looking for a way to alter the "Scrollable" setting via jQuery.

Basically, I want to give the user the ability to toggle the grid between a fixed size (say 200px height with scrolling) and a un-set height, allowing the grid to show all rows without scrolling.

I have this set in the grid definition:

.Scrollable(s => s.Enabled(true).Virtual(true))

which yields the first requirement - a scrollable grid of fixed height.

When the user clicks a "toggle" button, I'd like to swap the s.Enabled(true) to s.Enabled(false) and back and forth as they click the toggle button.

Is there any way to do this?



1 Answer, 1 is accepted

Sort by
Ivan Danchev
Telerik team
answered on 04 Aug 2021, 12:51 PM

Hi Jeff,

You can use the setOptions method of the Grid to enable/disable the virtual scrolling:

<input type="button" value="Toggle Scrollable" onclick="toggleScrollable()" />

  function toggleScrollable() {
    //get a reference to the Grid (replace "grid" with the actual name of the Grid)
    var grid = $("#grid").data("kendoGrid");
    //save the Grid's options
    var options = grid.getOptions();
    //toggle the virtual option
    options.scrollable.virtual = !options.scrollable.virtual;

    //set the modified options back to the Grid

Have in mind though that the setOptions method re-initializes the Grid.

Ivan Danchev
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Asked by
Top achievements
Rank 1
Answers by
Ivan Danchev
Telerik team
Share this question