SyncFusion ejTreeGrid - remove scrollbar

Question

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;">

Answer 1

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