ejTreeGrid

22 Apr 201924 minutes to read

Custom Design for HTML TreeGrid control.

Example

<ej-treegrid id="TreeGridControl" [dataSource]="projectData">

</ej-treegrid>

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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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`

Default Value

null

Example

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

Example

HTML
TS
<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

Example

HTML
TS
<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

Example

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

ej.FilterOperators.contain
ej.FilterOperators.equal
ej.FilterOperators.notEqual
ej.FilterOperators.startsWith
ej.FilterOperators.endsWith

Default Value

“contains”

Example

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

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

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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

HTML
TS
<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

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

    }
    toolbarClick(sender) {
        //...
    }
}

ejTreeGrid

Example

Requires

Members

allowColumnReordering boolean

Default Value

Example

allowColumnResize boolean

Default Value

Example

allowDragAndDrop boolean

Default Value

Example

allowFiltering boolean

Default Value

Example

allowKeyboardNavigation boolean

Default Value

Example

allowMultiSorting boolean

Default Value

Example

allowPaging boolean

Default Value

Example

allowSearching boolean

Default Value

Example

allowSelection boolean

Default Value

Example

allowSorting boolean

Default Value

Example

allowTextWrap boolean

Default Value

Example

altRowTemplateID string

Default Value

Example

cellTooltipTemplate string

Default Value

Example

childMapping string

Default Value

Example

collapsibleTotalSummary boolean

Default Value

Example

columnDialogFields array

Default Value

Example

columnResizeSettings object

columnResizeSettings.columnResizeMode enum

Default Value

Example

columns array

Example

columns.allowCellSelection boolean

Default Value

Example

columns.allowEditing boolean

Default Value

Example

columns.allowFiltering boolean

Default Value

Example

columns.allowFilteringBlankContent boolean

Default Value

Example

columns.allowFreezing boolean

Default Value

Example

columns.allowSorting boolean

Default Value

Example

columns.angularTemplate string

Default Value

Example

columns.clipMode enum

allowColumnReordering `boolean`

allowColumnResize `boolean`

allowDragAndDrop `boolean`

allowFiltering `boolean`

allowKeyboardNavigation `boolean`

allowMultiSorting `boolean`

allowPaging `boolean`

allowSearching `boolean`

allowSelection `boolean`

allowSorting `boolean`

allowTextWrap `boolean`

altRowTemplateID `string`

cellTooltipTemplate `string`

childMapping `string`

collapsibleTotalSummary `boolean`

columnDialogFields `array`

columnResizeSettings `object`

columnResizeSettings.columnResizeMode `enum`

columns `array`

columns.allowCellSelection `boolean`

columns.allowEditing `boolean`

columns.allowFiltering `boolean`

columns.allowFilteringBlankContent `boolean`

columns.allowFreezing `boolean`

columns.allowSorting `boolean`

columns.angularTemplate `string`

columns.clipMode `enum`

columns.commands `array`

columns.commands.buttonOptions `object`

columns.commands.type `enum`

columns.displayAsCheckbox `boolean`

columns.dropdownData `string`

columns.editParams `Object`

columns.editTemplate `Object`

columns.editType `enum`

columns.field `string`

columns.filterEditType `enum`

columns.format `object`

columns.headerTemplateID `string`

columns.headerText `string`

columns.headerTextAlign `enum`

columns.headerTooltip `string`

columns.isFrozen `boolean`

columns.isTemplateColumn `boolean`

columns.priority `number`

columns.showCheckbox `boolean`

columns.showInColumnChooser `boolean`

columns.template `string`

columns.templateID `string`

columns.textAlign `enum`