ejTreeGrid

30 Aug 201824 minutes to read

Custom Design for HTML TreeGrid control.

Syntax

$(element).ejTreeGrid(options);

Name Type Description
options object settings for TreeGrid

Example

  • HTML
  • <div id="treeGridContainer"></div> 
     
    <script>
    // Create TreeGrid
    $('#treeGridContainer').ejTreeGrid({
        dataSource: projectData,
    });    
    </script>

    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
  • $("#treeGridContainer").ejTreeGrid({ allowColumnReordering: true });

    allowColumnResize boolean

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

    Default Value

    • false

    Example

  • HTML
  • $("#treeGridContainer").ejTreeGrid({ allowColumnResize: true });

    allowDragAndDrop boolean

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

    Default Value

    • false

    Example

  • HTML
  • $("#treeGridContainer").ejTreeGrid({  allowDragAndDrop : true });

    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
  • $("#treeGridContainer").ejTreeGrid({  allowFiltering : true });

    allowKeyboardNavigation boolean

    Enables or disables keyboard navigation.

    Default Value

    • true

    Example

  • HTML
  • $("#treeGridContainer").ejTreeGrid({ allowKeyboardNavigation : true});

    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
  • $("#treeGridContainer").ejTreeGrid({ allowMultiSorting : true});

    allowPaging boolean

    Enables/disables pagination of rows in TreeGrid

    Default Value

    • false

    Example

  • HTML
  • $("#treeGridContainer").ejTreeGrid({ allowPaging : true });

    allowSearching boolean

    Enables or disables the toolbar searching in TreeGrid.

    Default Value

    • false

    Example

  • HTML
  • $("#treeGridContainer").ejTreeGrid({ allowSearching : true });

    allowSelection boolean

    Enables or disables the ability to select a row interactively.

    Default Value

    • true

    Example

  • HTML
  • $("#treeGridContainer").ejTreeGrid({ allowSelection:  true });

    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
  • $("#treeGridContainer").ejTreeGrid({ allowSorting : true });

    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
  • $("#treeGridContainer").ejTreeGrid({ allowTextWrap : true });

    altRowTemplateID string

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

    Default Value

    • ””

    Example

  • HTML
  • $("#treeGridContainer").ejTreeGrid(
    {
            altRowTemplateID: "altRowCustomTemplate"
    });

    cellTooltipTemplate string

    Specifies the template for cell tooltip

    Default Value

    • null

    Example

  • HTML
  • $("#treeGridContainer").ejTreeGrid({ cellTooltipTemplate : "CellTooltipTemplate"});

    childMapping string

    Specifies the mapping property path for sub tasks in datasource

    Default Value

    • ””

    Example

  • HTML
  • <script>                      
            $("#treeGridContainer").ejTreeGrid({  childMapping : "Children" });
    </script>

    collapsibleTotalSummary boolean

    Enables or disables the expandable/collapsible footer summary row. By default expander icon for footer summary will be rendered in first column of first summary row.

    Default Value

    • false

    Example

  • HTML
  • $("#treeGridContainer").ejTreeGrid({
        collapsibleTotalSummary: true
    });

    columnDialogFields array

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

    Default Value

    • []

    Example

  • HTML
  • $("#treeGridContainer").ejTreeGrid({ 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
    NextColumn At load time columns are stretched with control width, while resizing the column, current column width adjusted based on next column
    Normal In this mode columns are stretched with control width in load time and on resizing action current column width was adjusted with all columns.

    Default Value

    • ej.TreeGrid.ColumnResizeMode.Normal

    Example

  • HTML
  • $("#treeGridContainer").ejTreeGrid({  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
  • $("#treeGridContainer").ejTreeGrid(
     {
        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
  • $("#treeGridContainer").ejTreeGrid({ columns: [{ allowCellSelection: true },{allowCellSelection: false }]  });

    columns.allowEditing boolean

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

    Default Value

    • false

    Example

  • HTML
  • $("#treeGridContainer").ejTreeGrid({columns: [{  allowEditing: false }]});

    columns.allowFiltering boolean

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

    Default Value

    • false

    Example

  • HTML
  • $("#treeGridContainer").ejTreeGrid({ columns: [{ allowFiltering: true },{allowFiltering: false }] });

    columns.allowFilteringBlankContent boolean

    Enables the blanks option in ejDropDownList mapped in TreeGrid column

    Default Value

    • true

    Example

  • HTML
  • $("#treeGridContainer").ejTreeGrid({ columns: [{ allowFilteringBlankContent: false }});

    columns.allowFreezing boolean

    Enables or disables the ability to freeze/unfreeze the columns

    Default Value

    • false

    Example

  • HTML
  • $("#treeGridContainer").ejTreeGrid({columns: [{  allowFreezing: false }]});

    columns.allowSorting boolean

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

    Default Value

    • false

    Example

  • HTML
  • $("#treeGridContainer").ejTreeGrid({ 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

  • JS
  • <script type="text/ng-template" id="ngColumnTemplate">
        <div style="padding:5px;">
            <img src="content/images/treegrid/.png" />
        </div>
    </script>
  • HTML
  • $("#treeGridContainer").ejTreeGrid({
       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
  • $("#treeGridContainer").ejTreeGrid({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
  • $("#treeGridContainer").ejTreeGrid({ 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
  • $("#treeGridContainer").ejTreeGrid({ 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
  • <div id="treeGridContainer"></div> 
    <script>
    $("#treeGridContainer").ejTreeGrid({    
        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" } }
                   ]             
               }
    	] 
    });
    </script>

    columns.displayAsCheckbox boolean

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

    Default Value

    • false

    Example

  • HTML
  • $("#treeGridContainer").ejTreeGrid({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
  • var dataSource = [
            //
            { id: 4, text: "Critical", value: "Critical" }
    ];
    $("#treeGridContainer").ejTreeGrid(columns: [                    
            { field: "priority", headerText: "Priority", editType: "dropdownedit", dropdownData: dataSource}
    ]);

    columns.editParams Object

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

    Default Value

    • -

    Example

  • HTML
  • $("#treeGridContainer").ejTreeGrid({columns: [    
    { field: "priority", headerText: "Priority", editType: "dropdownedit", 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
  • $("#treeGridContainer ").ejTreeGrid ({
        //...
        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
  • $("#treeGridContainer").ejTreeGrid({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
  • $("#treeGridContainer").ejTreeGrid({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
  • $("#treeGridContainer").ejTreeGrid({columns: [{ filterEditType: ej.TreeGrid.EditingType.String},{filterEditType: ej.TreeGrid.EditingType.Boolean}]});

    columns.filterType enum

    Gets or sets a value to render either excel or menu filtering in TreeGrid column filtering.

    Name Description
    Menu Specifies the filter type as menu.
    Excel Specifies the filter type as excel.

    Default Value

    • null

    Example

  • HTML
  • $("#treeGridContainer").ejTreeGrid({columns: [{ headerText: "TaskName",filterType:"excel"}]});

    columns.format object

    Specifies the display format of a column

    Default Value

    • null

    Example

  • HTML
  • $("#treeGridContainer").ejTreeGrid({columns: [{ field: "Currency",  format: "{0:C2}" }, //... ]});

    columns.headerTemplateID string

    Specifies the header template value for the column header

    Default Value

    • ””

    Example

  • HTML
  • $("#treeGridContainer").ejTreeGrid({columns: [{  headerTemplateID: "#dataTemplate1"},{ headerTemplateID: "#dataTemplate2"}]});

    columns.headerText string

    Header text of the column.

    Default Value

    • null

    Example

  • HTML
  • $("#treeGridContainer").ejTreeGrid({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
  • $("#treeGridContainer").ejTreeGrid({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
  • $("#treeGridContainer").ejTreeGrid({columns: [{  headerTooltip: "" }]});

    columns.isFrozen boolean

    Specifies whether the column is frozen

    Default Value

    • false

    Example

  • HTML
  • $("#treeGridContainer").ejTreeGrid({columns: [{  isFrozen: true}]});

    columns.isTemplateColumn boolean

    Specifies whether the column is a template column

    Default Value

    • false

    Example

  • HTML
  • $("#treeGridContainer").ejTreeGrid({columns: [{ field:"CustomColumn", isTemplateColumn: true, templateID: "customColumnTemplate"}]});

    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
  • <div id="treeGridContainer"></div>          
    <script>
    $("#treeGridContainer").ejTreeGrid({
          //...
          columns: [
                    { field: "taskID", headerText: "Task Id", width: "45", editType: "numericedit" },
                    { 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: "numericedit", priority: 6 },
                    { field: "progress", headerText: "Progress", editType: "numericedit",priority:6 }
                ],
          //... 
    });
    </script>

    columns.showCheckbox boolean

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

    Default Value

    • false

    Example

  • HTML
  • $("#treeGridContainer").ejTreeGrid({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
  • $("#treeGridContainer").ejTreeGrid({columns: [{  showInColumnChooser: false }]});

    columns.template string

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

    Default Value

    • ””

    Example

  • HTML
  • $("#treeGridContainer").ejTreeGrid({
        columns: [{
             isTemplateColumn: true,
             template: "<script type="text/x-jsrender" id="columnTemplate">
                       <div style="display:inline-block;">
                       <img src="../images/gantt/.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

  • JS
  • <script type="text/x-jsrender" id="columnTemplate">      
      <div style="display:inline-block;">
       <img src="../images/gantt/.png" height="40" />
      </div>        
    </script>
  • HTML
  • $("#treeGridContainer").ejTreeGrid({
        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
  • $("#treeGridContainer").ejTreeGrid({columns: [{  textAlign: ej.TextAlign.Center},{ textAlign: ej.TextAlign.Right}]});

    columns.tooltip string

    Sets the tooltip template for the specific column.

    Default Value

    • null

    Example

  • HTML
  • $("#treeGridContainer").ejTreeGrid({columns: [{  tooltip: "" }]});

    columns.validationRules Object

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

    Example

  • HTML
  • <div id="treeGridContainer"></div>          
    <script>
    $("#treeGridContainer").ejTreeGrid({
      editSettings: {allowEditing: true, allowAdding: true},
      columns:[{field:"TaskID", validationRules: { required: true, number: true }},{field:"TaskName"},{field:"StartDate"}] 
    });
    </script>

    columns.visible boolean

    Controls the visibility of the column.

    Default Value

    • true

    Example

  • HTML
  • $("#treeGridContainer").ejTreeGrid({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
  • $("#treeGridContainer").ejTreeGrid({columns: [{  width: 40 }]});

    commonWidth number

    Defines the common width for all the columns in TreeGrid

    Default Value

    • 150

    Example

  • HTML
  • $("#treeGridContainer").ejTreeGrid({  commonWidth:180 });

    contextMenuSettings object

    Options for displaying and customizing context menu items.

    contextMenuSettings.contextMenuItems array

    Option for adding items to context menu.

    Name Description
    Add Enables the add menu item in context menu
    Edit Enables the edit menu item in context menu
    Delete Enables the edit menu item in context menu

    Default Value

    • []

    Example

  • HTML
  • $("#treeGridContainer").ejTreeGrid({ contextMenuItems: [ej.TreeGrid.ContextMenuItems.Add,ej.TreeGrid.ContextMenuItems.Edit] });

    contextMenuSettings.showContextMenu boolean

    Shows/hides the context menu.

    Default Value

    • false

    Example

  • HTML
  • $("#treeGridContainer").ejTreeGrid(contextMenuSettings :{ showContextMenu:  true });

    cssClass string

    Specify the CSS class for TreeGrid to achieve custom theme.

    Default Value

    • ””

    Example

  • HTML
  • <div id="treeGridContainer"></div> 
    <script>          
            $("#treeGridContainer").ejTreeGrid({  cssClass : "gradient-lime" });
    </script>

    dataSource array

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

    Default Value

    • null

    Example

  • HTML
  • $("#treeGridContainer").ejTreeGrid(
     {
        dataSource:[{Id:2,TaskName:"Testing",startDate:"12/1/2000",Duration:5 }]    
     });

    detailsTemplate string

    Specifies the template for details view

    Default Value

    • ””

    Example

  • HTML
  • $("#treeGridContainer").ejTreeGrid({
        detailsTemplate: "#detailsTemplate"
    });

    detailsRowHeight number

    Specifies the row height of the details view

    Default Value

    • 100

    Example

  • HTML
  • $("#treeGridContainer").ejTreeGrid({
        detailsRowHeight: "150",
    });

    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
  • $("#treeGridContainer").ejTreeGrid(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
  • $("#treeGridContainer").ejTreeGrid(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
  • $("#treeGridContainer").ejTreeGrid(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
  • $("#treeGridContainer").ejTreeGrid({  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
  • $("#treeGridContainer").ejTreeGrid({  editSettings:{allowDeleting : true} });

    editSettings.allowEditing boolean

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

    Default Value

    • false

    Example

  • HTML
  • $("#treeGridContainer").ejTreeGrid({  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
  • $("#treeGridContainer").ejTreeGrid({  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
  • $("#treeGridContainer").ejTreeGrid({  editSettings:{beginEditAction : ej.TreeGrid.BeginEditAction.Click} });

    editSettings.dialogEditorTemplateID string

    Specifies the template ID for the custom dialog.

    Default Value

    • null

    Example

  • HTML
  • $("#treeGridContainer").ejTreeGrid({  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
  • $("#treeGridContainer").ejTreeGrid({  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

    • ej.TreeGrid.RowPosition.Top

    Example

  • HTML
  • $("#treeGridContainer").ejTreeGrid({  editSettings:{rowPosition : ej.TreeGrid.RowPosition.Bottom} });

    editSettings.showDeleteConfirmDialog boolean

    Enable or disable the confirmation dialog while deleting the record.

    Default Value

    • false

    Example

  • HTML
  • $("#treeGridContainer").ejTreeGrid({  editSettings:{showDeleteConfirmDialog  : true} });

    enableAltRow boolean

    Specifies whether to render alternate rows in different background colors.

    Default Value

    • true

    Example

  • HTML
  • $("#treeGridContainer").ejTreeGrid({ enableAltRow : false});

    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
  • $("#treeGridContainer").ejTreeGrid(
     {
        enableCollapseAll: false
     });

    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
  • $("#treeGridContainer").ejTreeGrid({ enableLoadOnDemand : true});

    enableResize boolean

    Specifies whether to resize TreeGrid whenever window size changes.

    Default Value

    • false

    Example

  • HTML
  • $("#treeGridContainer").ejTreeGrid({enableResize:true});

    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
  • $("#treeGridContainer").ejTreeGrid({ enableVirtualization : true});

    expandStateMapping string

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

    Default Value

    • ””

    Example

  • HTML
  • <div id="treeGridContainer"></div> 
    <script>                  
           $("#treeGridContainer").ejTreeGrid({ expandStateMapping : "isExpanded" });
    </script>

    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
  • $("#treeGridContainer").ejTreeGrid({
        filterSettings: {
            enableCaseSensitivity:true,
        },
    });

    filterSettings.enableComplexBlankFilter boolean

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

    Default Value

    • true

    Example

  • HTML
  • $("#treeGridContainer").ejTreeGrid({
        filterSettings: {
            enableComplexBlankFilter:false,
        },
    });

    filterSettings.filterBarMode string

    Specifies the mode on which column filtering should start

    Default Value

    • “immediate”

    Example

  • HTML
  • $("#treeGridContainer").ejTreeGrid({  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
  • $("#treeGridContainer").ejTreeGrid({  filterSettings: { filterHierarchyMode : ej.TreeGrid.FilterHierarchyMode.Child} });

    filterSettings.filterType enum

    Specifies the type of column filtering.

    Name Description
    FilterBar Enables the filterbar filtering
    Menu Enables the menu filtering
    Excel Enables the excel filtering

    Default Value

    • ej.TreeGrid.FilterType.FilterBar

    Example

  • HTML
  • $("#treeGridContainer").ejTreeGrid({  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
  • $("#treeGridContainer").ejTreeGrid({
        filterSettings: {
            filteredColumns: [{
                value: "plan",
                field: "taskName",
                predicate: "and",
                operator: "startswith"
            }]
        },
    });

    filterSettings.maxFilterChoices 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
  • $("#treeGridContainer").ejTreeGrid({
        filterSettings: {
            maxFilterChoices: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
  • $("#treeGridContainer").ejTreeGrid({ 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
  • $("#treeGridContainer").ejTreeGrid({  IdMapping : "ID" });

    isResponsive boolean

    Enables or disables the responsiveness of TreeGrid

    Default Value

    • false

    Example

  • HTML
  • $("#treeGridContainer").ejTreeGrid({  isResponsive : true });

    locale string

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

    Default Value

    • “en-US”

    Example

  • HTML
  • $("#treeGridContainer").ejTreeGrid({  locale : "fr-FR" });

    pageSettings object

    Specifies the options for customizing the pager.

    pageSettings.currentPage number

    Specifies the current page to display at load time.

    Default Value

    • 1

    Example

  • HTML
  • <div id="treeGridContainer"></div> 
    <script>                  
    $("#treeGridContainer").ejTreeGrid(
    {  
            pageSettings:{currentPage : 2}
    });
    </script>

    pageSettings.pageCount number

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

    Default Value

    • 8

    Example

  • HTML
  • <div id="treeGridContainer"></div> 
    <script>                          
    $("#treeGridContainer").ejGantt({  
            pageSettings:{ pageCount: 10 }
    });
    </script>

    pageSettings.pageSize number

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

    Default Value

    • 12

    Example

  • HTML
  • <div id="treeGridContainer"></div> 
    <script>                  
    $("#treeGridContainer").ejTreeGrid({  
            pageSettings:{pageSize : 10}
    });
    </script>

    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
  • $("#treeGridContainer").ejTreeGrid({ 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
  • $("#treeGridContainer").ejTreeGrid({ pageSettings :{ printMode:ej.TreeGrid.PrintMode.CurrentPage} });

    pageSettings.template string

    Specifies the Custom template for Pager control.

    Default Value

    • null

    Example

  • HTML
  • $("#treeGridContainer").ejTreeGrid({ 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
  • <div id="treeGridContainer"></div> 
    <script>                  
    $("#treeGridContainer").ejTreeGrid({  
            pageSettings:{totalRecordsCount : null}
    });
    </script>

    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
  • $("#treeGridContainer").ejTreeGrid({  parentIdMapping : "ID" });

    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
  • $("#treeGridContainer").ejTreeGrid({  parseRowTemplate : false });

    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
  • $("#treeGridContainer").ejTreeGrid(
     {
        query:ej.Query().from("Categories").select("CategoryID,CategoryName").take(3);      
     });

    rowHeight number

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

    Default Value

    • 30

    Example

  • HTML
  • $("#treeGridContainer").ejTreeGrid({  
                            rowHeight : 30,
                            });

    rowTemplateID string

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

    Default Value

    • ””

    Example

  • HTML
  • $("#treeGridContainer").ejTreeGrid(
     {
        rowTemplateID: "customTemplate"
     });

    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
  • $("#treeGridContainer").ejTreeGrid({
        searchSettings: {
                fields:["TaskId","TaskName"],
        }
    });

    searchSettings.ignoreCase boolean

    Enables or disables the case sensitivity while searching.

    Default Value

    • true

    Example

  • HTML
  • $("#treeGridContainer").ejTreeGrid({
        searchSettings: {
                ignoreCase:false,
        }
    });

    searchSettings.key string

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

    Default Value

    • ””

    Example

  • HTML
  • $("#treeGridContainer").ejTreeGrid({
        searchSettings: {
                key:"task 1",
        }
    });

    searchSettings.operator string

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

    List of enum type operators

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

    Default Value

    • “contains”

    Example

  • HTML
  • $("#treeGridContainer").ejTreeGrid({
        searchSettings: {
                operator:"startsWith",
        }
    });

    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
  • $("#treeGridContainer").ejTreeGrid({
        searchSettings: {
            searchHierarchyMode: ej.TreeGrid.SearchHierarchyMode.Child
        },
    });

    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
  • $("#treeGridContainer").ejTreeGrid({selectedCellIndexes:[{rowIndex: 2, cellIndex: 3}]});

    selectedRowIndex number

    Specifies the index of the selected row.

    Default Value

    • -1

    Example

  • HTML
  • $("#treeGridContainer").ejTreeGrid(
     {
        selectedRowIndex:2
     });

    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
  • <div id="treeGridContainer"></div> 
    <script>   
    $("#treeGridContainer").ejTreeGrid({ 
            selectionSettings:{enableHierarchySelection : false }
    });                      
    </script>

    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
  • $("#treeGridContainer").ejTreeGrid({ 
            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
  • <div id="treeGridContainer"></div> 
    <script>   
    $("#treeGridContainer").ejTreeGrid({ 
            selectionSettings:{selectionMode : ej.TreeGrid.SelectionMode.Row  }
    });   
    </script>

    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
  • $("#treeGridContainer").ejTreeGrid({ 
            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
  • $("#treeGridContainer").ejTreeGrid({ showColumnChooser:  true });

    showColumnOptions boolean

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

    Default Value

    • false

    Example

  • HTML
  • <div id="treeGridContainer"></div> 
    <script>   
            $("#treeGridContainer").ejTreeGrid({ showColumnOptions:  true });                  
    </script>

    showDetailsRow boolean

    Specifies the visibility of details view

    Default Value

    • false

    Example

  • HTML
  • $("#treeGridContainer").ejTreeGrid({
        showDetailsRow: true
    });

    showDetailsRowInfoColumn boolean

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

    Default Value

    • false

    Example

  • HTML
  • $("#treeGridContainer").ejTreeGrid({
        showDetailsRowInfoColumn: true
    });

    showGridCellTooltip boolean

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

    Default Value

    • true

    Example

  • HTML
  • $("#treeGridContainer").ejTreeGrid({
        showGridCellTooltip: true
    });

    showGridExpandCellTooltip boolean

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

    Default Value

    • true

    Example

  • HTML
  • $("#treeGridContainer").ejTreeGrid({
        showGridExpandCellTooltip: true
    });

    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
  • <div id="treeGridContainer"></div> 
    <script>
    $("#treeGridContainer").ejTreeGrid({
       showStackedHeader:true,
       stackedHeaderRows:
       [{
              stackedHeaderColumns: [
                      { column: "ID,Name,category,units", headerText: "Shipment details", cssClass: "temp" },
                      { column: "unitPrice,price", headerText: "Price details" }
               ]    
       ]},          
       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($)" }
          ]
    });
    </script>

    showSummaryRow boolean

    Specifies the visibility of summary row

    Default Value

    • false

    Example

  • HTML
  • $("#treeGridContainer").ejTreeGrid({
        showSummaryRow: true
    });

    showTotalSummary boolean

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

    Default Value

    • false

    Example

  • HTML
  • $("#treeGridContainer").ejTreeGrid({
        showTotalSummary: true
    });

    sizeSettings object

    Options for setting width and height for TreeGrid.

    sizeSettings.height string

    Height of the TreeGrid.

    Default Value

    • “450px”

    Example

  • HTML
  • $("#treeGridContainer").ejTreeGrid({sizeSettings{height:'450px'}});

    sizeSettings.width string

    Width of the TreeGrid.

    Default Value

    • “100%”

    Example

  • HTML
  • $("#treeGridContainer").ejTreeGrid({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
  • $("#treeGridContainer").ejTreeGrid({ sortSettings:{sortedColumns : [{ field:"startDate",direction:"ascending" }]}});

    sortSettings.sortedColumns.direction string

    Specifies the sort direction in TreeGrid

    Default Value

    • ””

    Example

  • HTML
  • $("#treeGridContainer").ejTreeGrid({ sortSettings:{sortedColumns : [{ direction:"ascending" }]}});

    sortSettings.sortedColumns.field string

    Specifies the field to be sorted in TreeGrid

    Default Value

    • ””

    Example

  • HTML
  • $("#treeGridContainer").ejTreeGrid({ 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
  • <div id="treeGridContainer"></div> 
    <script>
    $("#treeGridContainer").ejTreeGrid({
       showStackedHeader:true,
       stackedHeaderRows:
       [{
              stackedHeaderColumns: [
                      { column: "ID,Name,category,units", headerText: "Shipment details", cssClass: "temp" },
                      { column: "unitPrice,price", headerText: "Price details" }
               ]    
       ]},          
       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($)" }
          ]
    });
    </script>

    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
  • <div id="treeGridContainer"></div> 
    <script>
    $("#treeGridContainer").ejTreeGrid({
       showStackedHeader:true,
       stackedHeaderRows:
       [{
              stackedHeaderColumns: [
                      { column: "ID,Name,category,units", headerText: "Shipment details", cssClass: "temp" },
                      { column: "unitPrice,price", headerText: "Price details" }
               ]    
       ]},       
    });
    </script>

    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
  • <div id="treeGridContainer"></div> 
    <script>
    $("#treeGridContainer").ejTreeGrid({
       showStackedHeader:true,
       stackedHeaderRows:
       [{
              stackedHeaderColumns: [
                      { column: "ID,Name,category,units", headerText: "Shipment details", cssClass: "temp" },
                      { column: "unitPrice,price", headerText: "Price details" }
               ] 
       ]},       
    });
    </script>

    stackedHeaderRows.stackedHeaderColumns.cssClass string

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

    Default Value:

    • null

    Example

  • HTML
  • <div id="treeGridContainer"></div> 
    <script>
    $("#treeGridContainer").ejTreeGrid({
       showStackedHeader:true,
       stackedHeaderRows:
       [{
              stackedHeaderColumns: [
                      { column: "ID,Name,category,units", headerText: "Shipment details", cssClass: "temp" },
                      { column: "unitPrice,price", headerText: "Price details" }
               ]   
       ]},       
    });
    </script>

    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
  • <div id="treeGridContainer"></div> 
    <script>
    $("#treeGridContainer").ejTreeGrid({
       showStackedHeader:true,
       stackedHeaderRows:
       [{
               stackedHeaderColumns: [
                      { column: "ID,Name,category,units", headerText: "Shipment details" },
                      { column: "unitPrice,price", headerText: "Price details" }
               ]  
       ]},       
    });
    </script>

    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
  • <div id="treeGridContainer"></div> 
    <script>
    $("#treeGridContainer").ejTreeGrid({
       showStackedHeader:true,
       stackedHeaderRows:
       [{
               stackedHeaderColumns: [
                      { column: "ID,Name,category,units", headerText: "Shipment details", textAlign: ej.TextAlign.Right },
                      { column: "unitPrice,price", headerText: "Price details" }
               ]  
       ]},       
    });
    </script>

    stackedHeaderRows.stackedHeaderColumns.tooltip string

    Sets the template for tooltip for the Grid stackedHeaderColumns.

    Default Value:

    • null

    Example

  • HTML
  • <script type="text/template" id="colTip">
      
    </script>
    
    <div id="treeGridContainer"></div> 
    <script>
    $("#treeGridContainer").ejTreeGrid({
       showStackedHeader:true,
       stackedHeaderRows:
       [{
               stackedHeaderColumns: [
                      { column: "ID,Name,category,units", headerText: "Shipment details", tooltip:"#colTip" },
                      { column: "unitPrice,price", headerText: "Price details" }
               ] 
       ]},       
    });
    </script>

    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. See summaryType.

    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
  • $("#treeGridContainer").ejTreeGrid({
        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
  • $("#treeGridContainer").ejTreeGrid({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
  • $("#treeGridContainer").ejTreeGrid({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
  • $("#treeGridContainer").ejTreeGrid({toolbarSettings: {customToolbarItems: [{ templateID: "#ColumnVisibility",tooltipText:"Column Visibility" },{ text: "Reset",tooltipText:"Column Visibility" }]}});

    toolbarSettings.showToolbar boolean

    Shows/hides the toolbar.

    Default Value

    • false

    Example

  • HTML
  • $("#treeGridContainer").ejTreeGrid({ 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
    Search Enables the search textbox in toolbar

    Default Value

    • []

    Example

  • HTML
  • $("#treeGridContainer").ejTreeGrid({ toolbarItems: [ej.TreeGrid.ToolbarItems.Add,ej.TreeGrid.ToolbarItems.Edit] });

    totalSummaryHeight number

    Specifies the height of footer summary container.

    Default Value

    • 90

    Example

  • HTML
  • $("#treeGridContainer").ejTreeGrid({
        totalSummaryHeight: 120
    });

    treeColumnIndex number

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

    Default Value

    • 0

    Example

  • HTML
  • $("#treeGridContainer").ejTreeGrid(
     {
        treeColumnIndex: 1
     });

    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
  • <div id="treeGridContainer"></div> 
     
    <script>
    // Create TreeGrid object
    var treeGridObj = $("#treeGridContainer").data("ejTreeGrid");
    var data = {taskId:"40",taskName:"New Task 40",startDate:"2/20/2014",startDate:"2/25/2014"};
    treeGridObj.addRow(data, ej.TreeGrid.RowPosition.Child); // To add a task
    </script>

    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
  • <div id="treeGridContainer"></div> 
     
    <script>
    // Create TreeGrid object.
    var treeObject = $("#treeGridContainer").data("ejTreeGrid");
    //clear the filtering done in the “taskName” column
    treeObject.clearFilter("taskName");
    </script>

    Demo Link

    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
  • <div id="treeGridContainer"></div> 
    <script>
    // Create Tree Grid object
    var treegridObj = $("#treeGridContainer").data("ejTreeGrid");
    treegridObj.clearSelection(2);
    </script>

    clearSorting()

    To clear the sorting from sorted columns in TreeGrid.

    Example

  • HTML
  • <div id="treeGridContainer"></div> 
     
    <script>
    // Create TreeGrid object.
    var treeObject = $("#treeGridContainer").data("ejTreeGrid");
    //Clear sorting from sorted column.
    treeObject.clearSorting();
    </script>

    Demo [Link]
    (http://jsplayground.syncfusion.com/nwig1elj)

    collapseAll()

    To collapse all the parent items in tree grid

    Example

  • HTML
  • <div id="treeGridContainer"></div> 
     
    <script>
    // Create Tree Grid object
    var treegridObj = $("#treeGridContainer").data("ejTreeGrid");
    treegridObj.collapseAll(); // To collapse all parent items in tree grid
    </script>

    collapseAtLevel(index)

    Collapses the records at specific hierarchical level

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

    Example

  • HTML
  • <div id="treeGridContainer"></div> 
     
    <script>
    // Create Tree Grid object
    var treegridObj = $("#treeGridContainer").data("ejTreeGrid");
    treegridObj.collapseAtLevel(2);
    </script>

    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
  • <div id="treeGridContainer"></div> 
     
    <script>
    // Create TreeGrid object.
    var treeObject = $("#treeGridContainer").data("ejTreeGrid");
    //Change second column as treeColumn.
    treeObject.columnIndex(2);
    </script>

    Demo Link

    deleteColumn(columnIndex)

    To delete the specified column

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

    Example

  • HTML
  • <div id="treeGridContainer"></div> 
     
    <script>
    // Create TreeGrid
    var treegridObj = $("#treeGridContainer").data("ejTreeGrid");
    treegridObj.deleteColumn(1); // To delete the specified column
    </script>

    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
  • <div id="treeGridContainer"></div> 
     
    <script>
    // Create TreeGrid object.
    var treeObject = $("#treeGridContainer").data("ejTreeGrid");
    // To expand all the parent records.
    treeObject.expandAll();
    </script>

    Demo Link

    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
  • <div id="treeGridContainer"></div> 
     
    <script>
    // Create Tree Grid object
    var treegridObj = $("#treeGridContainer").data("ejTreeGrid");
    treegridObj.expandAtLevel(2);
    </script>

    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
  • <div id="treeGridContainer"></div> 
     
    <script>
    // Create TreeGrid object.
    var treeObject = $("#treeGridContainer").data("ejTreeGrid");
    // Show expand/collapse the parent record at index ‘5’.
    treeObject.expandCollapseRow(5);
    </script>

    Demo Link

    expandCollapseTotalSummary(expanded)

    To expand collapse the total summary row.

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

    Example

  • HTML
  • <div id="treeGridContainer"></div> 
     
    <script>
    // Create Tree Grid object
    var treegridObj = $("#treeGridContainer").data("ejTreeGrid");
    treegridObj.expandCollapseTotalSummary(true);
    </script>

    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
  • <div id="treeGridContainer"></div> 
     
    <script>
    // Create TreeGrid object.
    var treeObject = $("#treeGridContainer").data("ejTreeGrid");
    // To filter taskName column with text starts with "plan".
    treeObject.filterColumn("taskName", "startswith", "plan", "and");
    </script>

    Demo Link

    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
  • <div id="treeGridContainer"></div>  
    <script>
            var treeObject = $("#treeGridContainer").data("ejTreeGrid");
            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);
            treeObject.filterContent(predicate);
    </script>

    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
  • <div id="treeGridContainer"></div> 
     
    <script>
    // Create Tree Grid object
    var treegridObj = $("#treeGridContainer").data("ejTreeGrid");
    treegridObj.freezeColumn(field, isFrozen); 
    </script>

    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
  • <div id="treeGridContainer"></div> 
     
    <script>
    // Create Tree Grid object
    var treegridObj = $("#treeGridContainer").data("ejTreeGrid");
    treegridObj.freezePrecedingColumns(field); 
    </script>

    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
  • <div id="treeGridContainer"></div> 
     
    <script>
    // Create TreeGrid object.
    var treeObject = $("#treeGridContainer").data("ejTreeGrid");
    //get the details of column having fieldName as “taskName”.
    treeObject.getColumnByField("taskName");
    </script>

    Demo Link

    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
  • <div id="treeGridContainer"></div> 
     
    <script>
    // Create TreeGrid object.
    var treeObject = $("#treeGridContainer").data("ejTreeGrid");
     //get the details of column having header text as “Task Name”.
    treeObject.getColumnByHeaderText("Task Name");
    </script>

    Demo Link

    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
  • <div id="treeGridContainer"></div> 
     
    <script>
    // Create TreeGrid object.
    var treeObject = $("#treeGridContainer").data("ejTreeGrid");
    //get index of “taskName” column.
    treeObject.getColumnIndexByField("taskName");
    </script>

    Demo Link

    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
  • <div id="treeGridContainer"></div> 
     
    <script>
    // Create TreeGrid object.
    var treeObject = $("#treeGridContainer").data("ejTreeGrid");
    //get the field name of column having header text as “Task Name”.
    treeObject.getFieldNameByHeaderText("Task Name");
    </script>

    Demo Link

    getScrollLeftOffset()

    Gets the scroll left offset of TreeGrid.

    Returns:

    number

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

    Example

  • HTML
  • <div id="treeGridContainer"></div> 
     
    <script>
    // Create TreeGrid object.
    var treeObject = $("#treeGridContainer").data("ejTreeGrid");
    //Get horizontal scroll bar left value.
    treeObject.getScrollLeftOffset()
    </script>

    Demo Link

    getScrollTopOffset()

    Gets the scroll top offset of TreeGrid.

    Returns:

    number

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

    Example

  • HTML
  • <div id="treeGridContainer"></div> 
     
    <script>
    // Create TreeGrid object.
    var treeObject = $("#treeGridContainer").data("ejTreeGrid");
    //Get vertical scroll bar top value.
    treeObject.getScrollTopOffset();
    </script>

    Demo Link

    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
  • <div id="treeGridContainer"></div> 
     
    <script>
    // Create TreeGrid object.
    var treeObject = $("#treeGridContainer").data("ejTreeGrid");
    // Gets the selected cell element list
    treeObject.getSelectedCells();
    </script>

    Demo Link

    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
  • <div id="treeGridContainer"></div> 
     
    <script>
    // Create TreeGrid object.
    var treeObject = $("#treeGridContainer").data("ejTreeGrid");
    // Gets the updated data source collection of TreeGrid
    treeObject.getUpdatedRecords();
    </script>

    Demo Link

    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
  • <div id="treeGridContainer"></div> 
     
    <script>
    // Create TreeGrid object.
    var treeObject = $("#treeGridContainer").data("ejTreeGrid");
    // Sends a paging request to the TreeGrid with specified page index
    treeObject.gotoPage(3);
    </script>

    Demo Link

    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
  • <div id="treeGridContainer"></div> 
     
    <script>
    // Create Tree Grid object
    var treegridObj = $("#treeGridContainer").data("ejTreeGrid");
    treegridObj.hideColumn("Task Name");
    </script>

    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
  • <div id="treeGridContainer"></div> 
     
    <script>
    // Create Tree Grid object
    var treegridObj = $("#treeGridContainer").data("ejTreeGrid");
    treegridObj.moveRow(4, 15, "child"); // To move the row
    </script>

    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
  • <div id="treeGridContainer"></div> 
     
    <script>
    // Create TreeGrid object
    var treegridObj = $("#treeGridContainer").data("ejTreeGrid");
    var dataManager = ej.DataManager(projectData);
    var query = ej.Query().select(["taskID", "taskName", "startDate", "endDate", "subtasks", "progress", "duration"]);
    treegridObj.refresh(dataManager, query) // To refresh the tree grid content
    </script>

    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
  • <div id="treeGridContainer"></div> 
     
    <script>
    // Create TreeGrid
    var treegridObj = $("#treeGridContainer").data("ejTreeGrid");
    treegridObj.renameColumn(1, "New Text"); // To re name the column
    </script>

    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
  • <div id="treeGridContainer"></div> 
     
    <script>
    // Create Tree Grid object
    var treegridObj = $("#treeGridContainer").data("ejTreeGrid");
    treegridObj.reorderColumn("startDate", 4); // To sort the data
    </script>

    saveCell()

    To save the edited cell in TreeGrid

    Example

  • HTML
  • <div id="treeGridContainer"></div> 
     
    <script>
    // Create Tree Grid object
    var treegridObj = $("#treeGridContainer").data("ejTreeGrid");
    treegridObj.saveCell(); 
    </script>

    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
  • <div id="treeGridContainer"></div> 
     
    <script>
    // Create TreeGrid object.
    var treeObject = $("#treeGridContainer").data("ejTreeGrid");
    // Set horizontal scroll bar left value and vertical scroll bar top value.
    treeObject.scrollOffset(50,50);
    </script>

    Demo Link

    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
  • <div id="treeGridContainer"></div> 
     
    <script>
    // Create TreeGrid object.
    var treeObject = $("#treeGridContainer").data("ejTreeGrid");
    //Set Vertical scroll bar to end position.
    treeObject.scrollToBottom()
    </script>

    Demo Link

    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
  • <div id="treeGridContainer"></div> 
     
    <script>
    // Create TreeGrid object.
    var treeObject = $("#treeGridContainer").data("ejTreeGrid");
    //Set Vertical scroll bar to zeroth position.
    treeObject.scrollToTop();
    </script>

    Demo Link

    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
  • <div id="treeGridContainer"></div> 
     
    <script>
    // Create TreeGrid
    var treegridObj = $("#treeGridContainer").data("ejTreeGrid");
    var indexes = [{rowIndex:4, cellIndex: 4}, {rowIndex: 3, cellIndex: 3}];
    treegridObj.selectCells(indexes, true); // To add a task
    </script>

    showAddDialog()

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

    Usage: we can able to open add dialog dynamically.

    Example

  • HTML
  • <div id="treeGridContainer"></div> 
     
    <script>
    // Create TreeGrid object.
    var treeObject = $("#treeGridContainer").data("ejTreeGrid");
    // Show Add dialog box to add new record.
    treeObject.showAddDialog();
    </script>

    Demo Link

    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
  • <div id="treeGridContainer"></div> 
     
    <script>
    // Create Tree Grid object
    var treegridObj = $("#treeGridContainer").data("ejTreeGrid");
    treegridObj.showColumn("Task Name");
    </script>

    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
  • <div id="treeGridContainer"></div> 
     
    <script>
    // Create TreeGrid object.
    var treeObject = $("#treeGridContainer").data("ejTreeGrid");
    // Show edit dialog box to edit the row at index ‘3’.
    treeObject.showEditDialog(3);
    </script>

    Demo Link

    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
  • <div id="treeGridContainer"></div> 
     
    <script>
    // Create TreeGrid object.
    var treeObject = $("#treeGridContainer").data("ejTreeGrid");
    // Show the detail row of record at index ‘3’.
    treeObject.showHideDetailsRow(3);
    </script>

    Demo Link

    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
  • <div id="treeGridContainer"></div> 
     
    <script>
    // Create Tree Grid object
    var treegridObj = $("#treeGridContainer").data("ejTreeGrid");
    treegridObj.sortColumn("Start Date", ej.sortOrder.Descending); // To sort the data
    </script>

    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
  • <div id="treeGridContainer"></div> 
     
    <script>
    // Create TreeGrid object.
    var treeObject = $("#treeGridContainer").data("ejTreeGrid");
    // Sends a column fieldname to change the checkbox selection to that column.
    treeObject.updateCheckboxColumn('taskName');
    </script>

    Demo Link

    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
  • <div id="treeGridContainer"></div>  
    <script>
            var treeGridObject = $("#treeGridContainer").data("ejTreeGrid");
            var data = { taskName: "updated value"};
            treeGridObject.updateRecordByIndex(4, data);
    </script>

    Demo Link

    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
  • <div id="treeGridContainer"></div> 
     
    <script>
    // Create TreeGrid object.
    var treeObject = $("#treeGridContainer").data("ejTreeGrid");
    // Sends the minimum width in pixel to make the TreeGrid to behave as responsive above this width.
    treeObject.updateResponsiveMinWidth("200px");
    </script>

    Demo Link

    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
  • <div id="treeGridContainer"></div> 
    <script>
    $("#treeGridContainer").ejTreeGrid({
       actionBegin: function (args) {}
    });
    </script>

    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
  • <div id="treeGridContainer"></div> 
    <script>
    $("#treeGridContainer").ejTreeGrid({
       actionComplete: function (args) {}
    });
    </script>

    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
  • <div id="treeGridContainer"></div> 
    <script>
    $("#treeGridContainer").ejTreeGrid({
       beforePrint: function (args) {}
    });
    </script>

    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
  • <div id="treeGridContainer"></div> 
    <script>
    $("#treeGridContainer").ejTreeGrid({
       beginEdit: function (args) {}
    });
    </script>

    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
  • <div id="treeGridContainer"></div> 
    <script>
    $("#treeGridContainer").ejTreeGrid({
       cellSelected: function (args) {}
    });
    </script>

    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
  • <div id="treeGridContainer"></div> 
    <script>
    $("#treeGridContainer").ejTreeGrid({
       cellSelecting: function (args) {}
    });
    </script>

    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
  • <div id="treeGridContainer"></div> 
    <script>
    $("#treeGridContainer").ejTreeGrid({
       collapsed: function (args) {}
    });
    </script>

    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
  • <div id="treeGridContainer"></div> 
    <script>
    $("#treeGridContainer").ejTreeGrid({
       collapsing: function (args) {}
    });
    </script>

    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
  • <div id="treeGridContainer"></div> 
    <script>
    $("#treeGridContainer").ejTreeGrid({
       columnDrag: function (args) {}
    });
    </script>

    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
  • <div id="treeGridContainer"></div> 
    <script>
    $("#treeGridContainer").ejTreeGrid({
       columnDragStart: function (args) {}
    });
    </script>

    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
  • <div id="treeGridContainer"></div> 
    <script>
    $("#treeGridContainer").ejTreeGrid({
       columnDrop: function (args) {}
    });
    </script>

    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
  • <div id="treeGridContainer"></div> 
    <script>
    $("#treeGridContainer").ejTreeGrid({
       columnResizeEnd: function (args) {}
    });
    </script>

    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
  • <div id="treeGridContainer"></div> 
    <script>
    $("#treeGridContainer").ejTreeGrid({
       columnResizeStart: function (args) {}
    });
    </script>

    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
  • <div id="treeGridContainer"></div> 
    <script>
    $("#treeGridContainer").ejTreeGrid({
       columnResized: function (args) {}
    });
    </script>

    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
  • <div id="treeGridContainer"></div> 
    <script>
    $("#treeGridContainer").ejTreeGrid({
       contextMenuOpen: function (args) {}
    });
    </script>

    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
  • <div id="treeGridContainer"></div> 
    <script>
    $("#treeGridContainer").ejTreeGrid({
       create: function (args) {}
    });
    </script>

    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
  • <div id="treeGridContainer"></div> 
    <script>
    $("#treeGridContainer").ejTreeGrid({
       detailsDataBound: function (args) {}
    });
    </script>

    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
  • <div id="treeGridContainer"></div> 
    <script>
    $("#treeGridContainer").ejTreeGrid({
       detailsHidden: function (args) {}
    });
    </script>

    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
  • <div id="treeGridContainer"></div> 
    <script>
    $("#treeGridContainer").ejTreeGrid({
       detailsShown: function (args) {}
    });
    </script>

    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
  • <div id="treeGridContainer"></div> 
    <script>
    $("#treeGridContainer").ejTreeGrid({
       endEdit: function (args) {}
    });
    </script>

    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
  • <div id="treeGridContainer"></div> 
    <script>
    $("#treeGridContainer").ejTreeGrid({
       expanded: function (args) {}
    });
    </script>

    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
  • <div id="treeGridContainer"></div> 
    <script>
    $("#treeGridContainer").ejTreeGrid({
       expanding: function (args) {}
    });
    </script>

    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
  • <div id="treeGridContainer"></div> 
    <script>
    $("#treeGridContainer").ejTreeGrid({
       load: function (args) {}
    });
    </script>

    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
  • <div id="treeGridContainer"></div> 
    <script>
    $("#treeGridContainer").ejTreeGrid({
       queryCellInfo: function (args) {}
    });
    </script>

    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
  • <div id="treeGridContainer"></div> 
    <script>
    $("#treeGridContainer").ejTreeGrid({
       recordClick: function (args) {}
    });
    </script>

    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
  • <div id="treeGridContainer"></div> 
    <script>
    $("#treeGridContainer").ejTreeGrid({
       recordDoubleClick: function (args) {}
    });
    </script>

    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
  • <div id="treeGridContainer"></div> 
    <script>
    $("#treeGridContainer").ejTreeGrid({
       rowDataBound: function (args) {}
    });
    </script>

    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
  • <div id="treeGridContainer"></div> 
    <script>
    $("#treeGridContainer").ejTreeGrid({
       rowDrag: function (args) {}
    });
    </script>

    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
  • <div id="treeGridContainer"></div> 
    <script>
    $("#treeGridContainer").ejTreeGrid({
       rowDragStart: function (args) {}
    });
    </script>

    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
  • <div id="treeGridContainer"></div> 
    <script>
    $("#treeGridContainer").ejTreeGrid({
       rowDragStop: function (args) {}
    });
    </script>

    rowDropActionBegin

    Triggered before row drop action begins.

    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.
    draggedRecords array Returns the multiple dragged row collection for multiple reorder
    dropPosition string Returns the drop position.
    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.
    type string Returns the name of the event.

    Example

  • HTML
  • <div id="treeGridContainer"></div> 
    <script>
    $("#treeGridContainer").ejTreeGrid({
       rowDropActionBegin: function (args) {}
    });
    </script>

    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
  • <div id="treeGridContainer"></div> 
    <script>
    $("#treeGridContainer").ejTreeGrid({
       rowSelected: function (args) {}
    });
    </script>

    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
  • <div id="treeGridContainer"></div> 
    <script>
    $("#treeGridContainer").ejTreeGrid({
       rowSelecting: function (args) {}
    });
    </script>

    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
  • <div id="treeGridContainer"></div> 
    <script>
    $("#treeGridContainer").ejTreeGrid({
       toolbarClick: function (args) {}
    });
    </script>