If I have one page Gant and Scheduler (or Gant and Gant ) . How can I synchronize the move time lines to scroll?
<div id="example" ng-app="KendoDemos" combine-horizontal-scrolls="k-grid-content">
<div ng-controller="MyCtrl" >
<div kendo-grid class="k-grid-content" options="mainGridOptions"></div>
</div>
<div ng-controller="twoCtrl" >
<div kendo-grid class="k-grid-content" options="mainGridOptions"></div>
</div>
</div>
…
myApp.directive('combineHorizontalScrolls', [function(){
var scrollLeft = 0;
function combine(elements){
elements.on('scroll', function(e){
if(e.isTrigger){
e.target.scrollLeft = scrollLeft;
}else {
scrollLeft = e.target.scrollLeft;
elements.each(function (element) {
if( !this.isSameNode(e.target) ){$(this).trigger('scroll');}
});
}
});
}
return {
restrict: 'A',
replace: false,
compile: function(element, attrs){
combine(element.find('.'+attrs.combineHorizontalScrolls));
}
};
}]);
That's because only works in the Grid, but does not work in the Gantt
<div id="example" ng-app="KendoDemos" combine-horizontal-scrolls="k-grid-content">
<div ng-controller="MyCtrl" >
<div kendo-grid class="k-grid-content" options="mainGridOptions"></div>
</div>
<div ng-controller="twoCtrl" >
<div kendo-grid class="k-grid-content" options="mainGridOptions"></div>
</div>
</div>
…
myApp.directive('combineHorizontalScrolls', [function(){
var scrollLeft = 0;
function combine(elements){
elements.on('scroll', function(e){
if(e.isTrigger){
e.target.scrollLeft = scrollLeft;
}else {
scrollLeft = e.target.scrollLeft;
elements.each(function (element) {
if( !this.isSameNode(e.target) ){$(this).trigger('scroll');}
});
}
});
}
return {
restrict: 'A',
replace: false,
compile: function(element, attrs){
combine(element.find('.'+attrs.combineHorizontalScrolls));
}
};
}]);
That's because only works in the Grid, but does not work in the Gantt