$("#Grid").ejGrid({
// the datasource "window.gridData" is referred from jsondata.min.js
dataSource: window.gridData,
allowScrolling: true,
create : function (args) {
var width, height, maximum, viewportSize;
var scroller = this.getScrollObject();
width = viewportSize = this.model.scrollSettings.width - scroller.model.scrollerSize;
height = scroller.model.scrollerSize;
maximum = scroller.content()[0]["scrollWidth"];
$("#scroll").ejScrollBar({
viewportSize: viewportSize,
width: width,
maximum: maximum - viewportSize,
scroll: ej.proxy(scroller._scrollChanged, scroller),
thumbEnd: ej.proxy(scroller._thumbEnd, scroller),
thumbStart: ej.proxy(scroller._thumbStart, scroller),
thumbMove: ej.proxy(scroller._thumbMove, scroller),
});
var scrollbar = $("#scroll").ejScrollBar("instance");
if (scroller.model.enableRTL) {
scrollbar._scrollData.enableRTL = true;
}
this.element.find(".e-gridheader").append($("#scroll"));
},
scrollSettings: { width: 600,height: 300 },
columns: [
-------------------------
]
});
$('#Grid').find(".e-content").scroll(function (args) {
var grid = $("#Grid").ejGrid("instance");
var scroller = grid.getScrollObject();
var scrollLeft = scroller._rtlScrollLeftValue;
var value = scroller.scrollLeft();
if (grid.model.enableRTL) {
value = value - scrollLeft;
}
var scrollbar = $("#scroll").ejScrollBar("instance");
scrollbar.scroll(value);
});
}); |