select row and scroll to it?

4 posts, 0 answers
  1. Ed
    Ed avatar
    43 posts
    Member since:
    Dec 2019

    Posted 06 Feb 2020 Link to this post

     

    Is there a way to do this in code?

    Thanks … Ed

     

  2. Ivan Danchev
    Admin
    Ivan Danchev avatar
    2148 posts

    Posted 10 Feb 2020 Link to this post

    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

    Get quickly onboarded and successful with Telerik UI for ASP.NET Core with the dedicated Virtual Classroom technical training, available to all active customers.
  3. Ed
    Ed avatar
    43 posts
    Member since:
    Dec 2019

    Posted 11 Feb 2020 in reply to Ivan Danchev Link to this post

    Hi,

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

    Thanks … Ed

     

  4. Ivan Danchev
    Admin
    Ivan Danchev avatar
    2148 posts

    Posted 14 Feb 2020 Link to this post

    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

    Get quickly onboarded and successful with Telerik UI for ASP.NET Core with the dedicated Virtual Classroom technical training, available to all active customers.
Back to Top