|
App.component.ts
dataBound(args) {
var scroll = document.getElementById('wrapper1');
var content = document.getElementsByClassName('e-gridcontent')[0]; //get content
var grid = (document.getElementsByClassName('e-grid')[0] as any).ej2_instances[0];
grid.element.insertBefore(scroll, content); //by using insert before function we have place the scrollbar between the content and header
var wrapper1 = document.getElementById("wrapper1");
wrapper1.onscroll = function () { //bind onscroll event and
var grid = (document.getElementsByClassName('e-grid')[0] as any).ej2_instances[0];
grid.getContent().firstElementChild.scrollLeft = wrapper1.scrollLeft; // set the wrapper1 scrollLeft to the Grid scrollLeft
};
(this.grid.getContent().firstElementChild as any).onscroll = function () { //bind onscroll in grid scroller
var grid = (document.getElementsByClassName('e-grid')[0] as any).ej2_instances[0];
wrapper1.scrollLeft = grid.getContent().firstElementChild.scrollLeft; // set the Grid scrollLeft to the wrapper1 scrollLeft
};
}
}
|
|
App.component.html
<div class="control-section">
<div id="wrapper1">
<div id="div1"></div>
</div>
<ejs-grid
#grid
[dataSource]="data"
allowPaging="true"
height="500px"
width="600px"
(dataBound)="dataBound($event)"
[pageSettings]="pageSettings"
>
<e-columns>
. . . . . . . . . .
</e-columns>
</ejs-grid>
</div> |
|
index.html
<style>
#wrapper1{
width: 580px;
overflow-x: scroll;
overflow-y:hidden;
}
#wrapper1 {height: 20px; }
#div1 {
width:800px;
height: 20px;
}
</style>
|
