'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.

angularjsangular-ui-grid


Solution 1:[1]

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); 
    }
 }]);

Solution 2:[2]

Great solution above, thanks. Although I think it may be depreciated now. (Not sure , please confirm if you know)

These changes worked for me:

 var $gridToSync = $("#" + attrs['syncScroll']);
 var $target = $gridToSync.find('.ui-grid-viewport');
 var $source = element.find('.ui-grid-viewport');

Swapping out the '.horizontal' '.vertical' for '.ui-grid-viewport'

Solution 3:[3]

I faced with the same problem, let me share my solution.

HTML code:

<div ui-grid="griEmplHist.gridOptions" ui-grid-pagination ui-grid-pinning ui-grid-move-columns ui-grid-grouping ui-grid-auto-resize ui-grid-validate ui-grid-edit ui-grid-cellNav class="grid" style="height: 150px">
             <div class="grid-msg-overlay" ng-show="griEmplHist.loading">
                 <div class="msg">
                     <span>
                         <loader></loader>
                     </span>
                 </div>
             </div>
         </div>
        <div ui-grid="griSavedEmplHist.gridOptions" ui-grid-pagination ui-grid-pinning ui-grid-move-columns ui-grid-grouping ui-grid-auto-resize ui-grid-validate ui-grid-edit ui-grid-cellNav class="grid" style="height: 456px;max-height: 50%;"> 
            <div class="grid-msg-overlay" ng-show="griEmplHist.loading">
                <div class="msg">
                    <span>
                        <loader></loader>
                    </span>
                </div>
            </div>
        </div>

Javascript:

$scope.griEmplHist = {
    gridOptions: {
        columnDefs: [],
        data: [],
        customScroller: function myScrolling(uiGridViewport, scrollHandler) {

            uiGridViewport.on('scroll', function (event) {
                // You should always pass the event to the callback since ui-grid needs it
                scrollHandler(event);

                $('div[ui-grid="griSavedEmplHist.gridOptions"] .ui-grid-viewport').scrollLeft(uiGridViewport[0].scrollLeft);
            });
        }
    }
};

$scope.griSavedEmplHist = {
    gridOptions: {
        columnDefs: [],
        data: [],
        customScroller: function myScrolling(uiGridViewport, scrollHandler) {

            uiGridViewport.on('scroll', function (event) {
                // You should always pass the event to the callback since ui-grid needs it
                scrollHandler(event);

                $('div[ui-grid="griEmplHist.gridOptions"] .ui-grid-viewport').scrollLeft(uiGridViewport[0].scrollLeft);
            });
        },
        onRegisterApi: function (gridApi) {
            $scope.griSavedEmplHist.gridApi = gridApi;
        }
    }
};

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Valter
Solution 2 Rod
Solution 3 Gondor József

Related Questions