Fix grid layout
Hi,
I wonder if it's possible to fix the scroll bar at the bottom of the table ando only move vertically through the table information.
I want that the scroll bar remains fixed at the bottom because actually when I do zoom to the page, the scroll bar moves and I want it to stay always displayed at the bottom no matter the zoom percentage of the page.
SIGN IN To post a reply.
5 Replies
Actually my page looks like my image and I want to look like the next image.
Hi Edson,
From your shared screenshot, we suspect that you need to render Scrollbar at the top of the Grid. We have achieved your requirement using dataBound event of the Grid. In the dataBound event of the Grid, we have rendered the ejScroller and append it on the top of the Grid. When we scroll the top, the bottom scrollbar moves by the scroll event of the ejScrollBar. When we scroll the bottom, the top scrollbar moves by the scroll jQuery event.
Refer to the code example:
|
App.Component.html
<div id="scroll"></div>
<ej-grid id="Grid" [dataSource]="gridData" [allowScrolling]="true" (dataBound)="dataBound($event)" [scrollSettings]="scrollSettings" [toolbarSettings]="toolbarItems" >
<e-columns>
<e-column field="Field1" headerText="Employee ID" [isPrimaryKey]="true" width="85" textAlign="right"></e-column>
. . .
</e-columns>
</ej-grid>
App.Component.ts
dataBound(e: any){
var width, height, maximum, viewportSize;
var gridObj = $(".e-grid").ejGrid("instance");
var scroller = gridObj.getScrollObject();
width = viewportSize = gridObj.model.scrollSettings.width - scroller.model.scrollerSize;
height = scroller.model.scrollerSize;
maximum = scroller.content()[0]["scrollWidth"];
$("#scroll").ejScrollBar({ // render the scroller
viewportSize: viewportSize,
width: width,
maximum: maximum - viewportSize,
scroll: ej.proxy(scroller._scrollChanged, scroller),
});
gridObj.element.find(".e-gridheader").append($("#scroll")); // Append it on the top of the Grid
gridObj.element.find(".e-content").scroll(function(args) {
var scroller = gridObj.getScrollObject();
var value = scroller.scrollLeft();
var scrollbar = $("#scroll").ejScrollBar("instance"); //Bind scroll event for the scroller
scrollbar.scroll(value);
});
} |
Refer to the screenshot:-
Refer to the API Link:-
If your requirement is different from above solution, please share us the following details.
- Complete Grid code example with your layout.
- Exact scenario you need to achieve.(Please elaborate the issue you have faced/requirement ).
- Video Demo to replicate the issue or demonstrate your requirement with screenshot.
- Confirm whether you have used EJ1 or EJ2.
Based on the above requested details we will provide solution accordingly.
Regards,
Farveen sulthana T
SIGN IN To post a reply.
