select row and scroll to it?

[Ed]

 

Is there a way to do this in code?

Thanks … Ed

 

[Ivan Danchev]

Hello Ed,

Assuming you have configured the Grid to be selectable, scrollable and its height, e.g.:

.Selectable(selectable => selectable.Enabled(true))
.Scrollable()
.HtmlAttributes(new { style = "height: 500px" })

you can select a row and scroll to it as demonstrated below:

<input type="button" value="Row 10 select and scroll" onclick="selectAndScroll()" />

<script>	
  function selectAndScroll() {
    var grid = $("#grid").data("kendoGrid");
    grid.select("tr:eq(10)");
    var scrollContentOffset = grid.element.find("tbody").offset().top;
    var selectContentOffset = grid.select().offset().top;
    var distance = selectContentOffset - scrollContentOffset;

    grid.element.find(".k-grid-content").animate({
      scrollTop: distance
    }, 400);
  }
</script>

This selects and scrolls to the 10th row. The highlighted part should be replaced with the actual Grid name.

Regards,
Ivan Danchev
Progress Telerik

[Ed]

Hi,

Thanks. Will that work with a row that is on another grid page?

Thanks … Ed

 

[Ivan Danchev]

Ed,

This will not work for other pages because the rows of the pages other than the currently selected one are not rendered. For performance reasons, the Grid renders only the rows of the selected page.

Regards,
Ivan Danchev
Progress Telerik