Grid events (Scroll) or how to scroll two grids simultaneously

4 posts, 0 answers
  1. Nikolajs
    Nikolajs avatar
    2 posts
    Member since:
    Jan 2013

    Posted 29 Jan 2013 Link to this post

    I have two grids on a page (MVC Razor view) and i need them to scroll simultaneously (vertical scroll).  So if I scroll grid2 the grid1 scrolls for the same amount and vice versa. 
    I fail to find event for scrolling in .Events of the grid, so I assume there is none.
    Maybe there is workaround for this problem.
    Please respond even if there is no solution for this problem.

  2. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2200 posts

    Posted 31 Jan 2013 Link to this post

    Hi Nikolajs,

     

    Basically this feature is not supported out-of-the-box, however you can achieve it by attaching scroll event handler to the "k-grid-content" element in the grid. When the event is fired you can get current element scrollTop position and apply it to the other grid "k-grid-content" element using the scrollTop method.

    Kind Regards,
    Vladimir Iliev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Bradley
    Bradley avatar
    1 posts
    Member since:
    Nov 2016

    Posted 24 Jan 2018 Link to this post

    Try this 

    <script>
        $('#ChargesByDateGrid .k-grid-content').scroll(function () {
            $("#ChargesByDateGrid .k-grid-content, #ApptNoChgsGrid .k-grid-content").scrollTop($(this).scrollTop());
        });
    </script>

    <script>
        $('#ApptNoChgsGrid .k-grid-content').scroll(function () {
            $("#ChargesByDateGrid .k-grid-content, #ApptNoChgsGrid .k-grid-content").scrollTop($(this).scrollTop());
        });
    </script>

  4. Viktor Tachev
    Admin
    Viktor Tachev avatar
    2469 posts

    Posted 26 Jan 2018 Link to this post

    Hello Bradley,


    Thank you for sharing your code with the community. This can help someone trying to implement similar functionality.


    Regards,
    Viktor Tachev
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top