SyncFusion ejTreeGrid - remove scrollbar

独自空忆成欢 提交于 2020-01-25 07:40:10

问题


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

回答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



来源:https://stackoverflow.com/questions/50233942/syncfusion-ejtreegrid-remove-scrollbar

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!