How should I do it? It seems it uses ejScroller because where I use <ej-scroller>
html being created the same, with such element:
<div class="e-scrollbar e-js e-widget e-vscrollbar" style="height: 622px; width: 18px;">
How should I do it? It seems it uses ejScroller because where I use <ej-scroller>
html being created the same, with such element:
<div class="e-scrollbar e-js e-widget e-vscrollbar" style="height: 622px; width: 18px;">
The Syncfusion TreeGrid has “auto” height support using which user can display all the records in TreeGrid without vertical scrollbar. In this case, the browser scrollbar will appear if the TreeGrid height exceeds the browser view port and this can be achieved by setting sizeSettings.height property as auto. Please refer the below code snippet.
<ej-treegrid id="TreeGridContainer" [dataSource]="treeGridData"
sizeSettings.height="auto"
//…
</ej-treegrid>
We can also display TreeGrid without scrollbar and with a fixed height by using create, collapsed, expanded, actionComplete client side events with some work around. Please refer the below code snippet.
[HTML]
<ej-treegrid id="TreeGridContainer" [dataSource]="treeGridData"
(create)="create($event)" (collapsed)="collapsed($event)" (expanded)="expanded($event)" (rowSelected)="rowSelected($event)" (actionComplete)="actionComplete($event)"
//..
</ej-treegrid>
[TS]
create(args) {
/To update the height of TreeGrid during load time
this.updateTreeHeight();
}
collapsed(args) {
//To update the height of TreeGrid during collapse action
this.updateTreeHeight();
}
expanded(args) {
//To update the height of TreeGrid during expand action
this.updateTreeHeight();
}
rowSelected(args) {
//To update the height of TreeGrid while adding any row
this.updateTreeHeight();
}
actionComplete(args) {
//To update the height of TreeGrid while saving the newly added row and deleting the existing row
if (args.requestType == "addNewRow" || args.requestType == "delete") {
this.updateTreeHeight();
}
}
updateTreeHeight=function() {
var tree = $("#TreeGridContainer").ejTreeGrid("instance"),
toolbar = $("#TreeGridContainer_toolbarItems").height(),
model = tree.model,
totalLen = tree.getExpandedRecords(model.updatedRecords);
if (toolbar == undefined)
toolbar = 0;
//To calculate the height of TreeGrid as per records count
var height = model.rowHeight * totalLen.length + tree.getHeaderContent().height() + toolbar + 4;
//Update height using setModel
var sizesettings = { height: height.toString() };
tree.setModel({ "sizeSettings": sizesettings });
}
Please find the sample link below http://www.syncfusion.com/downloads/support/directtrac/general/ze/TreeGrid_without_scrollbar-1219686615
Regards,
Punniyamoorthi