MVC Grid toggle "Scrollable" via jQuery

1 Answer 15 Views
Grid
Jeff
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?

Thanks

Jeff

1 Answer, 1 is accepted

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

<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

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.

Tags
Grid
Asked by
Jeff
Top achievements
Rank 1
Answers by
Ivan Danchev
Telerik team
Share this question
or