MVC Grid toggle "Scrollable" via jQuery

[Jeff]

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?

Thanks

Jeff

[Ivan Danchev]

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()" />

<script>	
  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
    grid.setOptions(options)
  }
</script>

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

Regards,
Ivan Danchev
Progress Telerik