ejTreeGrid

22 Apr 201924 minutes to read

Custom Design for HTML TreeGrid control.

Example

  • HTML
  • <ej-treegrid id="TreeGridControl" [dataSource]="projectData">
    
    </ej-treegrid>
  • TS
  • export class AppComponent {
        
        public  projectData;
    
            constructor()
            {
              this.projectData = taskCollection; 
            }
    }

    Requires

    • module:jQuery
    • module:jquery.globalize.js
    • module:jquery.easing.1.3.js
    • module:jsrender.js
    • module:ej.web.all.js

    Members

    allowColumnReordering boolean

    Enables or disables the option for column reordering

    Default Value

    • false

    Example

  • HTML
  • <ej-treegrid id="TreeGridControl"
        [allowColumnReordering]= "true">
    </ej-treegrid>

    allowColumnResize boolean

    Enables or disables the ability to resize the column width interactively.

    Default Value

    • false

    Example

  • HTML
  • <ej-treegrid id="TreeGridControl"
        [allowColumnResize]= "true">
    </ej-treegrid>

    allowDragAndDrop boolean

    Enables or disables the ability to drag and drop the row interactively to reorder the rows.

    Default Value

    • false

    Example

  • HTML
  • <ej-treegrid id="TreeGridControl"
        [allowDragAndDrop]= "true">
    </ej-treegrid>

    allowFiltering boolean

    Enables or disables the ability to filter the data on all the columns. Enabling this property will display a row with editor controls corresponding to each column. You can restrict filtering on particular column by disabling this property directly on that column instance itself.

    Default Value

    • false

    Example

  • HTML
  • <ej-treegrid id="TreeGridControl"
        [allowFiltering]= "true">
    </ej-treegrid>

    allowKeyboardNavigation boolean

    Enables or disables keyboard navigation.

    Default Value

    • true

    Example

  • HTML
  • <ej-treegrid id="TreeGridControl"
        [allowKeyboardNavigation]= "true">
    </ej-treegrid>

    allowMultiSorting boolean

    Enables or disables the ability to sort the rows based on multiple columns/fields by clicking on each column header. Rows will be sorted recursively on clicking the column headers.

    Default Value

    • false

    Example

  • HTML
  • <ej-treegrid id="TreeGridControl"
        [allowMultiSorting]= "true">
    </ej-treegrid>

    allowPaging boolean

    Enables/disables pagination of rows in TreeGrid

    Default Value

    • false

    Example

  • HTML
  • <ej-treegrid id="TreeGridControl"
        [allowPaging]= "true">
    </ej-treegrid>

    allowSearching boolean

    Enables/disables pagination of rows in TreeGrid

    Default Value

    • false

    Example

  • HTML
  • <ej-treegrid id="TreeGridControl"
        [allowSearching]= "true">
    </ej-treegrid>

    allowSelection boolean

    Enables or disables the ability to select a row interactively.

    Default Value

    • true

    Example

  • HTML
  • <ej-treegrid id="TreeGridControl"
        [allowSelection]= "true">
    </ej-treegrid>

    allowSorting boolean

    Enables or disables the ability to sort the rows based on a single field/column by clicking on that column header. When enabled, rows can be sorted only by single field/column.

    Default Value

    • false

    Example

  • HTML
  • <ej-treegrid id="TreeGridControl"
        [allowSorting]= "true">
    </ej-treegrid>

    allowTextWrap boolean

    Gets or sets a value that indicates whether the Content will wrap to the next line if the content exceeds the boundary of the Column Cells.

    Default Value

    • false

    Example

  • HTML
  • <ej-treegrid id="TreeGridControl"
        [allowTextWrap]= "true">
    </ej-treegrid>

    altRowTemplateID string

    Specifies the id of the template that has to be applied for alternate rows.

    Default Value

    • ””

    Example

  • HTML
  • <ej-treegrid id="TreeGridControl"
        altRowTemplateID="altRowCustomTemplate">
    </ej-treegrid>

    cellTooltipTemplate string

    Specifies the template for cell tooltip

    Default Value

    • null

    Example

  • HTML
  • <ej-treegrid id="TreeGridControl"
        cellTooltipTemplate="cellTooltipTemplate">
    </ej-treegrid>

    childMapping string

    Specifies the mapping property path for sub tasks in datasource

    Default Value

    • ””

    Example

  • HTML
  • <ej-treegrid id="TreeGridControl"
        childMapping="Children">
    </ej-treegrid>

    collapsibleTotalSummary boolean

    Specifies the visibility of expander button in total summary row. By default, cells in the first column contain the expander button.

    Default Value

    • false

    Example

  • HTML
  • <ej-treegrid id="TreeGridControl"
        [collapsibleTotalSummary]= "true">
    </ej-treegrid>

    columnDialogFields array

    To Specify the column fields to be displayed in the dialog while inserting a column using column menu.

    Default Value

    • []

    Example

    <ej-treegrid id="TreeGridControl"
        [columnDialogFields]= "columnDialogFields">
    </ej-treegrid>
    export class AppComponent {
        public columnDialogFields: any;
        constructor() {
            this.columnDialogFields = ["field", "headerText", "editType", "width", "visible", "allowSorting", "textAlign", "headerTextAlign"];
        }
    }

    columnResizeSettings object

    Specifies the settings for column resize

    columnResizeSettings.columnResizeMode enum

    Specifies the mode for column resizing

    Name Description
    FixedColumns At load time column are rendered with given width value, while resizing the column only current column width is changed
    Normal At load time columns are stretched with control width,while resizing the column, current column width updated based on next column
    NextColumn In this mode columns are stretched with control width in load time and on resizing action.

    Default Value

    • ej.TreeGrid.ColumnResizeMode.Normal

    Example

    <ej-treegrid id="TreeGridControl"
        [columnResizeSettings]= "columnResizeSettings">
    </ej-treegrid>
    export class AppComponent {
        public columnResizeSettings: any;
        constructor() {
            this.columnResizeSettings = { columnResizeMode : ej.TreeGrid.ColumnResizeMode.FixedColumns};
        }
    }

    columns array

    Option for adding columns; each column has the option to bind to a field in the dataSource.

    Example

    <ej-treegrid id="TreeGridControl"
        [columns]= "columns">
    </ej-treegrid>
    export class AppComponent {
        public columns: any;
        constructor() {
            this.columns =  [{ field: "Name", headerText: "Name", isTemplateColumn: true, templateID: "customColumnTemplate" },
                              { field: "Type", headerText: "Type" },
                              { field: "DateCreated", headerText: "Date Created" },
                              { field: "DateModified", headerText: "Date Modified" }];
        }
    }

    columns.allowCellSelection boolean

    Enables/disables cell selection.

    Default Value

    • false

    Example

    <ej-treegrid id="TreeGridControl"
        [columns]= "columns">
    </ej-treegrid>
    export class AppComponent {
        public columns: any;
        constructor() {
            this.columns = [{ allowCellSelection: true },{allowCellSelection: false }];
        }
    }

    columns.allowEditing boolean

    Enables or disables the ability to edit a row or cell.

    Default Value

    • false

    Example

    <ej-treegrid id="TreeGridControl"
        [columns]= "columns">
    </ej-treegrid>
    export class AppComponent {
        public columns: any;
        constructor() {
            this.columns = [{ allowEditing: true },{ allowEditing: false }];
        }
    }

    columns.allowFiltering boolean

    Enables or disables the ability to filter the rows based on this column.

    Default Value

    • false

    Example

    <ej-treegrid id="TreeGridControl"
        [columns]= "columns">
    </ej-treegrid>
    export class AppComponent {
        public columns: any;
        constructor() {
            this.columns = [{ allowFiltering: true },{allowFiltering: false }];
        }
    }

    columns.allowFilteringBlankContent boolean

    Enables the blanks option in ejDropDownList mapped in TreeGrid column

    Default Value

    • true

    Example

    <ej-treegrid id="TreeGridControl"
        [columns]= "columns">
    </ej-treegrid>
    export class AppComponent {
        public columns: any;
        constructor() {
            this.columns =  [{ allowFilteringBlankContent: false }];
        }
    }

    columns.allowFreezing boolean

    Enables or disables the ability to freeze/unfreeze the columns

    Default Value

    • false

    Example

    <ej-treegrid id="TreeGridControl"
        [columns]= "columns">
    </ej-treegrid>
    export class AppComponent {
        public columns: any;
        constructor() {
            this.columns =  [{ allowFreezing: true }];
        }
    }

    columns.allowSorting boolean

    Enables or disables the ability to sort the rows based on this column/field.

    Default Value

    • false

    Example

    <ej-treegrid id="TreeGridControl"
        [columns]= "columns">
    </ej-treegrid>
    export class AppComponent {
        public columns: any;
        constructor() {
            this.columns = [{ allowSorting: true },{allowSorting: false }];
        }
    }

    columns.angularTemplate string

    Specifies the template ID or the template string of the AngularJS script element to enable column template for a column.

    Default Value

    • ””

    Example

    <ej-treegrid id="TreeGridControl"
        [columns]= "columns">
    </ej-treegrid>
    export class AppComponent {
        public columns: any;
        constructor() {
            this.columns = [{
         isTemplateColumn: true,
         angularTemplate: "#ngColumnTemplate"  
       }];
        }
    }

    columns.clipMode enum

    Sets the clip mode for TreeGrid cell as ellipsis or clipped content(both header and content)

    Name Description
    Ellipsis Shows ellipsis for the overflown cell.
    Clip Truncate the text in the cell.

    Default Value

    • ej.TreeGrid.ClipMode.Clip

    Example

    <ej-treegrid id="TreeGridControl"
        [columns]= "columns">
    </ej-treegrid>
    export class AppComponent {
        public columns: any;
        constructor() {
            this.columns = [{ clipMode: ej.TreeGrid.ClipMode.Clip},{clipMode: ej.TreeGrid.ClipMode.Ellipsis}];
        }
    }

    columns.commands array

    Gets or sets an object to define a command column in TreeGrid.

    Default Value

    • []

    Example

    <ej-treegrid id="TreeGridControl"
        [columns]= "columns">
    </ej-treegrid>
    export class AppComponent {
        public columns: any;
        constructor() {
            this.columns = [{
                  headerText: "Manage Records",
                  commands: [
                      { type: ej.TreeGrid.UnboundType.Edit, buttonOptions: { text: "Edit" } },
                      { type: ej.TreeGrid.UnboundType.Delete, buttonOptions: { text: "Delete" } },
                      { type: ej.TreeGrid.UnboundType.Save, buttonOptions: { text: "Save" } },
                      { type: ej.TreeGrid.UnboundType.Cancel, buttonOptions: { text: "Cancel" } }
                   ],
                 }
        ];
        }
    }

    columns.commands.buttonOptions object

    Gets or sets an object to customize command button with available ejButton properties.

    Default Value

    • -

    Example

    <ej-treegrid id="TreeGridControl"
        [columns]= "columns">
    </ej-treegrid>
    export class AppComponent {
        public columns: any;
        constructor() {
            this.columns = [{commands: [buttonOptions: { text: "Edit" } }]}];
        }
    }

    columns.commands.type enum

    Gets or sets a value that define the command column buttons to be displayed.

    Default Value

    • -
    Name Description
    Edit Unbound type to perform edit action
    Save Unbound type to perform save action
    Delete Unbound type to perform delete action
    Cancel Unbound type to perform cancel action

    Example

    <ej-treegrid id="TreeGridControl"
        [columns]= "columns">
    </ej-treegrid>
    export class AppComponent {
        public columns: any;
        constructor() {
            this.columns =[          
               {
                  headerText: "Manage Records",
                  commands: [
                      { type: ej.TreeGrid.UnboundType.Edit, buttonOptions: { text: "Edit" } },
                      { type: ej.TreeGrid.UnboundType.Delete, buttonOptions: { text: "Delete" } },
                      { type: ej.TreeGrid.UnboundType.Save, buttonOptions: { text: "Save" } },
                      { type: ej.TreeGrid.UnboundType.Cancel, buttonOptions: { text: "Cancel" } }
                   ]             
               }
    
            ];
        }
    }

    columns.displayAsCheckbox boolean

    Gets or sets a value that indicates to display a column value as checkbox or string

    Default Value

    • false

    Example

    <ej-treegrid id="TreeGridControl"
        [columns]= "columns">
    </ej-treegrid>
    export class AppComponent {
        public columns: any;
        constructor() {
            this.columns = [{ field: "Approved", displayAsCheckbox: true, editType: ej.TreeGrid.EditingType.Boolean}]
        }
    }

    columns.dropdownData string

    To bind the dropdown data for TreeGrid column mapped with ejDropDownList

    Default Value

    • -

    Example

    <ej-treegrid id="TreeGridControl"
        [columns]= "columns">
    </ej-treegrid>
    export class AppComponent {
        public columns: any;
        public dataSource:any;
        constructor() {
            this.dataSource = [
                        //
              { id: 4, text: "Critical", value: "Critical" }
            ];
            this.columns = [                    
    { field: "priority", headerText: "Priority", editType: ej.TreeGrid.EditingType.Dropdown, dropdownData: this.dataSource}]
        }
    }

    columns.editParams Object

    To customize the ej controls defined in TreeGrid column with their native property.

    Default Value

    • -

    Example

    <ej-treegrid id="TreeGridControl"
        [columns]= "columns">
    </ej-treegrid>
    export class AppComponent {
        public columns: any;
        constructor() {
            this.columns =[                    
    { field: "priority", headerText: "Priority", editType: ej.TreeGrid.EditingType.Dropdown, dropdownData: stageData, editParams: { fields: { text: "text", value: "value" } } }];
        }
    }

    columns.editTemplate Object

    Gets or sets a template that displays a custom editor for editing the column values.

    Default Value

    • null

    Example

    <ej-treegrid id="TreeGridControl"
        [columns]= "columns">
    </ej-treegrid>
    export class AppComponent {
        public columns: any;
        constructor() {
            this.columns = [
                     { field: "taskName", headerText: "Task Name", editType: "stringedit",
                     editTemplate: {
                            create: function () {
                                    return "<input>";
                            },
                            write: function (args) {
                                    obj = $('#TreeGridContainer').ejTreeGrid('instance');
                                    var data = ej.DataManager(obj.model.flatRecords).executeLocal(new ej.Query().select("taskName"));
                                    args.element.ejAutocomplete({ width: "100%", height:"28px", dataSource: data, enableDistinct: true, value: args.rowdata !== undefined ? args.rowdata["taskName"] : "" });
                            },
                            read: function (args) {
                                    args.ejAutocomplete('suggestionList').css('display', 'none');
                                    return args.ejAutocomplete("getValue");
                            },
                     },
                ]
        }
    }

    columns.editType enum

    Specifies the edit type of the column.

    Name Description
    String It Specifies String edit type.
    Boolean It Specifies Boolean edit type.
    Numeric It Specifies Numeric edit type.
    Dropdown It Specifies Dropdown edit type.
    DatePicker It Specifies DatePicker edit type.
    DateTimePicker It Specifies DateTimePicker edit type.
    Maskedit It Specifies Maskedit edit type.

    Default Value

    • ej.TreeGrid.EditingType.String

    Example

    <ej-treegrid id="TreeGridControl"
        [columns]= "columns">
    </ej-treegrid>
    export class AppComponent {
        public columns: any;
        constructor() {
            this.columns =[{ editType: ej.TreeGrid.EditingType.String},{editType: ej.TreeGrid.EditingType.Boolean}]
        }
    }

    columns.field string

    Specifies the name of the field from the dataSource to bind with this column.

    Default Value

    • ””

    Example

    <ej-treegrid id="TreeGridControl"
        [columns]= "columns">
    </ej-treegrid>
    export class AppComponent {
        public columns: any;
        constructor() {
            this.columns = [{ field: "Name"},{field: "Type"}];
        }
    }

    columns.filterEditType enum

    Specifies the type of the editor control to be used to filter the rows.

    Name Description
    String It Specifies String edit type.
    Boolean It Specifies Boolean edit type.
    Numeric It Specifies Numeric edit type.
    Dropdown It Specifies Dropdown edit type.
    DatePicker It Specifies DatePicker edit type.
    DateTimePicker It Specifies DateTimePicker edit type.

    Default Value

    • ej.TreeGrid.EditingType.String

    Example

    <ej-treegrid id="TreeGridControl"
        [columns]= "columns">
    </ej-treegrid>
    export class AppComponent {
        public columns: any;
        constructor() {
            this.columns = [{ filterEditType: ej.TreeGrid.EditingType.String},{filterEditType: ej.TreeGrid.EditingType.Boolean}];
        }
    }

    columns.format object

    Specifies the display format of a column

    Default Value

    • null

    Example

    <ej-treegrid id="TreeGridControl"
        [columns]= "columns">
    </ej-treegrid>
    export class AppComponent {
        public columns: any;
        constructor() {
            this.columns =  [{ field: "Currency",  format: "{0:C2}" }, //... }];
        }
    }

    columns.headerTemplateID string

    Specifies the header template value for the column header

    Default Value

    • ””

    Example

    <ej-treegrid id="TreeGridControl"
        [columns]= "columns">
    </ej-treegrid>
    export class AppComponent {
        public columns: any;
        constructor() {
            this.columns =  [{ field: "Currency",  headerTemplateID: "#headerTemplate"}, //... }];
        }
    }

    columns.headerText string

    Header text of the column.

    Default Value

    • null

    Example

    <ej-treegrid id="TreeGridControl"
        [columns]= "columns">
    </ej-treegrid>
    export class AppComponent {
        public columns: any;
        constructor() {
            this.columns = [{ headerText: "Name"},{headerText: "Type"}];
        }
    }

    columns.headerTextAlign enum

    Specifies the alignment of the column header text

    Name Description
    Left align the header text to the left
    Right align the header text to the right
    Justify To justify the header alignment
    Center align the header text to the center

    Default Value

    • ej.TextAlign.Left

    Example

    <ej-treegrid id="TreeGridControl"
        [columns]= "columns">
    </ej-treegrid>
    export class AppComponent {
        public columns: any;
        constructor() {
            this.columns =[{  headerTextAlign: ej.TextAlign.Center},{headerTextAlign: ej.TextAlign.Right}];
        }
    }

    columns.headerTooltip string

    Sets the tooltip template for the column header

    Default Value

    • null

    Example

    <ej-treegrid id="TreeGridControl"
        [columns]= "columns">
    </ej-treegrid>
    export class AppComponent {
        public columns: any;
        constructor() {
            this.columns =[{  headerTooltip: "#headerTooltip"}];
        }
    }

    columns.isFrozen boolean

    Specifies whether the column is frozen

    Default Value

    • false

    Example

    <ej-treegrid id="TreeGridControl"
        [columns]= "columns">
    </ej-treegrid>
    export class AppComponent {
        public columns: any;
        constructor() {
            this.columns = [{  isFrozen: true}];
        }
    }

    columns.isTemplateColumn boolean

    Specifies whether the column is a template column

    Default Value

    • false

    Example

    <ej-treegrid id="TreeGridControl"
        [columns]= "columns">
    </ej-treegrid>
    export class AppComponent {
        public columns: any;
        constructor() {
            this.columns =  [{
                isTemplateColumn: true,
                template: ""
            }];
        }
    }

    columns.priority number

    Gets or sets the priority value of the column. It is used to show/hide TreeGrid columns in responsive mode.

    Default Value

    • -1

    Example

    <ej-treegrid id="TreeGridControl"
        [columns]= "columns">
    </ej-treegrid>
    export class AppComponent {
        public columns: any;
        constructor() {
            this.columns =  [
                    { field: "taskID", headerText: "Task Id", width: "45", editType: ej.TreeGrid.EditingType.Numeric },
                    { field: "taskName", headerText: "Task Name", width: "90", editType: "stringedit" },
                    { field: "startDate", headerText: "Start Date", editType: "datepicker", format: dateFormat },
                    { field: "endDate", headerText: "End Date", format: dateFormat, editType: "datepicker", priority:5 },
                    { field: "duration", headerText: "Duration", editType: ej.TreeGrid.EditingType.Numeric, priority: 6 },
                    { field: "progress", headerText: "Progress", editType: ej.TreeGrid.EditingType.Numeric,priority:6 }
                ];
        }
    }

    columns.showCheckbox boolean

    Enables or disables the checkbox visibility in a column for checkbox selection.

    Default Value

    • false

    Example

    <ej-treegrid id="TreeGridControl"
        [columns]= "columns">
    </ej-treegrid>
    export class AppComponent {
        public columns: any;
        constructor() {
            this.columns =   [{ field: "name",showCheckbox: true}];
        }
    }

    columns.showInColumnChooser boolean

    We can include or exclude particular column from column visibility list in column menu.

    Default Value

    • true

    Example

    <ej-treegrid id="TreeGridControl"
        [columns]= "columns">
    </ej-treegrid>
    export class AppComponent {
        public columns: any;
        constructor() {
            this.columns =   [{ field: "name",showInColumnChooser: true}];
        }
    }

    columns.template string

    Specifies the template string of the script element to enable column template for a column.

    Default Value

    • ””

    Example

    <ej-treegrid id="TreeGridControl"
        [columns]= "columns">
    </ej-treegrid>
    export class AppComponent {
        public columns: any;
        constructor() {
            this.columns =  [{
             isTemplateColumn: true,
             template: "<script type="text/x-jsrender" id="columnTemplate">
                       <div style="display:inline-block;">
                       <img src="../images/treeGrid/image.png" height="40" /></div></script>"
               }];
        }
    }

    columns.templateID string

    Specifies the template ID of the script element to enable column template for a column.

    Default Value

    • ””

    Example

    <ej-treegrid id="TreeGridControl"
        [columns]= "columns">
    </ej-treegrid>
    export class AppComponent {
        public columns: any;
        constructor() {
            this.columns =  [{
            isTemplateColumn: true,
            templateID: "columnTemplate"
        }];
        }
    }

    columns.textAlign enum

    Specifies the text alignment for the column

    Name Description
    Left align the content text to the left
    Right align the content text to the right
    Justify To justify the content alignment
    Center align the content text to the center

    Default Value

    • ej.TextAlign.Left

    Example

    <ej-treegrid id="TreeGridControl"
        [columns]= "columns">
    </ej-treegrid>
    export class AppComponent {
        public columns: any;
        constructor() {
            this.columns =  [{  textAlign: ej.TextAlign.Center},{ textAlign: ej.TextAlign.Right}];
        }
    }

    columns.tooltip string

    Sets the tooltip template for the specific column.

    Default Value

    • null

    Example

    <ej-treegrid id="TreeGridControl"
        [columns]= "columns">
    </ej-treegrid>
    export class AppComponent {
        public columns: any;
        constructor() {
            this.columns =  [{  tooltip: "#tooltip" }];
        }
    }

    columns.validationRules Object

    specifies the conditions for saving data to the database while adding or editing the fields.

    Example

    <ej-treegrid id="TreeGridControl"
        [columns]= "columns">
    </ej-treegrid>
    export class AppComponent {
        public columns: any;
        constructor() {
            this.columns = [{field:"TaskID", validationRules: { required: true, number: true }},{field:"TaskName"},{field:"StartDate"}];
        }
    }

    columns.visible boolean

    Controls the visibility of the column.

    Default Value

    • true

    Example

    <ej-treegrid id="TreeGridControl"
        [columns]= "columns">
    </ej-treegrid>
    export class AppComponent {
        public columns: any;
        constructor() {
            this.columns = [{ field: "name",visible: true},{field: "Type",visible: false}];
        }
    }

    columns.width number

    Gets or sets a value for TreeGrid column width

    Default Value

    • -

    Example

    <ej-treegrid id="TreeGridControl"
        [columns]= "columns">
    </ej-treegrid>
    export class AppComponent {
        public columns: any;
        constructor() {
            this.columns = [{ field: "name",width: 100},{field: "Type",width: 150}];
        }
    }

    commonWidth number

    Defines the common width for all the columns in TreeGrid

    Default Value

    • 150

    Example

  • HTML
  • <ej-treegrid id="TreeGridControl"
        [commonWidth]="180">
    </ej-treegrid>

    contextMenuSettings object

    Options for displaying and customizing context menu items.

    contextMenuSettings.contextMenuItems array

    Option for adding items to context menu.

    Default Value

    • []

    Example

    <ej-treegrid id="TreeGridControl"
        [contextMenuSettings]= "contextMenuSettings">
    </ej-treegrid>
    export class AppComponent {
        public contextMenuSettings: any;
        constructor() {
            this.contextMenuSettings = {  contextMenuItems: [ej.TreeGrid.ContextMenuItems.Add,ej.TreeGrid.ContextMenuItems.Edit] };
        }
    }

    contextMenuSettings.showContextMenu boolean

    Shows/hides the context menu.

    Default Value

    • false

    Example

    <ej-treegrid id="TreeGridControl"
        [contextMenuSettings]= "contextMenuSettings">
    </ej-treegrid>
    export class AppComponent {
        public contextMenuSettings: any;
        constructor() {
            this.contextMenuSettings = {  showContextMenu:  true };
        }
    }

    cssClass string

    Specify the CSS class for TreeGrid to achieve custom theme.

    Default Value

    • ””

    Example

  • HTML
  • <ej-treegrid id="TreeGridControl"
        cssClass = "gradient-lime">
    </ej-treegrid>

    dataSource array

    Specifies hierarchical or self-referential data to populate the TreeGrid.

    Default Value

    • null

    Example

    <ej-treegrid id="TreeGridControl"
        [dataSource]= "dataSource">
    </ej-treegrid>
    export class AppComponent {
        public dataSource: any;
        constructor() {
            this.dataSource = [{Id:2,TaskName:"Testing",startDate:"12/1/2000",Duration:5 }];
        }
    }

    detailsTemplate string

    Specifies the template for details view

    Default Value

    • ””

    Example

  • HTML
  • <ej-treegrid id="TreeGridControl"
        detailsTemplate= "#detailsTemplate">
    </ej-treegrid>

    detailsRowHeight number

    Specifies the row height of the details view

    Default Value

    • 100

    Example

  • HTML
  • <ej-treegrid id="TreeGridControl"
        [detailsRowHeight]= "150">
    </ej-treegrid>

    dragTooltip object

    Options for displaying and customizing the tooltip. This tooltip will show the preview of the row that is being dragged.

    dragTooltip.showTooltip boolean

    Specifies whether to show tooltip while dragging a row.

    Default Value

    • true

    Example

    <ej-treegrid id="TreeGridControl"
        [dragTooltip]= "dragTooltip">
    </ej-treegrid>
    export class AppComponent {
        public dragTooltip: any;
        constructor() {
            this.dragTooltip = { showTooltip:  true };
        }
    }

    dragTooltip.tooltipItems array

    Option to add field names whose corresponding values in the dragged row needs to be shown in the preview tooltip.

    Default Value

    • []

    Example

    <ej-treegrid id="TreeGridControl"
        [dragTooltip]= "dragTooltip">
    </ej-treegrid>
    export class AppComponent {
        public dragTooltip: any;
        constructor() {
            this.dragTooltip = { tooltipItems: ["TaskName","TaskID","StartDate"] };
        }
    }

    dragTooltip.tooltipTemplate string

    Custom template for that tooltip that is shown while dragging a row.

    Default Value

    • null

    Example

    <ej-treegrid id="TreeGridControl"
        [dragTooltip]= "dragTooltip">
    </ej-treegrid>
    export class AppComponent {
        public dragTooltip: any;
        constructor() {
            this.dragTooltip = { tooltipTemplate: "" };
        }
    }

    editSettings object

    Options for enabling and configuring the editing related operations.

    editSettings.allowAdding boolean

    Enables or disables the button to add new row in context menu as well as in toolbar.

    Default Value

    • true

    Example

    <ej-treegrid id="TreeGridControl"
        [editSettings]= "editSettings">
    </ej-treegrid>
    export class AppComponent {
        public editSettings: any;
        constructor() {
            this.editSettings = {allowAdding : true};
        }
    }

    editSettings.allowDeleting boolean

    Enables or disables the button to delete the selected row in context menu as well as in toolbar.

    Default Value

    • true

    Example

    <ej-treegrid id="TreeGridControl"
        [editSettings]= "editSettings">
    </ej-treegrid>
    export class AppComponent {
        public editSettings: any;
        constructor() {
            this.editSettings = {allowDeleting : true};
        }
    }

    editSettings.allowEditing boolean

    Enables or disables the ability to edit a row or cell.

    Default Value

    • false

    Example

    <ej-treegrid id="TreeGridControl"
        [editSettings]= "editSettings">
    </ej-treegrid>
    export class AppComponent {
        public editSettings: any;
        constructor() {
            this.editSettings = {allowEditing : true};
        }
    }

    editSettings.batchEditSettings object

    specifies the batch edit mode in TreeGrid.

    editSettings.batchEditSettings.editMode enum

    Specifies the batch edit mode whether it is cell, row or dialog.

    Name Description
    Cell you can edit a cell
    Row you can edit a row
    Dialog you can edit a row in dialog form

    Default Value

    • ej.TreeGrid.BatchEditMode.Cell

    Example

    <ej-treegrid id="TreeGridControl"
        [editSettings]= "editSettings">
    </ej-treegrid>
    export class AppComponent {
        public editSettings: any;
        constructor() {
            this.editSettings = {batchEditSettings:{editMode : ej.TreeGrid.BatchEditMode.Row};
        }
    }

    editSettings.beginEditAction enum

    Specifies the mouse action whether single click or double click to begin the editing

    Name Description
    DblClick you can begin the editing at double click
    Click you can begin the editing at single click

    Default Value

    • ej.TreeGrid.BeginEditAction.DblClick

    Example

    <ej-treegrid id="TreeGridControl"
        [editSettings]= "editSettings">
    </ej-treegrid>
    export class AppComponent {
        public editSettings: any;
        constructor() {
            this.editSettings = {beginEditAction : ej.TreeGrid.BeginEditAction.Click};
        }
    }

    editSettings.dialogEditorTemplateID string

    Specifies the template ID for the custom dialog.

    Default Value

    • null

    Example

    <ej-treegrid id="TreeGridControl"
        [editSettings]= "editSettings">
    </ej-treegrid>
    export class AppComponent {
        public editSettings: any;
        constructor() {
            this.editSettings = {dialogEditorTemplateID  : ""};
        }
    }

    editSettings.editMode enum

    specifies the edit mode in TreeGrid , “cellEditing” is for cell type editing and “rowEditing” is for entire row.

    Name Description
    CellEditing you can edit a cell.
    RowEditing you can edit a row.
    DialogEditing you can edit a row in dialog form.
    BatchEditing you can edit and save bulk of records

    Default Value

    • ej.TreeGrid.EditMode.CellEditing

    Example

    <ej-treegrid id="TreeGridControl"
        [editSettings]= "editSettings">
    </ej-treegrid>
    export class AppComponent {
        public editSettings: any;
        constructor() {
            this.editSettings = {editMode : ej.TreeGrid.EditMode.CellEditing};
        }
    }

    editSettings.rowPosition enum

    Specifies the position where the new row has to be added.

    Name Description
    Top you can add a new row at top.
    Bottom you can add a new row at bottom.
    Above you can add a new row to above selected row.
    Below you can add a new row to below selected row.
    Child you can add a new row as a child for selected row.

    Default Value

    • “top”

    Example

    <ej-treegrid id="TreeGridControl"
        [editSettings]= "editSettings">
    </ej-treegrid>
    export class AppComponent {
        public editSettings: any;
        constructor() {
            this.editSettings = {rowPosition : ej.TreeGrid.RowPosition.Bottom} ;
        }
    }

    editSettings.showDeleteConfirmDialog boolean

    Enable or disable the confirmation dialog while deleting the record.

    Default Value

    • false

    Example

    <ej-treegrid id="TreeGridControl"
        [editSettings]= "editSettings">
    </ej-treegrid>
    export class AppComponent {
        public editSettings: any;
        constructor() {
            this.editSettings = {showDeleteConfirmDialog : true};
        }
    }

    enableAltRow boolean

    Specifies whether to render alternate rows in different background colors.

    Default Value

    • true

    Example

  • HTML
  • <ej-treegrid id="TreeGridControl"
        [enableAltRow]= "false">
    </ej-treegrid>

    enableCollapseAll boolean

    Specifies whether to load all the rows in collapsed state when the TreeGrid is rendered for the first time.

    Default Value

    • false

    Example

  • HTML
  • <ej-treegrid id="TreeGridControl"
        [enableCollapseAll]= "false">
    </ej-treegrid>

    enableLoadOnDemand boolean

    Gets or sets a value that indicates whether to enable load on demand approach, for rendering child records and page records.

    Default Value

    • false

    Example

  • HTML
  • <ej-treegrid id="TreeGridControl"
        [enableLoadOnDemand]= "false">
    </ej-treegrid>

    enableResize boolean

    Specifies whether to resize TreeGrid whenever window size changes.

    Default Value

    • false

    Example

  • HTML
  • <ej-treegrid id="TreeGridControl"
        [enableResize]= "false">
    </ej-treegrid>

    enableVirtualization boolean

    Specifies whether to render only the visual elements that are visible in the UI. When you enable this property, it will reduce the loading time for loading large number of records.

    Default Value

    • false

    Example

  • HTML
  • <ej-treegrid id="TreeGridControl"
        [enableVirtualization]= "false">
    </ej-treegrid>

    expandStateMapping string

    Specifies the mapping property path for the expand status of a record in data source.

    Default Value

    • ””

    Example

  • HTML
  • <ej-treegrid id="TreeGridControl"
        expandStateMapping= "isExpanded">
    </ej-treegrid>

    filterSettings object

    Options for filtering and customizing filter actions.

    filterSettings.enableCaseSensitivity boolean

    Gets or sets a value that indicates to perform the filter operation with case sensitive in excel styled filter menu mode.

    Default Value

    • false

    Example

    <ej-treegrid id="TreeGridControl"
        [filterSettings]= "filterSettings">
    </ej-treegrid>
    export class AppComponent {
        public filterSettings: any;
        constructor() {
            this.filterSettings = { enableCaseSensitivity : false};
        }
    }

    filterSettings.enableComplexBlankFilter boolean

    Enables or disables the ability to filter the columns with empty, null and undefined values.

    Default Value

    • true

    Example

    <ej-treegrid id="TreeGridControl"
        [filterSettings]= "filterSettings">
    </ej-treegrid>
    export class AppComponent {
        public filterSettings: any;
        constructor() {
            this.filterSettings = { enableComplexBlankFilter : false};
        }
    }

    filterSettings.filterBarMode string

    Specifies the mode on which column filtering should start

    Default Value

    • “immediate”

    Example

    <ej-treegrid id="TreeGridControl"
        [filterSettings]= "filterSettings">
    </ej-treegrid>
    export class AppComponent {
        public filterSettings: any;
        constructor() {
            this.filterSettings = { filterBarMode : "onEnter"};
        }
    }

    filterSettings.filterHierarchyMode enum

    Specifies the mode of filtering to filter the record with or without hierarchy.

    Name Description
    Parent Shows the filtered record with parent record
    Child Shows the filtered record with child record
    Both shows the filtered record with both parent and child record
    None Shows only filtered record.

    Default Value

    • ej.TreeGrid.FilterHierarchyMode.Parent

    Example

    <ej-treegrid id="TreeGridControl"
        [filterSettings]= "filterSettings">
    </ej-treegrid>
    export class AppComponent {
        public filterSettings: any;
        constructor() {
            this.filterSettings = { filterHierarchyMode : ej.TreeGrid.FilterHierarchyMode.Parent};
        }
    }

    filterSettings.filterType enum

    Specifies the type of column filtering.

    Name Description
    FilterBar Enables the filter bar filtering
    Menu Enables the menu filtering

    Default Value

    • ej.TreeGrid.FilterType.FilterBar

    Example

    <ej-treegrid id="TreeGridControl"
        [filterSettings]= "filterSettings">
    </ej-treegrid>
    export class AppComponent {
        public filterSettings: any;
        constructor() {
            this.filterSettings =  { filterType : ej.TreeGrid.FilterType.Menu};
        }
    }

    filterSettings.filteredColumns array

    Specifies the column collection for filtering the TreeGrid content on initial load

    Default Value

    • []

    filterSettings.filteredColumns.field string

    Specifies the field where filtering has to be performed.

    Default Value

    • -

    filterSettings.filteredColumns.operator string

    Specifies the filter condition to filtered column. See operator

    Default Value

    • -

    filterSettings.filteredColumns.predicate string

    Specifies the predicate(and/or) value to perform filtering.

    Default Value

    • -

    filterSettings.filteredColumns.value string

    Specifies the value to be filtered in TreeGrid.

    Default Value

    • -

    Example

    <ej-treegrid id="TreeGridControl"
        [filterSettings]= "filterSettings">
    </ej-treegrid>
    export class AppComponent {
        public filterSettings: any;
        constructor() {
            this.filterSettings = {
            filteredColumns: [{
                value: "plan",
                field: "taskName",
                predicate: "and",
                operator: "startswith"
            }]
        };
        }
    }

    filterSettings.maxFilterChoice number

    Gets or sets a value that indicates the maximum number of filter choices that can be showed in the excel styled filter menu.

    Default Value

    • 1000

    Example

    <ej-treegrid id="TreeGridControl"
        [filterSettings]= "filterSettings">
    </ej-treegrid>
    export class AppComponent {
        public filterSettings: any;
        constructor() {
            this.filterSettings =  { maxFilterChoice : 500 };
        }
    }

    headerTextOverflow enum

    Specifies whether to wrap the header text when it is overflown i.e., when it exceeds the header width.

    Name Description
    None You can disable the word wrap
    Wrap You can wrap the header content

    Default Value

    • ej.TreeGrid.HeaderTextOverflow.None

    Example

    <ej-treegrid id="TreeGridControl"
        [headerTextOverflow]= "headerTextOverflow">
    </ej-treegrid>
    export class AppComponent {
        public headerTextOverflow: any;
        constructor() {
            this.headerTextOverflow =   ej.TreeGrid.HeaderTextOverflow.Wrap;
        }
    }

    idMapping string

    Specifies the name of the field in the dataSource, which contains the id of that row.

    Default Value

    • ””

    Example

  • HTML
  • <ej-treegrid id="TreeGridControl"
        idMapping= "ID">
    </ej-treegrid>

    isResponsive boolean

    Enables or disables the responsiveness of TreeGrid

    Default Value

    • false

    Example

  • HTML
  • <ej-treegrid id="TreeGridControl"
        [isResponsive]= "false">
    </ej-treegrid>

    locale string

    Specifies the localization information to customize the User Interface (UI) to support regional language and culture

    Default Value

    • “en-US”

    Example

  • HTML
  • <ej-treegrid id="TreeGridControl"
        locale= "fr-FR">
    </ej-treegrid>

    pageSettings object

    Specifies the options for customizing the pager.

    pageSettings.currentPage number

    Specifies the current page to display at load time.

    Default Value

    • 1

    Example

    <ej-treegrid id="TreeGridControl"
        [pageSettings]= "pageSettings">
    </ej-treegrid>
    export class AppComponent {
        public pageSettings: any;
        constructor() {
            this.pageSettings =  {currentPage : 2};
        }
    }

    pageSettings.pageCount number

    Using this property we can specify the number of pages should pager contains, according to this count TreeGrid height will be updated.

    Default Value

    • 8

    Example

    <ej-treegrid id="TreeGridControl"
        [pageSettings]= "pageSettings">
    </ej-treegrid>
    export class AppComponent {
        public pageSettings: any;
        constructor() {
            this.pageSettings =  {pageCount: 10, };
        }
    }

    pageSettings.pageSize number

    This specifies the number of rows to display in each page.

    Default Value

    • 12

    Example

    <ej-treegrid id="TreeGridControl"
        [pageSettings]= "pageSettings">
    </ej-treegrid>
    export class AppComponent {
        public pageSettings: any;
        constructor() {
            this.pageSettings = {pageSize : 10};
        }
    }

    pageSettings.pageSizeMode enum

    Specifies the mode of record count in a page, whether it should count all the records or the root to count zero level parent records.

    Name Description
    All To count all the parent and child records.
    Root To count the Zeroth level parent records.

    Default Value

    • ej.TreeGrid.PageSizeMode.All

    Example

    <ej-treegrid id="TreeGridControl"
        [pageSettings]= "pageSettings">
    </ej-treegrid>
    export class AppComponent {
        public pageSettings: any;
        constructor() {
            this.pageSettings = { pageSizeMode:ej.TreeGrid.PageSizeMode.Root };
        }
    }

    pageSettings.printMode enum

    Specifies the mode of printing the control, whether it should print the all the records or the current page content.

    Name Description
    AllPages To print all the pages
    CurrentPage To print only the current page content.

    Default Value

    • ej.TreeGrid.PrintMode.AllPages

    Example

    <ej-treegrid id="TreeGridControl"
        [pageSettings]= "pageSettings">
    </ej-treegrid>
    export class AppComponent {
        public pageSettings: any;
        constructor() {
            this.pageSettings = { printMode:ej.TreeGrid.PrintMode.CurrentPage};
        }
    }

    pageSettings.template string

    Specifies the Custom template for Pager control.

    Default Value

    • null

    Example

    <ej-treegrid id="TreeGridControl"
        [pageSettings]= "pageSettings">
    </ej-treegrid>
    export class AppComponent {
        public pageSettings: any;
        constructor() {
            this.pageSettings ={ template:"PageTemplate" };
        }
    }

    pageSettings.totalRecordsCount number

    Get the value of records which is bound to TreeGrid. The totalRecordsCount value is calculated based on the datasource bound to TreeGrid.

    Default Value

    • null

    Example

    <ej-treegrid id="TreeGridControl"
        [pageSettings]= "pageSettings">
    </ej-treegrid>
    export class AppComponent {
        public pageSettings: any;
        constructor() {
            this.pageSettings ={totalRecordsCount : null};
        }
    }

    parentIdMapping string

    Specifies the name of the field in the dataSource, which contains the parent’s id. This is necessary to form a parent-child hierarchy, if the dataSource contains self-referential data.

    Default Value

    • ””

    Example

  • HTML
  • <ej-treegrid id="TreeGridControl"
        parentIdMapping= "parentID">
    </ej-treegrid>

    parseRowTemplate boolean

    Enables or disables internal parsing of a row. When disabled this property, row will be displayed using the defined template without any internal event bindings.

    Default Value

    • true

    Example

  • HTML
  • <ej-treegrid id="TreeGridControl"
        [parseRowTemplate]= "false">
    </ej-treegrid>

    query object

    Specifies ej.Query to select data from the dataSource. This property is applicable only when the dataSource is ej.DataManager.

    Default Value

    • null

    Example

    <ej-treegrid id="TreeGridControl"
        [query]= "query">
    </ej-treegrid>
    export class AppComponent {
        public query: any;
        constructor() {
            this.query =ej.Query().from("Categories").select("CategoryID,CategoryName").take(3); 
        }
    }

    rowHeight number

    Specifies the height of a single row in tree grid. Also, we need to set same height in the CSS style with class name e-rowcell.

    Default Value

    • 30

    Example

  • HTML
  • <ej-treegrid id="TreeGridControl"
        [rowHeight]= "40">
    </ej-treegrid>

    rowTemplateID string

    Specifies the id of the template to be applied for all the rows.

    Default Value

    • ””

    Example

  • HTML
  • <ej-treegrid id="TreeGridControl"
         rowTemplateID= "customTemplate">
    </ej-treegrid>

    searchSettings object

    Specifies the toolbar searching customizations.

    searchSettings.fields array

    Gets or Sets a specific column for searching the tree grid content.

    Default Value

    • []

    Example

    <ej-treegrid id="TreeGridControl"
        [searchSettings]= "searchSettings">
    </ej-treegrid>
    export class AppComponent {
        public searchSettings: any;
        constructor() {
            this.searchSettings = {
                fields:["TaskId","TaskName"],
            }
        }
    }

    searchSettings.ignoreCase boolean

    Enables or disables the case sensitivity while searching.

    Default Value

    • true

    Example

    <ej-treegrid id="TreeGridControl"
        [searchSettings]= "searchSettings">
    </ej-treegrid>
    export class AppComponent {
        public searchSettings: any;
        constructor() {
            this.searchSettings = {
                ignoreCase: false
            }
        }
    }

    searchSettings.searchHierarchyMode enum

    Specifies the search mode of records in searching.

    Name Description
    Parent Parent level records will be included in searching
    Child Filtered child records will be displayed and parent records displayed along with its children.
    Both Filtered child records will be displayed with parents and parents will be displayed along with its children
    None Filtered records alone will be displayed without it parents or children

    Default Value

    • ej.TreeGrid.SearchHierarchyMode.Parent

    Example

    <ej-treegrid id="TreeGridControl"
        [searchSettings]= "searchSettings">
    </ej-treegrid>
    export class AppComponent {
        public searchSettings: any;
        constructor() {
            this.searchSettings = {
                searchHierarchyMode: ej.TreeGrid.SearchHierarchyMode.Child,
            }
        }
    }

    searchSettings.key string

    Gets or Sets a key word for searching the tree grid content.

    Default Value

    • ””

    Example

    <ej-treegrid id="TreeGridControl"
        [searchSettings]= "searchSettings">
    </ej-treegrid>
    export class AppComponent {
        public searchSettings: any;
        constructor() {
            this.searchSettings = {
                key:"task 1",
            }
        }
    }

    searchSettings.operator string

    Specifies the operator for the search key words in toolbar searching.

    List of enum type operators

    1. ej.FilterOperators.contain
    2. ej.FilterOperators.equal
    3. ej.FilterOperators.notEqual
    4. ej.FilterOperators.startsWith
    5. ej.FilterOperators.endsWith

    Default Value

    • “contains”

    Example

    <ej-treegrid id="TreeGridControl"
        [searchSettings]= "searchSettings">
    </ej-treegrid>
    export class AppComponent {
        public searchSettings: any;
        constructor() {
            this.searchSettings = {
                operator:"startsWith",
            }
        }
    }

    selectedCellIndexes array

    Specifies the selected cell information on rendering TreeGrid.

    selectedCellIndexes.cellIndex number

    Specifies the cell index to be selected in the row.

    Default Value

    • ””

    selectedCellIndexes.rowIndex number

    Specifies the row index of the cell to be selected in TreeGrid control

    Default Value

    • ””

    Example

    <ej-treegrid id="TreeGridControl"
        [selectedCellIndexes]= "selectedCellIndexes">
    </ej-treegrid>
    export class AppComponent {
        public selectedCellIndexes: any;
        constructor() {
            this.selectedCellIndexes =[{rowIndex: 2, cellIndex: 3}];
        }
    }

    selectedRowIndex number

    Specifies the index of the selected row.

    Default Value

    • -1

    Example

  • HTML
  • <ej-treegrid id="TreeGridControl"
        [selectedRowIndex]= "3">
    </ej-treegrid>

    selectionSettings object

    Specifies the settings for row and cell selection.

    selectionSettings.enableHierarchySelection boolean

    Enables or disables the selection by hierarchy in check box selection

    Default Value

    • true

    Example

    <ej-treegrid id="TreeGridControl"
        [selectionSettings]= "selectionSettings">
    </ej-treegrid>
    export class AppComponent {
        public selectionSettings: any;
        constructor() {
            this.selectionSettings ={enableHierarchySelection : false };
        }
    }

    selectionSettings.enableSelectAll boolean

    Toggles the visibility of the checkbox in column header, using which all the check boxes can be selected or unselected.

    Default Value

    • true

    Example

    <ej-treegrid id="TreeGridControl"
        [selectionSettings]= "selectionSettings">
    </ej-treegrid>
    export class AppComponent {
        public selectionSettings: any;
        constructor() {
            this.selectionSettings ={enableSelectAll : false };
        }
    }

    selectionSettings.selectionMode enum

    Specifies the type of selection whether to select row or cell.

    Name Description
    Row you can select a row.
    Cell you can select a cell.

    Default Value

    • ej.TreeGrid.SelectionMode.Row

    Example

    <ej-treegrid id="TreeGridControl"
        [selectionSettings]= "selectionSettings">
    </ej-treegrid>
    export class AppComponent {
        public selectionSettings: any;
        constructor() {
            this.selectionSettings ={selectionMode : ej.TreeGrid.SelectionMode.Row  };
        }
    }

    selectionSettings.selectionType enum

    Specifies the type of selection whether single, multiple or checkbox.

    Name Description
    Single you can select a single row.
    Multiple you can select a multiple row.
    Checkbox you can select rows using checkbox.

    Default Value

    • ej.TreeGrid.SelectionType.Single

    Example

    <ej-treegrid id="TreeGridControl"
        [selectionSettings]= "selectionSettings">
    </ej-treegrid>
    export class AppComponent {
        public selectionSettings: any;
        constructor() {
            this.selectionSettings ={selectionType : ej.TreeGrid.SelectionType.Multiple };
        }
    }

    showColumnChooser boolean

    Controls the visibility of the menu button, which is displayed on the column header. Clicking on this button will show a popup menu. When you choose Columns item from this popup, a list box with column names will be shown, from which you can select/deselect a column name to control the visibility of the respective columns.

    Default Value

    • false

    Example

  • HTML
  • <ej-treegrid id="TreeGridControl"
        [showColumnChooser]= "false">
    </ej-treegrid>

    showColumnOptions boolean

    Enables/disables the options for inserting , deleting and renaming columns.

    Default Value

    • false

    Example

  • HTML
  • <ej-treegrid id="TreeGridControl"
        [showColumnOptions]= "false">
    </ej-treegrid>

    showDetailsRow boolean

    Specifies the visibility of details view

    Default Value

    • false

    Example

  • HTML
  • <ej-treegrid id="TreeGridControl"
        [showDetailsRow]= "true">
    </ej-treegrid>

    showDetailsRowInfoColumn boolean

    Specifies the visibility of the expander column which is used to expand or collapse the details view

    Default Value

    • false

    Example

  • HTML
  • <ej-treegrid id="TreeGridControl"
        [showDetailsRowInfoColumn]= "true">
    </ej-treegrid>

    showGridCellTooltip boolean

    Specifies whether to show tooltip when mouse is hovered on the cell.

    Default Value

    • true

    Example

  • HTML
  • <ej-treegrid id="TreeGridControl"
        [showGridCellTooltip]= "true">
    </ej-treegrid>

    showGridExpandCellTooltip boolean

    Specifies whether to show tooltip for the cells, which has expander button.

    Default Value

    • true

    Example

  • HTML
  • <ej-treegrid id="TreeGridControl"
        [showGridExpandCellTooltip]= "true">
    </ej-treegrid>

    showStackedHeader boolean

    Gets or sets a value that indicates stacked header should be shown on TreeGrid layout when the property stackedHeaderRows is set.

    Default Value

    • false

    Example

    <ej-treegrid id="TreeGridControl"
        [showStackedHeader]= "true"
        [columns]= "columns"
        [stackedHeaderRows]= "stackedHeaderRows">
    </ej-treegrid>
    export class AppComponent {
        public stackedHeaderRows: any;
        public columns: any;
        constructor() {
            this.stackedHeaderRows = [{
                stackedHeaderColumns: [
                    { column: "ID,Name,category,units", headerText: "Shipment details", cssClass: "temp" },
                      { column: "unitPrice,price", headerText: "Price details" }
               ]    
            ]};          
            this.columns: [
                        { field: "ID", headerText: "S.No", width: columnWidth },
                        { field: "Name", headerText: "Shipment Name", isFrozen:true },
                        { field: "category", headerText: "Category" },
                        { field: "units", headerText: "Units" },
                        { field: "unitPrice", headerText: "Unit Price($)" },
                        { field: "price", headerText: "Price($)" }
            ]
        }
    }

    showSummaryRow boolean

    Specifies the visibility of summary row

    Default Value

    • false

    Example

  • HTML
  • <ej-treegrid id="TreeGridControl"
        [showSummaryRow]= "true">
    </ej-treegrid>

    showTotalSummary boolean

    Specifies the visibility of total summary row for the corresponding summary column

    Default Value

    • false

    Example

  • HTML
  • <ej-treegrid id="TreeGridControl"
        [showTotalSummary]= "true">
    </ej-treegrid>

    sizeSettings object

    Options for setting width and height for TreeGrid.

    sizeSettings.height string

    Height of the TreeGrid.

    Default Value

    • “450px”

    Example

    <ej-treegrid id="TreeGridControl"
        [sizeSettings]= "sizeSettings">
    </ej-treegrid>
    export class AppComponent {
        public sizeSettings: any;
        constructor() {
            this.sizeSettings ={height:'450px'};
        }
    }

    sizeSettings.width string

    Width of the TreeGrid.

    Default Value

    • “100%”

    Example

    <ej-treegrid id="TreeGridControl"
        [sizeSettings]= "sizeSettings">
    </ej-treegrid>
    export class AppComponent {
        public sizeSettings: any;
        constructor() {
            this.sizeSettings ={width:'500px'};
        }
    }

    sortSettings object

    Options for sorting the rows.

    sortSettings.sortedColumns array

    Option to add columns based on which the rows have to be sorted recursively.

    Default Value

    • []

    Example

    <ej-treegrid id="TreeGridControl"
        [sortSettings]= "sortSettings">
    </ej-treegrid>
    export class AppComponent {
        public sortSettings: any;
        constructor() {
            this.sortSettings ={sortedColumns : [{ field:"startDate",direction:"ascending" }]};        
        }
    }

    sortSettings.sortedColumns.direction string

    Specifies the sort direction in TreeGrid

    Default Value

    • ””

    Example

    <ej-treegrid id="TreeGridControl"
        [sortSettings]= "sortSettings">
    </ej-treegrid>
    export class AppComponent {
        public sortSettings: any;
        constructor() {
            this.sortSettings ={sortedColumns : [{ direction:"ascending" }]};
        }
    }

    sortSettings.sortedColumns.field string

    Specifies the field to be sorted in TreeGrid

    Default Value

    • ””

    Example

    <ej-treegrid id="TreeGridControl"
        [sortSettings]= "sortSettings">
    </ej-treegrid>
    export class AppComponent {
        public sortSettings: any;
        constructor() {
            this.sortSettings ={sortedColumns : [{ field:"startDate" }]};        
        }
    }

    stackedHeaderRows array

    Gets or sets an object that indicates to managing the collection of stacked header rows for the TreeGrid.

    Default Value

    • []

    Example

    <ej-treegrid id="TreeGridControl"
        [showStackedHeader]= "true"
        [columns]= "columns"
        [stackedHeaderRows]= "stackedHeaderRows">
    </ej-treegrid>
    export class AppComponent {
        public stackedHeaderRows: any;
        public columns: any;
        constructor() {
            this.stackedHeaderRows = [{
                stackedHeaderColumns: [
                    { column: "ID,Name,category,units", headerText: "Shipment details", cssClass: "temp" },
                      { column: "unitPrice,price", headerText: "Price details" }
               ]    
            ]};          
            this.columns: [
                        { field: "ID", headerText: "S.No", width: columnWidth },
                        { field: "Name", headerText: "Shipment Name", isFrozen:true },
                        { field: "category", headerText: "Category" },
                        { field: "units", headerText: "Units" },
                        { field: "unitPrice", headerText: "Unit Price($)" },
                        { field: "price", headerText: "Price($)" }
            ]
        }
    }

    stackedHeaderRows.stackedHeaderColumns array

    Gets or sets a value that indicates whether to add stacked header columns into the stacked header rows

    Default Value

    • []

    Example

    <ej-treegrid id="TreeGridControl"
        [showStackedHeader]= "true"
        [stackedHeaderRows]= "stackedHeaderRows">
    </ej-treegrid>
    export class AppComponent {
        public stackedHeaderRows: any;
        public columns: any;
        constructor() {
            this.stackedHeaderRows = [{
                stackedHeaderColumns: [
                    { column: "ID,Name,category,units", headerText: "Shipment details", cssClass: "temp" },
                    { column: "unitPrice,price", headerText: "Price details" }
                ]  
            ]};          
        }
    }

    stackedHeaderRows.stackedHeaderColumns.column object

    Gets or sets a value that indicates the header text for the particular stacked header column.

    Default Value

    • null

    Example

    <ej-treegrid id="TreeGridControl"
        [showStackedHeader]= "true"
        [stackedHeaderRows]= "stackedHeaderRows">
    </ej-treegrid>
    export class AppComponent {
        public stackedHeaderRows: any;
        public columns: any;
        constructor() {
            this.stackedHeaderRows = [{
                stackedHeaderColumns: [
                    { column: "ID,Name,category,units", headerText: "Shipment details", cssClass: "temp" },
                    { column: "unitPrice,price", headerText: "Price details" }
                ]  
            ]};          
        }
    }

    stackedHeaderRows.stackedHeaderColumns.cssClass string

    Gets or sets a value that indicates class to the corresponding stackedHeaderColumn.

    Default Value

    • null

    Example

    <ej-treegrid id="TreeGridControl"
        [showStackedHeader]= "true"
        [stackedHeaderRows]= "stackedHeaderRows">
    </ej-treegrid>
    export class AppComponent {
        public stackedHeaderRows: any;
        public columns: any;
        constructor() {
            this.stackedHeaderRows = [{
                stackedHeaderColumns: [
                    { column: "ID,Name,category,units", headerText: "Shipment details", cssClass: "temp" },
                    { column: "unitPrice,price", headerText: "Price details" }
                ]  
            ]};          
        }
    }

    stackedHeaderRows.stackedHeaderColumns.headerText string

    Gets or sets a value that indicates the header text for the particular stacked header column.

    Default Value

    • null

    Example

    <ej-treegrid id="TreeGridControl"
        [showStackedHeader]= "true"
        [stackedHeaderRows]= "stackedHeaderRows">
    </ej-treegrid>
    export class AppComponent {
        public stackedHeaderRows: any;
        public columns: any;
        constructor() {
            this.stackedHeaderRows = [{
                stackedHeaderColumns: [
                    { column: "ID,Name,category,units", headerText: "Shipment details", cssClass: "temp" },
                    { column: "unitPrice,price", headerText: "Price details" }
                ]  
            ]};          
        }
    }

    stackedHeaderRows.stackedHeaderColumns.textAlign string

    Gets or sets a value that indicates the text alignment of the corresponding headerText.

    Default Value

    • ej.TextAlign.Left

    Example

    <ej-treegrid id="TreeGridControl"
        [showStackedHeader]= "true"
        [stackedHeaderRows]= "stackedHeaderRows">
    </ej-treegrid>
    export class AppComponent {
        public stackedHeaderRows: any;
        public columns: any;
        constructor() {
            this.stackedHeaderRows = [{
                stackedHeaderColumns: [
                    { column: "ID,Name,category,units", headerText: "Shipment details", cssClass: "temp", textAlign: ej.TextAlign.Right },
                    { column: "unitPrice,price", headerText: "Price details" }
                ]  
            ]};          
        }
    }

    stackedHeaderRows.stackedHeaderColumns.tooltip string

    Sets the template for tooltip for the Grid stackedHeaderColumns.

    Default Value

    • null

    Example

    <ej-treegrid id="TreeGridControl"
        [showStackedHeader]= "true"
        [stackedHeaderRows]= "stackedHeaderRows">
    </ej-treegrid>
    export class AppComponent {
        public stackedHeaderRows: any;
        public columns: any;
        constructor() {
            this.stackedHeaderRows = [{
                stackedHeaderColumns: [
                    { column: "ID,Name,category,units", headerText: "Shipment details", cssClass: "temp", tooltip:"#colTip" },
                    { column: "unitPrice,price", headerText: "Price details" }
                ]  
            ]};          
        }
    }

    summaryRows array

    Specifies the summary row collection object to be displayed

    Default Value

    • []

    summaryRows.summaryColumns array

    Specifies the summary columns in the summary rows.

    Default Value

    • -

    summaryRows.summaryColumns.customSummaryValue string

    Specifies the custom summary calculate function or text.

    Default Value

    • -

    summaryRows.summaryColumns.dataMember string

    Specifies summary column used to perform the summary calculation.

    Default Value

    • -

    summaryRows.summaryColumns.displayColumn string

    Specifies the required column to display the summary.

    Default Value

    • -

    summaryRows.summaryColumns.format string

    Specifies the format to be applied on the summary column value.

    Default Value

    • -

    summaryRows.summaryColumns.prefix string

    Specifies the text to be displayed before the summary column value.

    Default Value

    • -

    summaryRows.summaryColumns.suffix string

    Specifies the text to be displayed after the summary column value.

    Default Value

    • -

    summaryRows.summaryColumns.summaryType enum

    Specifies the summary type to perform calculations in a corresponding summary column.

    Name Description
    Sum Displays the sum of summary column
    Average Displays the average of summary column
    Maximum Displays the maximum value of summary column
    Minimum Displays the minimum value of summary column
    Count Displays the total count of summary column
    MinimumDate Displays the minimum date value in summary column
    MaximumDate Displays the maximum date value in summary column
    TrueCount Displays the true count value for boolean summary columns
    FalseCount Displays the false count value for boolean summary columns
    Custom Displays the value from custom summary function

    Default Value

    • -

    summaryRows.title string

    Specifies the title for summary row collection in TreeGrid

    Default Value

    • -

    Example

    <ej-treegrid id="TreeGridControl"
        [summaryRows]= "summaryRows">
    </ej-treegrid>
    export class AppComponent {
        public summaryRows: any;
        constructor() {
            this.summaryRows =[{
                title: "Maximum",
                summaryColumns: [{
                    summaryType: ej.TreeGrid.SummaryType.Maximum,
                    dataMember: "TotalUnits",
                    displayColumn: "TotalUnits",
                    prefix: "Individual maximum unit = ",
                },
                {
                    summaryType: ej.TreeGrid.SummaryType.Maximum,
                    dataMember: "TotalCosts",
                    displayColumn: "TotalCosts",
                    prefix: "Individual maximum Cost = ",
                    suffix:"/-",
                    format: "{0:C}"
                }]
            }];      
        }
    }

    toolbarSettings object

    Options for displaying and customizing the toolbar items.

    toolbarSettings.customToolbarItems array

    Allows the user to insert custom toolbar items.

    toolbarSettings.customToolbarItems.text string

    Allows the user to insert the custom icons in toolbar using CSS class name selector.

    Default Value

    • ””

    Example

    <ej-treegrid id="TreeGridControl"
        [toolbarSettings]= "toolbarSettings">
    </ej-treegrid>
    export class AppComponent {
        public toolbarSettings: any;
        constructor() {
            this.toolbarSettings = {customToolbarItems: [{ text: "Reset",tooltipText:"Column Visibility" }]};
        }
    }

    toolbarSettings.customToolbarItems.templateID string

    Allows the user to insert the custom icons in toolbar using script templates. Using this property we can bind HTML elements and other EJ controls to TreeGrid toolbar.

    Default Value

    • ””

    Example

    <ej-treegrid id="TreeGridControl"
        [toolbarSettings]= "toolbarSettings">
    </ej-treegrid>
    export class AppComponent {
        public toolbarSettings: any;
        constructor() {
            this.toolbarSettings ={customToolbarItems: [{ templateID: "#ColumnVisibility",tooltipText:"Column Visibility" }]
            }
        }
    }

    toolbarSettings.customToolbarItems.tooltipText string

    Allows the user to display custom tooltip text for TreeGrid custom toolbar items.

    Default Value

    • ””

    Example

    <ej-treegrid id="TreeGridControl"
        [toolbarSettings]= "toolbarSettings">
    </ej-treegrid>
    export class AppComponent {
        public toolbarSettings: any;
        constructor() {
            this.toolbarSettings ={customToolbarItems: [{ templateID: "#ColumnVisibility",tooltipText:"Column Visibility" },{ text: "Reset",tooltipText:"Column Visibility" }]};
        }
    }

    toolbarSettings.showToolbar boolean

    Shows/hides the toolbar.

    Default Value

    • false

    Example

    <ej-treegrid id="TreeGridControl"
        [toolbarSettings]= "toolbarSettings">
    </ej-treegrid>
    export class AppComponent {
        public toolbarSettings: any;
        constructor() {
            this.toolbarSettings ={showToolbar:  true};        
        }
    }

    toolbarSettings.toolbarItems array

    Specifies the list of toolbar items to be rendered in TreeGrid toolbar

    Name Description
    Add Enables the add icon in toolbar
    Edit Enables the edit icon in toolbar
    Delete Enables the edit icon in toolbar
    Update Enables the update icon in toolbar
    Cancel Enables the cancel icon in toolbar
    ExpandAll Enables the expand all icon in toolbar
    Collapse All Enables the collapse all icon in toolbar
    PdfExport Enables the PDF export icon in toolbar
    ExcelExport Enables the excel export icon in toolbar
    Print Enables the printing icon in toolbar

    Default Value

    • []

    Example

    <ej-treegrid id="TreeGridControl"
        [toolbarSettings]= "toolbarSettings">
    </ej-treegrid>
    export class AppComponent {
        public toolbarSettings: any;
        constructor() {
            this.toolbarSettings ={toolbarItems: [ej.TreeGrid.ToolbarItems.Add,ej.TreeGrid.ToolbarItems.Edit]};        
        }
    }

    totalSummaryHeight number

    Specifies the custom summary height to the total summary row.

    Default Value

    • 90

    Example

  • HTML
  • <ej-treegrid id="TreeGridControl"
        [totalsummaryheight]= 120 >
    </ej-treegrid>

    treeColumnIndex number

    Specifies the index of the column that needs to have the expander button. By default, cells in the first column contain the expander button.

    Default Value

    • 0

    Example

  • HTML
  • <ej-treegrid id="TreeGridControl"
        [treeColumnIndex]= "2">
    </ej-treegrid>

    Methods

    addRow(data, rowPosition)

    Add a new row in TreeGrid, while allowAdding is set to true

    Name Type Description
    data object Item to add in TreeGrid row.
    rowPosition string Defines in which position the row wants to be added

    Example

    <button id="addrow" (click)="addRow($event)">Add Row</button>
    <ej-treegrid id="TreeGridControl">
    //...
    </ej-treegrid>
    export class AppComponent {
        constructor() {
            //...
        }
        public addRow(event) {
            var treeObj = $("#TreeGridControl").ejTreeGrid("instance");
            var data = {taskId:"40",taskName:"New Task 40",startDate:"2/20/2014",startDate:"2/25/2014"};
            treeObj.addRow(data, ej.TreeGrid.AddRowPosition.Child); // To add a task
        }
    }

    clearFilter(fieldName)

    Clears the filter applied to a specific column.

    Name Type Description
    fieldName string Pass the column field name to clear filtering done in that column.

    Usage: we can able to clear the filtering done in any specific column dynamically by passing its field name as parameter.

    Example

    <button id="clearFilter" (click)="clearFilter($event)">clearFilter</button>
    <ej-treegrid id="TreeGridControl">
    //...
    </ej-treegrid>
    export class AppComponent {
        constructor() {
            //...
        }
        public clearFilter(event) {
            var treeObj = $("#TreeGridControl").ejTreeGrid("instance");
            treeObj.clearFilter("taskName");
        }
    }

    clearSelection(index)

    To clear all the selection in TreeGrid

    Name Type Description
    index number you can pass a row index to clear the row selection.

    Example

    <button id="clearSelection" (click)="clearSelection($event)">Clear Selection</button>
    <ej-treegrid id="TreeGridControl">
    //...
    </ej-treegrid>
    export class AppComponent {
        constructor() {
            //...
        }
        public clearSelection(event) {
            var treeObj = $("#TreeGridControl").ejTreeGrid("instance");
            treeObj.clearSelection();
        }
    }

    clearSorting()

    To clear the sorting from sorted columns in TreeGrid.

    Example

    <button id="clearSorting" (click)="clearSorting($event)">Clear Selection</button>
    <ej-treegrid id="TreeGridControl">
    //...
    </ej-treegrid>
    export class AppComponent {
        constructor() {
            //...
        }
        public clearSorting(event) {
            var treeObj = $("#TreeGridControl").ejTreeGrid("instance");
            treeObj.clearSorting();
        }
    }

    collapseAll()

    To collapse all the parent items in tree grid

    Example

    <button id="collapseAll" (click)="collapseAll($event)">collapseAll</button>
    <ej-treegrid id="TreeGridControl">
    //...
    </ej-treegrid>
    export class AppComponent {
        constructor() {
            //...
        }
        public collapseAll(event, item) {
            var treeObj = $("#TreeGridControl").ejTreeGrid("instance");
            treeObj.collapseAll();
        }
    }

    collapseAtLevel(index)

    Collapses the records at specific hierarchical level

    Name Type Description
    index number you can pass the particular level as index.

    Example

    <button id="collapseAtLevel" (click)="collapseAtLevel($event)">collapseAtLevel</button>
    <ej-treegrid id="TreeGridControl">
    //...
    </ej-treegrid>
    export class AppComponent {
        constructor() {
            //...
        }
        public collapseAtLevel(event) {
            var treeObj = $("#TreeGridControl").ejTreeGrid("instance");
            treeObj.collapseAtLevel(1);
        }
    }

    columnIndex(index)

    To change the index of the tree column in TreeGrid.

    Name Type Description
    Index number Pass the column index to make the column as treeColumnIndex.

    Usage: we can able to change any column as tree column dynamically.

    Example

    <button id="columnIndex" (click)="columnIndex($event)">columnIndex</button>
    <ej-treegrid id="TreeGridControl">
    //...
    </ej-treegrid>
    export class AppComponent {
        constructor() {
            //...
        }
        public columnIndex(event) {
            var treeObj = $("#TreeGridControl").ejTreeGrid("instance");
            treeObj.columnIndex(2);
        }
    }

    deleteColumn(columnIndex)

    To delete the specified column

    Name Type Description
    columnIndex number Index of the column to be deleted

    Example

    <button id="deleteColumn" (click)="deleteColumn($event)">deleteColumn</button>
    <ej-treegrid id="TreeGridControl">
    //...
    </ej-treegrid>
    export class AppComponent {
        constructor() {
            //...
        }
        public deleteColumn(event) {
            var treeObj = $("#TreeGridControl").ejTreeGrid("instance");
            treeObj.deleteColumn(1);
        }
    }

    expandAll()

    To expand all the root level nodes in TreeGrid.

    Usage: we can able to expand all the parents records in TreeGrid control dynamically.

    Example

    <button id="expandAll" (click)="expandAll($event)">expandAll</button>
    <ej-treegrid id="TreeGridControl">
    //...
    </ej-treegrid>
    export class AppComponent {
        constructor() {
            //...
        }
        public expandAll(event) {
            var treeObj = $("#TreeGridControl").ejTreeGrid("instance");
            treeObj.expandAll();
        }
    }

    expandAtLevel(index)

    Expands the records at specific hierarchical level

    Name Type Description
    index number you can pass the level as index number to expand

    Example

    <button id="expandAtLevel" (click)="expandAtLevel($event)">expandAtLevel</button>
    <ej-treegrid id="TreeGridControl">
    //...
    </ej-treegrid>
    export class AppComponent {
        constructor() {
            //...
        }
        public expandAtLevel(event) {
            var treeObj = $("#TreeGridControl").ejTreeGrid("instance");
            treeObj.expandAtLevel(1);
        }
    }

    expandCollapseRow(index)

    To expand and collapse an item in TreeGrid using item’s index.

    Name Type Description
    Index number Pass the row index of row to expand/collapse.

    Usage: we can able to expand/collapse any specific parent record dynamically by passing its row index.

    Example

    <button id="expandCollapseRow" (click)="expandCollapseRow($event)">expandCollapseRow</button>
    <ej-treegrid id="TreeGridControl">
    //...
    </ej-treegrid>
    export class AppComponent {
        constructor() {
            //...
        }
        public expandCollapseRow(event) {
            var treeObj = $("#TreeGridControl").ejTreeGrid("instance");
            treeObj.expandCollapseRow(5);
        }
    }

    expandCollapseTotalSummary(expanded)

    To expand collapse the total summary row.

    Name Type Description
    expanded boolean Decides to expand/collapse the total summary

    Example

    <button id="expandCollapseTotalSummary" (click)="expandCollapseTotalSummary($event)">expandCollapseTotalSummary</button>
    <ej-treegrid id="TreeGridControl">
    //...
    </ej-treegrid>
    export class AppComponent {
        constructor() {
            //...
        }
        public expandCollapseTotalSummary(event) {
            var treeObj = $("#TreeGridControl").ejTreeGrid("instance");
            treeObj.expandCollapseTotalSummary(true);
        }
    }

    filterColumn(fieldName, filterOperator, filterValue, predicate, match case, actualFilterValue)

    Sends filtering request to filter a column in TreeGrid.

    Name Type Description
    fieldName string Pass the field name of the column.
    filterOperator string string/integer/dateTime operator.
    filterValue string Pass the value to be filtered in a column.
    predicate string Pass the predicate as and/or.
    match case boolean Optional pass the match case value as true/false.
    actualFilterValue object Optional actualFilterValue denote the filter object of current filtered columns.

    Usage: we can able to perform filter operation dynamically.

    Example

    <button id="filterColumn" (click)="filterColumn($event)">filterColumn</button>
    <ej-treegrid id="TreeGridControl">
    //...
    </ej-treegrid>
    export class AppComponent {
        constructor() {
            //...
        }
        public filterColumn(event) {
            var treeObj = $("#TreeGridControl").ejTreeGrid("instance");
            treeObj.filterColumn("taskName", "startswith", "plan", "and");
        }
    }

    filterContent(ejPredicate)

    To filter multiple columns with multiple conditions dynamically in TreeGrid.

    Name Type Description
    ejPredicate object Pass the filtering column details and conditions as ejPredicate instance. ejPredicate object is defined as fieldName,filterOperator, filterValue and ignoreCase properties
    Name Type Description
    fieldName string Pass the field name of the column.
    filterOperator string string/integer/date operator.
    filterValue string Pass the value to be filtered in a column.
    ignoreCase boolean Optional - pass the ignore case value as true/false.

    Example

    <button id="filterContent" (click)="filterContent($event)">filterContent</button>
    <ej-treegrid id="TreeGridControl">
    //...
    </ej-treegrid>
    export class AppComponent {
        constructor() {
            //...
        }
        public filterContent(event) {
            var treeObj = $("#TreeGridControl").ejTreeGrid("instance");
            var predicate = ej.Predicate("taskName", ej.FilterOperators.equal, "planning", false)
                              .or("taskName", ej.FilterOperators.equal, "plan budget", false)
                              .and("progress", ej.FilterOperators.equal, 100, true);
            treeObj.filterContent(predicate);
        }
    }

    freezeColumn (field, isFrozen)

    Freeze/unfreeze the specified column.

    Name Type Description
    field string Freeze/Unfreeze this field column.
    isFrozen boolean Decides to Freeze/Unfreeze this field column.

    Example

    <button id="freezeColumn" (click)="freezeColumn($event)">freezeColumn</button>
    <ej-treegrid id="TreeGridControl">
    //...
    </ej-treegrid>
    export class AppComponent {
        constructor() {
            //...
        }
        public freezeColumn(event) {
            var treeObj = $("#TreeGridControl").ejTreeGrid("instance");
            treeObj.freezeColumn(field, isFrozen);
        }
    }

    freezePrecedingColumns (field)

    Freeze all the columns preceding to the column specified by the field name.

    Name Type Description
    field string Freeze all Columns before this field column.

    Example

    <button id="freezePrecedingColumns" (click)="freezePrecedingColumns($event)">freezePrecedingColumns</button>
    <ej-treegrid id="TreeGridControl">
    //...
    </ej-treegrid>
    export class AppComponent {
        constructor() {
            //...
        }
        public freezePrecedingColumns(event) {
            var treeObj = $("#TreeGridControl").ejTreeGrid("instance");
            treeObj.freezePrecedingColumns(field);
        }
    }

    getColumnByField(fieldName)

    Gets the column object of specific column.

    Returns:

    object

    Name Type Description
    fieldName string Pass the column field name to get details of that column.

    Usage: we can able to get the detail collection of any column by passing its field name as parameter.

    Example

    <button id="getColumnByField" (click)="getColumnByField($event)">getColumnByField</button>
    <ej-treegrid id="TreeGridControl">
    //...
    </ej-treegrid>
    export class AppComponent {
        constructor() {
            //...
        }
        public getColumnByField(event) {
            var treeObj = $("#TreeGridControl").ejTreeGrid("instance");
            var value = treeObj.getColumnByField("taskName");
        }
    }

    getColumnByHeaderText(headerText)

    Gets the column object of specific column.

    Returns:

    object

    Name Type Description
    headerText string Pass the column header text to get details of that column.

    Usage: we can able to get the object of any column by passing its header text as parameter.

    Example

    <button id="getColumnByHeaderText" (click)="getColumnByHeaderText($event)">getColumnByHeaderText</button>
    <ej-treegrid id="TreeGridControl">
    //...
    </ej-treegrid>
    export class AppComponent {
        constructor() {
            //...
        }
        public getColumnByHeaderText(event) {
            var treeObj = $("#TreeGridControl").ejTreeGrid("instance");
            var value = treeObj.getColumnByHeaderText("Task Name");
        }
    }

    getColumnIndexByField(fieldName)

    Gets the column index of specific column with data source field.

    Returns:

    number

    Name Type Description
    fieldName string Pass the column field name to get its index.

    Usage: we can able to get the index of any column by passing its field name as parameter.

    Example

    <button id="getColumnIndexByField" (click)="getColumnIndexByField($event)">getColumnIndexByField</button>
    <ej-treegrid id="TreeGridControl">
    //...
    </ej-treegrid>
    export class AppComponent {
        constructor() {
            //...
        }
        public getColumnIndexByField(event) {
            var treeObj = $("#TreeGridControl").ejTreeGrid("instance");
            var value = treeObj.getColumnIndexByField("taskName");
        }
    }

    getFieldNameByHeaderText(headerText)

    Gets the column field name using column header text.

    Returns:

    string

    Name Type Description
    headerText string Pass the column header text to get its field name.

    Usage: we can able to get the field name of any column by passing its header text as parameter.

    Example

    <button id="getFieldNameByHeaderText" (click)="getFieldNameByHeaderText($event)">getFieldNameByHeaderText</button>
    <ej-treegrid id="TreeGridControl">
    //...
    </ej-treegrid>
    export class AppComponent {
        constructor() {
            //...
        }
        public getFieldNameByHeaderText(event) {
            var treeObj = $("#TreeGridControl").ejTreeGrid("instance");
            var value = treeObj.getFieldNameByHeaderText("Task Name");
        }
    }

    getScrollLeftOffset()

    Gets the scroll left offset of TreeGrid.

    Returns:

    number

    Usage: we can able to get scroll left offset of TreeGrid dynamically.

    Example

    <button id="getScrollLeftOffset" (click)="getScrollLeftOffset($event)">getScrollLeftOffset</button>
    <ej-treegrid id="TreeGridControl">
    //...
    </ej-treegrid>
    export class AppComponent {
        constructor() {
            //...
        }
        public getScrollLeftOffset(event) {
            var treeObj = $("#TreeGridControl").ejTreeGrid("instance");
            var value = treeObj.getScrollLeftOffset();
        }
    }

    getScrollTopOffset()

    Gets the scroll top offset of TreeGrid.

    Returns:

    number

    Usage: we can able to get scroll top offset of TreeGrid dynamically.

    Example

    <button id="getScrollTopOffset" (click)="getScrollTopOffset($event)">getScrollTopOffset</button>
    <ej-treegrid id="TreeGridControl">
    //...
    </ej-treegrid>
    export class AppComponent {
        constructor() {
            //...
        }
        public getScrollTopOffset(event) {
            var treeObj = $("#TreeGridControl").ejTreeGrid("instance");
            var value = treeObj.getScrollTopOffset();
        }
    }

    getSelectedCells()

    Gets the selected cell(s) element details in TreeGrid.

    Returns:

    array

    Usage: we can able to get cell elements of selected cells for further processing.

    Example

    <button id="getSelectedCells" (click)="getSelectedCells($event)">getSelectedCells</button>
    <ej-treegrid id="TreeGridControl">
    //...
    </ej-treegrid>
    export class AppComponent {
        constructor() {
            //...
        }
        public getSelectedCells(event) {
            var treeObj = $("#TreeGridControl").ejTreeGrid("instance");
            var value = treeObj.getSelectedCells();
        }
    }

    getUpdatedRecords()

    To get the updated data source of TreeGrid.

    Returns:

    array

    Usage: We can able to get the updated record collection by using this method.

    Example

    <button id="getUpdatedRecords" (click)="getUpdatedRecords($event)">getUpdatedRecords</button>
    <ej-treegrid id="TreeGridControl">
    //...
    </ej-treegrid>
    export class AppComponent {
        constructor() {
            //...
        }
        public getUpdatedRecords(event) {
            var treeObj = $("#TreeGridControl").ejTreeGrid("instance");
            var value = treeObj.getUpdatedRecords();
        }
    }

    gotoPage(pageIndex)

    Sends request to navigate to a specific page in TreeGrid.

    Name Type Description
    PageIndex number Pass the page index to perform paging at specified page index.

    Usage: we can able to change the active page at run time.

    Example

    <button id="gotoPage" (click)="gotoPage($event)">gotoPage</button>
    <ej-treegrid id="TreeGridControl">
    //...
    </ej-treegrid>
    export class AppComponent {
        constructor() {
            //...
        }
        public gotoPage(event) {
            var treeObj = $("#TreeGridControl").ejTreeGrid("instance");
            var value = treeObj.gotoPage(3);
        }
    }

    hideColumn(headerText)

    To hide the column by using header text

    Name Type Description
    headerText string you can pass a header text of a column to hide.

    Example

    <button id="hideColumn" (click)="hideColumn($event)">hideColumn</button>
    <ej-treegrid id="TreeGridControl">
    //...
    </ej-treegrid>
    export class AppComponent {
        constructor() {
            //...
        }
        public hideColumn(event) {
            var treeObj = $("#TreeGridControl").ejTreeGrid("instance");
            treeObj.hideColumn("Task Name");
        }
    }

    moveRow(fromIndex, toIndex , position)

    To move the TreeGrid rows programmatically with from index ,to index and position.

    Name Type Description
    fromIndex number you can pass drag Index of the row
    toIndex number you can pass target Index of the row.
    position string you can pass the drop position as above,below,child

    Example

    <button id="moveRow" (click)="moveRow($event)">moveRow</button>
    <ej-treegrid id="TreeGridControl">
    //...
    </ej-treegrid>
    export class AppComponent {
        constructor() {
            //...
        }
        public moveRow(event) {
            var treeObj = $("#TreeGridControl").ejTreeGrid("instance");
            treeObj.moveRow(4, 15, "child");
        }
    }

    refresh(dataSource, query)

    To refresh the changes in tree grid

    Name Type Description
    dataSource array Pass which data source you want to show in tree grid
    query object Pass which data you want to show in tree grid

    Example

    <button id="refresh" (click)="refresh($event)">refresh</button>
    <ej-treegrid id="TreeGridControl">
    //...
    </ej-treegrid>
    export class AppComponent {
        constructor() {
            //...
        }
        public refresh(event) {
            var treeObj = $("#TreeGridControl").ejTreeGrid("instance");
            var dataManager = ej.DataManager(this.projectData);
            var query = ej.Query().select(["taskID", "taskName", "startDate", "endDate", "subtasks", "progress", "duration"]);
            treeObj.refresh(dataManager, query);
        }
    }

    renameColumn(columnIndex,name)

    To rename a column with the specified name

    Name Type Description
    columnIndex number Index of the column to be renamed
    name string Header text of the column

    Example

    <button id="renameColumn" (click)="renameColumn($event)">renameColumn</button>
    <ej-treegrid id="TreeGridControl">
    //...
    </ej-treegrid>
    export class AppComponent {
        constructor() {
            //...
        }
        public renameColumn(event) {
            var treeObj = $("#TreeGridControl").ejTreeGrid("instance");
            treeObj.renameColumn(1, "New Text");
        }
    }

    reorderColumn(fieldName, targetIndex)

    To reorder the column with field name and target index values

    Name Type Description
    fieldName string you can pass a name of column to reorder.
    targetIndex string you can pass a target column index to be inserted.

    Example

    <button id="reorderColumn" (click)="reorderColumn($event)">reorderColumn</button>
    <ej-treegrid id="TreeGridControl">
    //...
    </ej-treegrid>
    export class AppComponent {
        constructor() {
            //...
        }
        public reorderColumn(event) {
            var treeObj = $("#TreeGridControl").ejTreeGrid("instance");
            treeObj.reorderColumn("startDate", 4);
        }
    }

    saveCell()

    To save the edited cell in TreeGrid

    Example

    <button id="saveCell" (click)="saveCell($event)">saveCell</button>
    <ej-treegrid id="TreeGridControl">
    //...
    </ej-treegrid>
    export class AppComponent {
        constructor() {
            //...
        }
        public saveCell(event) {
            var treeObj = $("#TreeGridControl").ejTreeGrid("instance");
            treeObj.saveCell();
        }
    }

    scrollOffset(left, top)

    Sets the scroll left and scroll top offsets of TreeGrid.

    Name Type Description
    Left String Pass a value to set left position of horizontal scroll bar.
    Top String Pass a value to set top position of vertical scroll bar.

    Usage: we can able to change the left and top position of horizontal and vertical scroll bar dynamically.

    Example

    <button id="scrollOffset" (click)="scrollOffset($event)">scrollOffset</button>
    <ej-treegrid id="TreeGridControl">
    //...
    </ej-treegrid>
    export class AppComponent {
        constructor() {
            //...
        }
        public scrollOffset(event) {
            var treeObj = $("#TreeGridControl").ejTreeGrid("instance");
            treeObj.scrollOffset(50,50)
        }
    }

    scrollToBottom()

    Sets the scroll top offset of TreeGrid to maximum value.

    Usage:we can able to scroll the TreeGrid’s content to the maximum offset vertically.

    Example

    <button id="scrollToBottom" (click)="scrollToBottom($event)">scrollToBottom</button>
    <ej-treegrid id="TreeGridControl">
    //...
    </ej-treegrid>
    export class AppComponent {
        constructor() {
            //...
        }
        public scrollToBottom(event) {
            var treeObj = $("#TreeGridControl").ejTreeGrid("instance");
            treeObj.scrollToBottom()
        }
    }

    scrollToTop()

    Sets the scroll top offset of TreeGrid to 0.

    Usage: we can able to scroll the TreeGrid’s content to 0 offset vertically.

    Example

    <button id="scrollToTop" (click)="scrollToTop($event)">scrollToTop</button>
    <ej-treegrid id="TreeGridControl">
    //...
    </ej-treegrid>
    export class AppComponent {
        constructor() {
            //...
        }
        public scrollToTop(event) {
            var treeObj = $("#TreeGridControl").ejTreeGrid("instance");
            treeObj.scrollToTop()
        }
    }

    selectCells(Indexes,preservePreviousSelectedCell)

    To select cell based on the cell and row index dynamically.

    Name Type Description
    Indexes array array of cell indexes to be select
    preservePreviousSelectedCell boolean Defines that we need to preserve the previously selected cells or not

    Example

    <button id="selectCells" (click)="selectCells($event)">selectCells</button>
    <ej-treegrid id="TreeGridControl">
    //...
    </ej-treegrid>
    export class AppComponent {
        constructor() {
            //...
        }
        public selectCells(event) {
            var treeObj = $("#TreeGridControl").ejTreeGrid("instance");
            var indexes = [{rowIndex:4, cellIndex: 4}, {rowIndex: 3, cellIndex: 3}];
            treeObj.selectCells(indexes, true);
        }
    }

    showAddDialog()

    To open the dialog to add new record/row in TreeGrid.

    Usage: we can able to open add dialog dynamically.

    Example

    <button id="showAddDialog" (click)="showAddDialog($event)">showAddDialog</button>
    <ej-treegrid id="TreeGridControl">
    //...
    </ej-treegrid>
    export class AppComponent {
        constructor() {
            //...
        }
        public showAddDialog(event) {
            var treeObj = $("#TreeGridControl").ejTreeGrid("instance");
            treeObj.showAddDialog();
        }
    }

    showColumn(headerText)

    To show the column by using header text

    Name Type Description
    headerText string you can pass a header text of a column to show.

    Example

    <button id="showColumn" (click)="showColumn($event)">showColumn</button>
    <ej-treegrid id="TreeGridControl">
    //...
    </ej-treegrid>
    export class AppComponent {
        constructor() {
            //...
        }
        public showColumn(event) {
            var treeObj = $("#TreeGridControl").ejTreeGrid("instance");
            treeObj.showColumn("Task Name");
        }
    }

    showEditDialog(index)

    To open the dialog to edit a row/record in TreeGrid.

    Name Type Description
    Index number Pass the index of row to be edit.

    Usage: we can able to edit any row dynamically through edit dialog. If the index value is not passed as parameter then the selected row gets edited. It’s necessary to select a row before opening edit dialog when you are not passing any index as parameter.

    Example

    <button id="showEditDialog" (click)="showEditDialog($event)">showEditDialog</button>
    <ej-treegrid id="TreeGridControl">
    //...
    </ej-treegrid>
    export class AppComponent {
        constructor() {
            //...
        }
        public showEditDialog(event) {
            var treeObj = $("#TreeGridControl").ejTreeGrid("instance");
            treeObj.showEditDialog(3);
        }
    }

    showHideDetailsRow(rowIndex)

    Show/Hide the detail row of a specific record.

    Name Type Description
    rowIndex number Pass the row index of record to show/hide the detail row.

    Usage: we can able to dynamically show/hide the detail row of any record by passing its index as parameter.

    Example

    <button id="showHideDetailsRow" (click)="showHideDetailsRow($event)">showHideDetailsRow</button>
    <ej-treegrid id="TreeGridControl">
    //...
    </ej-treegrid>
    export class AppComponent {
        constructor() {
            //...
        }
        public showHideDetailsRow(event) {
            var treeObj = $("#TreeGridControl").ejTreeGrid("instance");
            treeObj.showHideDetailsRow(3);
        }
    }

    sortColumn(fieldName, columnSortDirection)

    To sorting the data based on the particular fields

    Name Type Description
    fieldName string you can pass a name of column to sort.
    columnSortDirection string you can pass a sort direction to sort the column.

    Example

    <button id="sortColumn" (click)="sortColumn($event)">sortColumn</button>
    <ej-treegrid id="TreeGridControl">
    //...
    </ej-treegrid>
    export class AppComponent {
        constructor() {
            //...
        }
        public sortColumn(event) {
            var treeObj = $("#TreeGridControl").ejTreeGrid("instance");
            treeObj.sortColumn("Start Date", ej.sortOrder.Descending);
        }
    }

    updateCheckboxColumn(fieldName)

    To change the checkbox selection to any column.

    Name Type Description
    fieldName string Pass the column field name to check box selection to that column.

    Usage: we can able to change the selection checkbox column dynamically.

    Example

    <button id="updateCheckboxColumn" (click)="updateCheckboxColumn($event)">updateCheckboxColumn</button>
    <ej-treegrid id="TreeGridControl">
    //...
    </ej-treegrid>
    export class AppComponent {
        constructor() {
            //...
        }
        public updateCheckboxColumn(event) {
            var treeObj = $("#TreeGridControl").ejTreeGrid("instance");
            treeObj.updateCheckboxColumn("taskName");
        }
    }

    updateRecordByIndex(index, data)

    To update the value of TreeGrid row by using row index.

    Name Type Description
    index number index of record to be updated
    data object object with modified field value

    Example

    <button id="updateRecordByIndex" (click)="updateRecordByIndex($event)">updateRecordByIndex</button>
    <ej-treegrid id="TreeGridControl">
    //...
    </ej-treegrid>
    export class AppComponent {
        constructor() {
            //...
        }
        public updateCheckboxColumn(event) {
            var treeObj = $("#TreeGridControl").ejTreeGrid("instance");
            var data = { taskName: "updated value"};
            treeObj.updateRecordByIndex(4, data);
        }
    }

    updateResponsiveMinWidth(width)

    Sets the minimum responsive width for TreeGrid.

    Name Type Description
    width String Pass the minimum responsive width, above which the TreeGrid needs to work in responsive mode.

    Usage: we can able to change the minimum responsive width of TreeGrid dynamically.

    Returns

    void

    Example

    <button id="updateResponsiveMinWidth" (click)="updateResponsiveMinWidth($event)">updateResponsiveMinWidth</button>
    <ej-treegrid id="TreeGridControl">
    //...
    </ej-treegrid>
    export class AppComponent {
        constructor() {
            //...
        }
        public updateResponsiveMinWidth(event) {
            var treeObj = $("#TreeGridControl").ejTreeGrid("instance");
            treeObj.updateResponsiveMinWidth("200px");
        }
    }

    deleteRow()

    To delete a selected row in TreeGrid.

    Example

    <button id="deleteRow" (click)="deleteRow()">Delete Row</button>
    <ej-treegrid id="TreeGridControl">
    //...
    </ej-treegrid>
    export class AppComponent {
        constructor() {
            //...
        }
        public deleteRow(event) {
            var treeObj = $("#TreeGridControl").ejTreeGrid("instance");
            treeObj.deleteRow();
        }
    }

    Events

    actionBegin

    Triggered before every success event of TreeGrid action.

    Name Type Description
    argument Object Event parameters before completing the sorting operation in TreeGrid:
    Name Type Description
    cancel boolean Returns the cancel option value.
    columnName string Returns the current grouped column field name.
    model object Returns the TreeGrid model.
    requestType string Returns request type.
    type string Returns the name of the event.
    columnSortDirection string Returns the direction of sorting ascending or descending.
    argument Object Event parameters while performing expand operation:
    Name Type Description
    cancel boolean Returns the cancel option value.
    keyValue string Returns the value of expanding parent element.
    model object Returns the TreeGrid model.
    requestType string Returns request type.
    type string Returns the name of the event.
    argument Object Event parameters while performing collapse operation:
    Name Type Description
    cancel boolean Returns the cancel option value.
    keyValue string Returns the value of collapsing parent element.
    model object Returns the TreeGrid model.
    requestType string Returns request type.
    type string Returns the name of the event.
    argument Object Event parameters before completing the delete operation:
    Name Type Description
    cancel boolean Returns the cancel option value.
    data string Returns the data or deleting element.
    model object Returns the TreeGrid model.
    requestType string Returns request type.
    type string Returns the name of the event.

    Example

    <ej-treegrid id="TreeGridControl" (actionBegin)="actionBegin($event)">
    </ej-treegrid>
    export class AppComponent {
        constructor() {
    
        }
        actionBegin(sender) {
            //...
        }
    }

    actionComplete

    Triggered for every TreeGrid action success event.

    Name Type Description
    argument Object Event parameters when TreeGrid is initialized:
    Name Type Description
    cancel boolean Returns the cancel option value.
    model object Returns the grid model.
    type string Returns the name of the event.
    argument Object Event parameters after perform the sorting in grid tree is completed:
    Name Type Description
    cancel boolean Returns the cancel option value.
    columnName string Returns the current grouped column field name.
    model object Returns the TreeGrid model.
    requestType string Returns request type.
    type string Returns the name of the event.
    columnSortDirection string Returns the direction of sorting ascending or descending
    argument Object Event parameters after searching completed:
    Name Type Description
    cancel boolean Returns the cancel option value.
    keyValue string Returns the value of searched element.
    model object Returns the TreeGrid model.
    requestType string Returns request type.
    type string Returns the name of the event.
    argument Object Event parameters while performing after completing the delete operation is completed:
    Name Type Description
    cancel boolean Returns the cancel option value.
    data string Returns the data of deleted element.
    model object Returns the TreeGrid model.
    requestType string Returns request type.
    type string Returns the name of the event.
    argument Object Event parameters after the add operation completed:
    Name Type Description
    cancel boolean Returns the cancel option value.
    data string Returns the data added element.
    recordIndex number Returns selected record index
    requestType string Returns request type.
    argument Object Event parameters after the edit operation completed:
    Name Type Description
    cancel boolean Returns the cancel option value.
    data string Returns the data added element.
    recordIndex number Returns selected record index
    requestType string Returns request type.

    Example

    <ej-treegrid id="TreeGridControl" (actionComplete)="actionComplete($event)">
    </ej-treegrid>
    export class AppComponent {
        constructor() {
    
        }
        actionComplete(sender) {
            //...
        }
    }

    beforePrint

    Triggered before the printing initiated in TreeGrid.

    Name Type Description
    argument Object Arguments when beforePrint event is triggered.
    Name Type Description
    cancel boolean Returns the cancel option value.
    element object Returns the TreeGrid element which is going to be print
    requestType string Returns request type.

    Example

    <ej-treegrid id="TreeGridControl" (beforePrint)="beforePrint($event)">
    </ej-treegrid>
    export class AppComponent {
        constructor() {
    
        }
        beforePrint(sender) {
            //...
        }
    }

    beginEdit

    Triggered while enter the edit mode in the TreeGrid cell

    Name Type Description
    argument Object Arguments when beginEdit event is triggered.
    Name Type Description
    cancel boolean Returns the cancel option value.
    rowElement object Returns the row element of editing cell.
    cellElement object Returns the Element of editing cell.
    data object Returns the data of current cell record.
    columnIndex number Returns the column Index of cell belongs.

    Example

    <ej-treegrid id="TreeGridControl" (beginEdit)="beginEdit($event)">
    </ej-treegrid>
    export class AppComponent {
        constructor() {
    
        }
        beginEdit(sender) {
            //...
        }
    }

    cellSelected

    Triggered after selected a cell

    Name Type Description
    argument Object Arguments when cellSelected event is triggered.
    Name Type Description
    cancel boolean Returns the cancel option value.
    cellIndex number Returns the cell index on the selection.
    rowIndex number Returns the row index on the selection
    targetCell object Returns the selecting cell element
    targetRow object Returns the selecting row element
    data object Returns the selecting record object
    model object Returns the Gantt object Model
    previousData object Returns the previously selected row data
    previousCellIndex object Returns the previously selected cell index
    previousRowIndex object Returns the previously selected row index
    previousTargetCell object Returns the previously selected cell element
    previousTargetRow object Returns the previously selected row element

    Example

    <ej-treegrid id="TreeGridControl" (cellSelected)="cellSelected($event)">
    </ej-treegrid>
    export class AppComponent {
        constructor() {
    
        }
        cellSelected(sender) {
            //...
        }
    }

    cellSelecting

    Triggered before selecting a cell

    Name Type Description
    argument Object Arguments when cellSelecting event is triggered.
    Name Type Description
    cancel boolean Returns the cancel option value.
    cellIndex number Returns the cell index on the selection.
    rowIndex number Returns the row index on the selection
    targetCell object Returns the selecting cell element
    targetRow object Returns the selecting row element
    data object Returns the selecting record object
    model object Returns the Gantt object Model

    Example

    <ej-treegrid id="TreeGridControl" (cellSelecting)="cellSelecting($event)">
    </ej-treegrid>
    export class AppComponent {
        constructor() {
    
        }
        cellSelecting(sender) {
            //...
        }
    }

    collapsed

    Triggered after collapsed the TreeGrid record

    Name Type Description
    argument Object Arguments when collapsed event is triggered.
    Name Type Description
    cancel boolean Returns the cancel option value.
    recordIndex number Returns the row index of collapsed record.
    data object Returns the data of collapsed record..
    requestType string Returns Request Type.
    expanded boolean Returns state of a record whether it is in expanded or collapsed state.
    type string Returns the event type.

    Example

    <ej-treegrid id="TreeGridControl" (collapsed)="collapsed($event)">
    </ej-treegrid>
    export class AppComponent {
        constructor() {
    
        }
        collapsed(sender) {
            //...
        }
    }

    collapsing

    Triggered while collapsing the TreeGrid record

    Name Type Description
    argument Object Arguments when collapsing event is triggered.
    Name Type Description
    cancel boolean Returns the cancel option value.
    recordIndex number Returns the row index of collapsing record.
    data object Returns the data of collapsing record..
    type string Returns the event Type.
    expanded boolean Returns state of a record whether it is in expanded or collapsing state.

    Example

    <ej-treegrid id="TreeGridControl" (collapsing)="collapsing($event)">
    </ej-treegrid>
    export class AppComponent {
        constructor() {
    
        }
        collapsing(sender) {
            //...
        }
    }

    columnDrag

    Triggered while dragging a column

    Name Type Description
    argument Object Arguments when columnDrag event is triggered.
    Name Type Description
    cancel boolean Returns the cancel option value.
    model object Returns the control model values.
    type string Returns the event Type.
    draggedColumn object Returns the column data which is dragged
    draggedColumnIndex number Returns the index of the column being dragged
    targetColumn object Returns the target column data
    targetColumnIndex number Returns the index of the target column
    canDrop boolean Returns that we can drop over the column or not.

    Example

    <ej-treegrid id="TreeGridControl" (columnDrag)="columnDrag($event)">
    </ej-treegrid>
    export class AppComponent {
        constructor() {
    
        }
        columnDrag(sender) {
            //...
        }
    }

    columnDragStart

    Triggered when you start to drag a column

    Name Type Description
    argument Object Arguments when columnDragStart event is triggered.
    Name Type Description
    cancel boolean Returns the cancel option value.
    model object Returns the control model values.
    type string Returns the event Type.
    draggedColumn object Returns the column data which is dragged
    draggedColumnIndex number Returns the index of the column being dragged

    Example

    <ej-treegrid id="TreeGridControl" (columnDragStart)="columnDragStart($event)">
    </ej-treegrid>
    export class AppComponent {
        constructor() {
    
        }
        columnDragStart(sender) {
            //...
        }
    }

    columnDrop

    Triggered when a column is dropped

    Name Type Description
    argument Object Arguments when columnDrop event is triggered.
    Name Type Description
    cancel boolean Returns the cancel option value.
    model object Returns the control model values.
    type string Returns the event Type.
    draggedColumn object Returns the column data which is dragged
    draggedColumnIndex number Returns the index of the column being dragged
    targetColumn object Returns the target column data
    targetColumnIndex number Returns the index of the target column

    Example

    <ej-treegrid id="TreeGridControl" (columnDrop)="columnDrop($event)">
    </ej-treegrid>
    export class AppComponent {
        constructor() {
    
        }
        columnDrop(sender) {
            //...
        }
    }

    columnResizeEnd

    Triggered when a column has been resized

    Name Type Description
    argument Object Arguments when columnResizeEnd event is triggered.
    Name Type Description
    cancel boolean Returns the cancel option value.
    model object Returns the control model values.
    type string Returns the event Type.
    column object Returns the column data in which the resizing started
    columnIndex number Returns the column index in which the resizing started
    extra number Returns the column width difference, before and after the resizing
    newWidth number Returns the new column width after resized
    oldWidth number Returns column width before dragging
    target object Returns initial column element object.

    Example

    <ej-treegrid id="TreeGridControl" (columnResizeEnd)="columnResizeEnd($event)">
    </ej-treegrid>
    export class AppComponent {
        constructor() {
    
        }
        columnResizeEnd(sender) {
            //...
        }
    }

    columnResizeStart

    Triggered while start to resize a column

    Name Type Description
    argument Object Arguments when columnResizeStart event is triggered.
    Name Type Description
    cancel boolean Returns the cancel option value.
    model object Returns the control model values.
    type string Returns the event Type.
    column object Returns the column data in which the resizing started
    columnIndex number Returns the column index in which the resizing started
    oldWidth number Returns column width before dragging
    target object Returns initial column element object.

    Example

    <ej-treegrid id="TreeGridControl" (columnResizeStart)="columnResizeStart($event)">
    </ej-treegrid>
    export class AppComponent {
        constructor() {
    
        }
        columnResizeStart(sender) {
            //...
        }
    }

    columnResized

    Triggered after a column resized

    Name Type Description
    argument Object Arguments when columnResized event is triggered.
    Name Type Description
    cancel boolean Returns the cancel option value.
    model object Returns the control model values.
    type string Returns the event Type.
    column object Returns the column data which is resized
    columnIndex number Returns the index of the column being resized.
    newWidth number Returns resized column width after resized.
    oldWidth number Returns resized column width before resizing

    Example

    <ej-treegrid id="TreeGridControl" (columnResized)="columnResized($event)">
    </ej-treegrid>
    export class AppComponent {
        constructor() {
    
        }
        columnResized(sender) {
            //...
        }
    }

    contextMenuOpen

    Triggered while Context Menu is rendered in TreeGrid control

    Name Type Description
    argument Object Arguments when context menu is rendered.
    Name Type Description
    cancel boolean Returns the cancel option value.
    contextMenuItems array Returns the default context menu items to which we add custom items.
    model object Returns the TreeGrid model.
    requestType string Returns request type.
    type string Returns the name of the event.

    Example

    <ej-treegrid id="TreeGridControl" (contextMenuOpen)="contextMenuOpen($event)">
    </ej-treegrid>
    export class AppComponent {
        constructor() {
    
        }
        contextMenuOpen(sender) {
            //...
        }
    }

    create

    Triggered when TreeGrid is rendered completely

    Name Type Description
    argument Object Arguments when create event is triggered.
    Name Type Description
    cancel boolean Returns the cancel option value.
    model object Returns the TreeGrid model
    type string Returns the name of the event.

    Example

    <ej-treegrid id="TreeGridControl" (create)="create($event)">
    </ej-treegrid>
    export class AppComponent {
        constructor() {
    
        }
        create(sender) {
            //...
        }
    }

    detailsDataBound

    Triggered while rendering details template in TreeGrid

    Name Type Description
    argument Object Arguments when detailsDataBound event is triggered.
    Name Type Description
    cancel boolean Returns the cancel option value.
    data object Returns the data collection of selected row.
    detailsElement object Returns the details element of selected row.
    rowIndex number Returns the rowIndex of selected row.
    model object Returns the TreeGrid model
    type string Returns the name of the event.

    Example

    <ej-treegrid id="TreeGridControl" (detailsDataBound)="detailsDataBound($event)">
    </ej-treegrid>
    export class AppComponent {
        constructor() {
    
        }
        detailsDataBound(sender) {
            //...
        }
    }

    detailsHidden

    Triggered when details template pop-up is hidden.

    Name Type Description
    argument Object Arguments when detailsHidden event is triggered.
    Name Type Description
    cancel boolean Returns the cancel option value.
    model object Returns the TreeGrid model
    rowData object Returns the data collection of hidden details Template
    type string Returns the name of the event.

    Example

    <ej-treegrid id="TreeGridControl" (detailsHidden)="detailsHidden($event)">
    </ej-treegrid>
    export class AppComponent {
        constructor() {
    
        }
        detailsHidden(sender) {
            //...
        }
    }

    detailsShown

    Triggered when details template pop-up is shown.

    Name Type Description
    argument Object Arguments when detailsShown event is triggered.
    Name Type Description
    cancel boolean Returns the cancel option value.
    data object Returns the data collection of selected row.
    detailsElement object Returns the details element of selected row.
    rowIndex number Returns the rowIndex of selected row.
    model object Returns the TreeGrid model
    type string Returns the name of the event.

    Example

    <ej-treegrid id="TreeGridControl" (detailsShown)="detailsShown($event)">
    </ej-treegrid>
    export class AppComponent {
        constructor() {
    
        }
        detailsShown(sender) {
            //...
        }
    }

    endEdit

    Triggered after saved the modified cellValue in TreeGrid

    Name Type Description
    argument Object Arguments when endEdit event is triggered.
    Name Type Description
    cancel boolean Returns the cancel option value.
    rowElement object Returns the row element of editing cell.
    cellElement object Returns the Element of editing cell.
    data object Returns the data of edited cell record.
    columnName string Returns the column name of edited cell belongs.
    columnObject object Returns the column object of edited cell belongs.

    Example

    <ej-treegrid id="TreeGridControl" (endEdit)="endEdit($event)">
    </ej-treegrid>
    export class AppComponent {
        constructor() {
    
        }
        endEdit(sender) {
            //...
        }
    }

    expanded

    Triggered after expand the record

    Name Type Description
    argument Object Arguments when expanded event is triggered.
    Name Type Description
    cancel boolean Returns the cancel option value.
    recordIndex number Returns the row index of expanded record.
    data object Returns the data of expanded record..
    requestType string Returns Request Type.
    expanded boolean Returns state of a record whether it is in expanded or expanded state.
    type string Returns the event type.

    Example

    <ej-treegrid id="TreeGridControl" (expanded)="expanded($event)">
    </ej-treegrid>
    export class AppComponent {
        constructor() {
    
        }
        expanded(sender) {
            //...
        }
    }

    expanding

    Triggered while expanding the TreeGrid record

    Name Type Description
    argument Object Arguments when expanding event is triggered.
    Name Type Description
    cancel boolean Returns the cancel option value.
    recordIndex number Returns the row index of expanding record.
    data object Returns the data of expanding record..
    type string Returns the event Type.
    expanded boolean Returns state of a record whether it is in expanded or collapsed state.

    Example

    <ej-treegrid id="TreeGridControl" (expanding)="expanding($event)">
    </ej-treegrid>
    export class AppComponent {
        constructor() {
    
        }
        expanding(sender) {
            //...
        }
    }

    load

    Triggered while TreeGrid is loaded

    Name Type Description
    argument Object Arguments when load event is triggered.
    Name Type Description
    cancel boolean Returns the cancel option value.
    model object Returns the TreeGrid model
    type string Returns the name of the event.

    Example

    <ej-treegrid id="TreeGridControl" (load)="load($event)">
    </ej-treegrid>
    export class AppComponent {
        constructor() {
    
        }
        load(sender) {
            //...
        }
    }

    queryCellInfo

    Triggered while rendering each cell in the TreeGrid

    Name Type Description
    argument Object Arguments when queryCellInfo event is triggered.
    Name Type Description
    cancel boolean Returns the cancel option value.
    cellElement object Returns the selecting cell element.
    cellValue string Returns the value of cell.
    data object Returns the data of current cell record.
    column object Returns the column of cell belongs.

    Example

    <ej-treegrid id="TreeGridControl" (queryCellInfo)="queryCellInfo($event)">
    </ej-treegrid>
    export class AppComponent {
        constructor() {
    
        }
        queryCellInfo(sender) {
            //...
        }
    }

    recordClick

    Triggered while clicking a row, even when allowSelection property is disabled.

    Name Type Description
    argument Object Arguments when recordClick event is triggered.
    Name Type Description
    cancel boolean Returns the cancel option value.
    cell object Returns the element of clicked cell.
    cellIndex number Returns the index of the clicked cell.
    cellValue object Returns the data of clicked cell.
    row object Returns the element of the clicked row.
    rowIndex number Returns the index of the clicked row.
    columnName string Returns the column name of the clicked cell.

    Example

    <ej-treegrid id="TreeGridControl" (recordClick)="recordClick($event)">
    </ej-treegrid>
    export class AppComponent {
        constructor() {
    
        }
        recordClick(sender) {
            //...
        }
    }

    recordDoubleClick

    Triggered during record double click action, even when allowSelection property is disabled.

    Name Type Description
    argument Object Arguments when recordDoubleClick event is triggered.
    Name Type Description
    cancel boolean Returns the cancel option value.
    cell object Returns the element of clicked cell.
    cellIndex number Returns the index of the clicked cell.
    cellValue object Returns the data of clicked cell.
    row object Returns the element of the clicked row.
    rowIndex number Returns the index of the clicked row.
    columnName string Returns the column name of the clicked cell.

    Example

    <ej-treegrid id="TreeGridControl" (recordDoubleClick)="recordDoubleClick($event)">
    </ej-treegrid>
    export class AppComponent {
        constructor() {
    
        }
        recordDoubleClick(sender) {
            //...
        }
    }

    rowDataBound

    Triggered while rendering each row

    Name Type Description
    argument Object Arguments when rowDataBound event is triggered.
    Name Type Description
    cancel boolean Returns the cancel option value.
    rowElement object Returns the row element of rendering row.
    data object Returns the data of rendering row record.

    Example

    <ej-treegrid id="TreeGridControl" (rowDataBound)="rowDataBound($event)">
    </ej-treegrid>
    export class AppComponent {
        constructor() {
    
        }
        rowDataBound(sender) {
            //...
        }
    }

    rowDrag

    Triggered while dragging a row in TreeGrid control

    Name Type Description
    argument Object Arguments when dragging a row.
    Name Type Description
    cancel boolean Returns the cancel option value.
    draggedRow object Returns the row which we start to drag.
    draggedRowIndex number Returns the row index which we start to drag.
    dropPosition string Returns the drop position details such as insertAbove,insertBelow,insertAsChild and invalidPosition
    targetRow object Returns the row on which we are dragging.
    targetRowIndex number Returns the row index on which we are dragging.
    canDrop boolean Returns that we can drop over that record or not.
    model object Returns the TreeGrid model.
    requestType string Returns request type.
    type string Returns the name of the event.

    Example

    <ej-treegrid id="TreeGridControl" (rowDrag)="rowDrag($event)">
    </ej-treegrid>
    export class AppComponent {
        constructor() {
    
        }
        rowDrag(sender) {
            //...
        }
    }

    rowDragStart

    Triggered while start to drag row in TreeGrid control

    Name Type Description
    argument Object Arguments when drag starts.
    Name Type Description
    cancel boolean Returns the cancel option value.
    draggedRow object Returns the row which we start to drag.
    draggedRowIndex boolean Returns the row index which we start to drag.
    model object Returns the TreeGrid model.
    requestType string Returns request type.
    type string Returns the name of the event.

    Example

    <ej-treegrid id="TreeGridControl" (rowDragStart)="rowDragStart($event)">
    </ej-treegrid>
    export class AppComponent {
        constructor() {
    
        }
        rowDragStart(sender) {
            //...
        }
    }

    rowDragStop

    Triggered while drop a row in TreeGrid control

    Name Type Description
    argument Object Arguments when dragging a row.
    Name Type Description
    cancel boolean Returns the cancel option value.
    draggedRow object Returns the row which we start to drag.
    draggedRowIndex number Returns the row index which we start to drag.
    targetRow object Returns the row which we are dropped to row.
    targetRowIndex number Returns the row index which we are dropped to row.
    model object Returns the TreeGrid model.
    requestType string Returns request type.
    type string Returns the name of the event.

    Example

    <ej-treegrid id="TreeGridControl" (rowDragStop)="rowDragStop($event)">
    </ej-treegrid>
    export class AppComponent {
        constructor() {
    
        }
        rowDragStop(sender) {
            //...
        }
    }

    rowSelected

    Triggered after the row is selected.

    Name Type Description
    argument Object Arguments when rowSelected event is triggered.
    Name Type Description
    cancel boolean Returns the cancel option value.
    targetRow object Returns the selecting row element.
    recordIndex number Returns the index of selecting row record.
    data object Returns the data of selected record.
    type string Returns the event type.

    Example

    <ej-treegrid id="TreeGridControl" (rowSelected)="rowSelected($event)">
    </ej-treegrid>
    export class AppComponent {
        constructor() {
    
        }
        rowSelected(sender) {
            //...
        }
    }

    rowSelecting

    Triggered before the row is going to be selected.

    Name Type Description
    argument Object Arguments when rowSelecting event is triggered.
    Name Type Description
    cancel boolean Returns the cancel option value.
    data object Returns the data selecting record.
    recordIndex string Returns the index of selecting row record.
    targetRow object Returns the selecting row element.
    previousData object Returns the previous selected data.
    previousIndex string Returns the previous selected row index.
    previousTreeGridRow object Returns the previous selected row element.

    Example

    <ej-treegrid id="TreeGridControl" (rowSelecting)="rowSelecting($event)">
    </ej-treegrid>
    export class AppComponent {
        constructor() {
    
        }
        rowSelecting(sender) {
            //...
        }
    }

    toolbarClick

    Triggered when toolbar item is clicked in TreeGrid.

    Name Type Description
    argument Object Arguments when toolbarClick event is triggered.
    Name Type Description
    cancel boolean Returns the cancel option value.
    currentTarget object Returns the current item.
    model object Returns the TreeGrid model.
    itemName string Returns the name of the toolbar item on which mouse click has been performed
    type string Returns the name of the event.

    ####Example

    <ej-treegrid id="TreeGridControl" (toolbarClick)="toolbarClick($event)">
    </ej-treegrid>
    export class AppComponent {
        constructor() {
    
        }
        toolbarClick(sender) {
            //...
        }
    }