|
<style>
.top_scroller {
overflow-x: scroll;
overflow-y: hidden;
margin: 0 16px 0 0;
}
.top_scroller_content {
height: 0.1px;
}
</style>
<script>
function
created(args) {
// render another div element above the
grid content element with respect to the grid width
var
scrollerdiv = document.createElement('div');
scrollerdiv.classList.add('top_scroller');
scrollerdiv.width = this.width;
var contentdiv
= document.createElement('div');
contentdiv.classList.add('top_scroller_content');
contentdiv.style.width = this.element.querySelector('.e-gridcontent
table').offsetWidth + 'px';
scrollerdiv.appendChild(contentdiv);
this.element.insertBefore(
scrollerdiv, this.element.querySelector('.e-gridcontent'));
var
gridscroller = document.querySelector('.e-gridcontent
.e-content');
// dynamically scroll the both div (custom
div and grid content)
scrollerdiv.onscroll = function () {
gridscroller.scrollLeft = scrollerdiv.scrollLeft;
}
gridscroller.onscroll = function () {
scrollerdiv.scrollLeft = gridscroller.scrollLeft;
}
}
</script>
|
