angularjsangular-ui-grid

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.

Thanks.


Solution

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

    data-sync-scroll="displayGrid"
    

    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 () {
                    $horizontalScrollToSync.scrollLeft($(this).scrollLeft()); 
                });
                $verticalScroll.scroll(function() {
                    $verticalScrollToSync.scrollTop($(this).scrollTop());
                }); 
            }, 300); 
        }
     }]);