UI-Grid sync scroll bar between two grids


I am using ui-grid (ui-grid.info) with angularjs (angularjs.org) and i am trying to sync the scroll bar of two grid. If the user move the scroll bar on one grid he other grid should automatic move.



I create a directive and pass in the id of the grid i want the scroll to sync:


If there is a better way to do this please let me know.

 angular.module('app').directive('syncScroll', [function() {
    var directive = {
        link: link
    return directive;
    function link(scope, element, attrs) {
        setTimeout(function() {
            var $gridToSync = $("#" + attrs['syncScroll']);
            var $horizontalScrollToSync = $gridToSync.find('.horizontal');
            var $verticalScrollToSync = $gridToSync.find('.vertical');

            var $horizontalScroll = element.find('.horizontal');
            var $verticalScroll = element.find('.vertical');

            //Bind scroll Events
            $horizontalScroll.scroll(function () {
            $verticalScroll.scroll(function() {
        }, 300); 

Answered By – Valter

Answer Checked By – Willingham (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.