@syncfusion/ej2-treegrid 20.4.54 → 21.1.35

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 20.4.54
+*  version : 21.1.35
 *  Copyright Syncfusion Inc. 2001 - 2020. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-treegrid@*",
-  "_id": "@syncfusion/ej2-treegrid@20.4.49",
+  "_id": "@syncfusion/ej2-treegrid@20.10.6",
   "_inBundle": false,
-  "_integrity": "sha512-E6GBrixReTSh5GUj05zdOX531xJA0oKLhNOJm6lfbEZAEingUnUpxBtZIVdl9I2EXhMaKdOn/IRVjqNMJhlPcw==",
+  "_integrity": "sha512-LwZ8Bk/n3qJ/XPtP5s+q96/nhnVitf0eG8bFH4vsCs7NOwgWv4QZFvRxCjhmkcJ8dkHERj63RQtJ5/UxWx2hlQ==",
   "_location": "/@syncfusion/ej2-treegrid",
   "_phantomChildren": {},
   "_requested": {
@@ -24,10 +24,10 @@
     "/@syncfusion/ej2-react-treegrid",
     "/@syncfusion/ej2-vue-treegrid"
   ],
-  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-treegrid/-/ej2-treegrid-20.4.49.tgz",
-  "_shasum": "56a1c00a6fd2d3df97ef71db6dc3297e653ef6ec",
+  "_resolved": "https://nexus.syncfusion.com/repository/ej2-release/@syncfusion/ej2-treegrid/-/ej2-treegrid-20.10.6.tgz",
+  "_shasum": "434d8ed4a3b80e39087ce9dcccd315ad607091ad",
   "_spec": "@syncfusion/ej2-treegrid@*",
-  "_where": "/jenkins/workspace/ease-automation_release_19.1.0.1/packages/included",
+  "_where": "/jenkins/workspace/elease-automation_release_21.1.1/packages/included",
   "author": {
     "name": "Syncfusion Inc."
   },
@@ -36,10 +36,10 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~20.4.51",
-    "@syncfusion/ej2-data": "~20.4.48",
-    "@syncfusion/ej2-grids": "~20.4.54",
-    "@syncfusion/ej2-popups": "~20.4.53"
+    "@syncfusion/ej2-base": "~21.1.35",
+    "@syncfusion/ej2-data": "~21.1.35",
+    "@syncfusion/ej2-grids": "~21.1.35",
+    "@syncfusion/ej2-popups": "~21.1.35"
   },
   "deprecated": false,
   "description": "Essential JS 2 TreeGrid Component",
@@ -66,6 +66,6 @@
     "url": "git+https://github.com/syncfusion/ej2-treegrid.git"
   },
   "typings": "index.d.ts",
-  "version": "20.4.54",
+  "version": "21.1.35",
   "sideEffects": false
 }

package/src/treegrid/actions/freeze-column.js

@@ -89,6 +89,9 @@ var Freeze = /** @class */ (function () {
                 row.style.height = row.parentElement.firstElementChild.clientHeight + 'px';
             }
             row.style.display = args.action;
+            if (freeze && frozenRightRows.length) {
+                frozenRightRows[parseInt(i.toString(), 10)].style.display = args.action;
+            }
             var queryselector = args.action === 'none' ? '.e-treecolumn-container .e-treegridcollapse'
                 : '.e-treecolumn-container .e-treegridexpand';
             if (frozenrows[row.rowIndex].querySelector(queryselector)) {

package/src/treegrid/actions/rowdragdrop.js

@@ -590,6 +590,7 @@ var RowDD = /** @class */ (function () {
     RowDD.prototype.addErrorElem = function () {
         var dragelem = document.getElementsByClassName('e-cloneproperties')[0];
         var errorelem = dragelem.querySelectorAll('.e-errorelem').length;
+        var sanitize = 'sanitize';
         if (!errorelem && !this.parent.rowDropSettings.targetID) {
             var ele = document.createElement('div');
             classList(ele, ['e-errorcontainer'], []);
@@ -597,14 +598,14 @@ var RowDD = /** @class */ (function () {
             var errorVal = dragelem.querySelector('.errorValue');
             var content = dragelem.querySelector('.e-rowcell').innerHTML;
             if (errorVal) {
-                content = errorVal.innerHTML;
+                content = this.parent["" + sanitize](errorVal.innerHTML);
                 errorVal.parentNode.removeChild(errorVal);
             }
             dragelem.querySelector('.e-rowcell').innerHTML = '';
             var spanContent = document.createElement('span');
             spanContent.className = 'errorValue';
             spanContent.style.paddingLeft = '16px';
-            spanContent.innerHTML = content;
+            spanContent.innerHTML = this.parent["" + sanitize](content);
             dragelem.querySelector('.e-rowcell').appendChild(ele);
             dragelem.querySelector('.e-rowcell').appendChild(spanContent);
             var dropItemSpan = document.querySelector('.e-dropitemscount');

package/src/treegrid/base/treegrid-model.d.ts

@@ -1,4 +1,4 @@
-import { Component, addClass, createElement, EventHandler, isNullOrUndefined, Ajax, ModuleDeclaration, extend, merge} from '@syncfusion/ej2-base';import { removeClass, EmitType, Complex, Collection, KeyboardEventArgs, getValue } from '@syncfusion/ej2-base';import {Event, Property, NotifyPropertyChanges, INotifyPropertyChanged, setValue, KeyboardEvents, L10n } from '@syncfusion/ej2-base';import { Column, ColumnModel } from '../models/column';import { BeforeBatchSaveArgs, BeforeBatchAddArgs, BatchDeleteArgs, BeforeBatchDeleteArgs, Row } from '@syncfusion/ej2-grids';import { GridModel, ColumnQueryModeType, HeaderCellInfoEventArgs, EditSettingsModel as GridEditModel } from '@syncfusion/ej2-grids';import { RowDragEventArgs, RowDropEventArgs, RowDropSettingsModel, RowDropSettings, getUid } from '@syncfusion/ej2-grids';import { LoadingIndicator } from '../models/loading-indicator';import { LoadingIndicatorModel } from '../models/loading-indicator-model';import { ActionEventArgs, TextAlign } from'@syncfusion/ej2-grids';import { DetailDataBoundEventArgs, ClipMode, ColumnChooser}  from '@syncfusion/ej2-grids';import { SearchEventArgs, AddEventArgs, EditEventArgs, DeleteEventArgs}  from '@syncfusion/ej2-grids';import { SaveEventArgs, CellSaveArgs, BatchAddArgs, BatchCancelArgs,  BeginEditArgs, CellEditArgs}  from '@syncfusion/ej2-grids';import { FilterSettings } from '../models/filter-settings';import { TextWrapSettings } from '../models/textwrap-settings';import { TextWrapSettingsModel } from '../models/textwrap-settings-model';import {Filter} from '../actions/filter';import { Logger as TreeLogger } from '../actions/logger';import { BeforeCopyEventArgs, BeforePasteEventArgs } from '@syncfusion/ej2-grids';import { TreeClipboard } from '../actions/clipboard';import {Aggregate} from '../actions/summary';import { Reorder } from '../actions/reorder';import { Resize } from '../actions/resize';import { Selection as TreeGridSelection } from '../actions/selection';import { ColumnMenu } from '../actions/column-menu';import { DetailRow } from '../actions/detail-row';import { Freeze } from '../actions/freeze-column';import { Print } from '../actions/print';import * as events from '../base/constant';import { FilterSettingsModel } from '../models/filter-settings-model';import { SearchSettings} from '../models/search-settings';import { SearchSettingsModel } from '../models/search-settings-model';import {RowInfo, RowDataBoundEventArgs, PageEventArgs, FilterEventArgs, FailureEventArgs, SortEventArgs } from '@syncfusion/ej2-grids';import { RowSelectingEventArgs, RowSelectEventArgs, RowDeselectingEventArgs, RowDeselectEventArgs, IIndex, ISelectedCell } from '@syncfusion/ej2-grids';import {ColumnModel as GridColumnModel, Column as GridColumn, CellSelectEventArgs, CellDeselectEventArgs } from '@syncfusion/ej2-grids';import { SelectionSettings } from '../models/selection-settings';import { SelectionSettingsModel } from '../models/selection-settings-model';import {getActualProperties, SortDirection, getObject, ColumnDragEventArgs } from '@syncfusion/ej2-grids';import { PrintMode, Data, IGrid, ContextMenuItemModel } from '@syncfusion/ej2-grids';import { ColumnMenuItem, ColumnMenuItemModel, CheckBoxChangeEventArgs } from '@syncfusion/ej2-grids';import { ExcelExportCompleteArgs, ExcelHeaderQueryCellInfoEventArgs, ExcelQueryCellInfoEventArgs } from '@syncfusion/ej2-grids';import { PdfExportCompleteArgs, PdfHeaderQueryCellInfoEventArgs, PdfQueryCellInfoEventArgs } from '@syncfusion/ej2-grids';import { ExcelExportProperties, PdfExportProperties, CellSelectingEventArgs, PrintEventArgs } from '@syncfusion/ej2-grids';import { ColumnMenuOpenEventArgs } from '@syncfusion/ej2-grids';import {BeforeDataBoundArgs} from '@syncfusion/ej2-grids';import { DataManager, ReturnOption, RemoteSaveAdaptor, Query, JsonAdaptor, Deferred } from '@syncfusion/ej2-data';import { createSpinner, hideSpinner, showSpinner, Dialog } from '@syncfusion/ej2-popups';import { isRemoteData, isOffline, extendArray, isCountRequired, findChildrenRecords } from '../utils';import { Grid, QueryCellInfoEventArgs, Logger } from '@syncfusion/ej2-grids';import { Render } from '../renderer/render';import { VirtualTreeContentRenderer } from '../renderer/virtual-tree-content-render';import { DataManipulation } from './data';import { RowDD } from '../actions/rowdragdrop';import { Sort } from '../actions/sort';import { ITreeData, RowExpandedEventArgs, RowCollapsedEventArgs, RowCollapsingEventArgs, TreeGridExcelExportProperties } from './interface';import { DataStateChangeEventArgs, RowExpandingEventArgs, TreeGridPdfExportProperties } from './interface';import { iterateArrayOrObject, GridLine } from '@syncfusion/ej2-grids';import { DataSourceChangedEventArgs, RecordDoubleClickEventArgs, ResizeArgs } from '@syncfusion/ej2-grids';import { ToolbarItems, ToolbarItem, ContextMenuItem, ContextMenuItems, RowPosition, CopyHierarchyType } from '../enum';import { ItemModel, ClickEventArgs, BeforeOpenCloseMenuEventArgs, MenuEventArgs } from '@syncfusion/ej2-navigations';import { PageSettings } from '../models/page-settings';import { PageSettingsModel } from '../models/page-settings-model';import { AggregateRow } from '../models/summary';import { AggregateRowModel } from '../models/summary-model';import { ExcelExport } from '../actions/excel-export';import { PdfExport } from '../actions/pdf-export';import { Toolbar } from '../actions/toolbar';import { Page } from '../actions/page';import { ContextMenu } from '../actions/context-menu';import { EditSettings } from '../models/edit-settings';import { EditSettingsModel } from '../models/edit-settings-model';import { Edit} from '../actions/edit';import { SortSettings } from '../models/sort-settings';import { SortSettingsModel } from '../models/sort-settings-model';import { isHidden, getExpandStatus } from '../utils';import { editAction } from '../actions/crud-actions';import { InfiniteScrollSettings } from '../models/infinite-scroll-settings';import { InfiniteScrollSettingsModel } from '../models/infinite-scroll-settings-model';import { TreeActionEventArgs } from '..';import * as literals from '../base/constant';
+import { Component, addClass, createElement, EventHandler, isNullOrUndefined, Ajax, ModuleDeclaration, extend, merge, SanitizeHtmlHelper} from '@syncfusion/ej2-base';import { removeClass, EmitType, Complex, Collection, KeyboardEventArgs, getValue } from '@syncfusion/ej2-base';import {Event, Property, NotifyPropertyChanges, INotifyPropertyChanged, setValue, KeyboardEvents, L10n } from '@syncfusion/ej2-base';import { Column, ColumnModel } from '../models/column';import { BeforeBatchSaveArgs, BeforeBatchAddArgs, BatchDeleteArgs, BeforeBatchDeleteArgs, Row } from '@syncfusion/ej2-grids';import { GridModel, ColumnQueryModeType, HeaderCellInfoEventArgs, EditSettingsModel as GridEditModel } from '@syncfusion/ej2-grids';import { RowDragEventArgs, RowDropEventArgs, RowDropSettingsModel, RowDropSettings, getUid } from '@syncfusion/ej2-grids';import { LoadingIndicator } from '../models/loading-indicator';import { LoadingIndicatorModel } from '../models/loading-indicator-model';import { ActionEventArgs, TextAlign } from'@syncfusion/ej2-grids';import { DetailDataBoundEventArgs, ClipMode, ColumnChooser}  from '@syncfusion/ej2-grids';import { SearchEventArgs, AddEventArgs, EditEventArgs, DeleteEventArgs}  from '@syncfusion/ej2-grids';import { SaveEventArgs, CellSaveArgs, BatchAddArgs, BatchCancelArgs,  BeginEditArgs, CellEditArgs}  from '@syncfusion/ej2-grids';import { FilterSettings } from '../models/filter-settings';import { TextWrapSettings } from '../models/textwrap-settings';import { TextWrapSettingsModel } from '../models/textwrap-settings-model';import {Filter} from '../actions/filter';import { Logger as TreeLogger } from '../actions/logger';import { BeforeCopyEventArgs, BeforePasteEventArgs } from '@syncfusion/ej2-grids';import { TreeClipboard } from '../actions/clipboard';import {Aggregate} from '../actions/summary';import { Reorder } from '../actions/reorder';import { Resize } from '../actions/resize';import { Selection as TreeGridSelection } from '../actions/selection';import { ColumnMenu } from '../actions/column-menu';import { DetailRow } from '../actions/detail-row';import { Freeze } from '../actions/freeze-column';import { Print } from '../actions/print';import * as events from '../base/constant';import { FilterSettingsModel } from '../models/filter-settings-model';import { SearchSettings} from '../models/search-settings';import { SearchSettingsModel } from '../models/search-settings-model';import {RowInfo, RowDataBoundEventArgs, PageEventArgs, FilterEventArgs, FailureEventArgs, SortEventArgs } from '@syncfusion/ej2-grids';import { RowSelectingEventArgs, RowSelectEventArgs, RowDeselectingEventArgs, RowDeselectEventArgs, IIndex, ISelectedCell } from '@syncfusion/ej2-grids';import {ColumnModel as GridColumnModel, Column as GridColumn, CellSelectEventArgs, CellDeselectEventArgs } from '@syncfusion/ej2-grids';import { SelectionSettings } from '../models/selection-settings';import { SelectionSettingsModel } from '../models/selection-settings-model';import {getActualProperties, SortDirection, getObject, ColumnDragEventArgs } from '@syncfusion/ej2-grids';import { PrintMode, Data, IGrid, ContextMenuItemModel } from '@syncfusion/ej2-grids';import { ColumnMenuItem, ColumnMenuItemModel, CheckBoxChangeEventArgs } from '@syncfusion/ej2-grids';import { ExcelExportCompleteArgs, ExcelHeaderQueryCellInfoEventArgs, ExcelQueryCellInfoEventArgs } from '@syncfusion/ej2-grids';import { PdfExportCompleteArgs, PdfHeaderQueryCellInfoEventArgs, PdfQueryCellInfoEventArgs } from '@syncfusion/ej2-grids';import { ExcelExportProperties, PdfExportProperties, CellSelectingEventArgs, PrintEventArgs } from '@syncfusion/ej2-grids';import { ColumnMenuOpenEventArgs } from '@syncfusion/ej2-grids';import {BeforeDataBoundArgs} from '@syncfusion/ej2-grids';import { DataManager, ReturnOption, RemoteSaveAdaptor, Query, JsonAdaptor, Deferred } from '@syncfusion/ej2-data';import { createSpinner, hideSpinner, showSpinner, Dialog } from '@syncfusion/ej2-popups';import { isRemoteData, isOffline, extendArray, isCountRequired, findChildrenRecords } from '../utils';import { Grid, QueryCellInfoEventArgs, Logger } from '@syncfusion/ej2-grids';import { Render } from '../renderer/render';import { VirtualTreeContentRenderer } from '../renderer/virtual-tree-content-render';import { DataManipulation } from './data';import { RowDD } from '../actions/rowdragdrop';import { Sort } from '../actions/sort';import { ITreeData, RowExpandedEventArgs, RowCollapsedEventArgs, RowCollapsingEventArgs, TreeGridExcelExportProperties } from './interface';import { DataStateChangeEventArgs, RowExpandingEventArgs, TreeGridPdfExportProperties } from './interface';import { iterateArrayOrObject, GridLine } from '@syncfusion/ej2-grids';import { DataSourceChangedEventArgs, RecordDoubleClickEventArgs, ResizeArgs } from '@syncfusion/ej2-grids';import { ToolbarItems, ToolbarItem, ContextMenuItem, ContextMenuItems, RowPosition, CopyHierarchyType } from '../enum';import { ItemModel, ClickEventArgs, BeforeOpenCloseMenuEventArgs, MenuEventArgs } from '@syncfusion/ej2-navigations';import { PageSettings } from '../models/page-settings';import { PageSettingsModel } from '../models/page-settings-model';import { AggregateRow } from '../models/summary';import { AggregateRowModel } from '../models/summary-model';import { ExcelExport } from '../actions/excel-export';import { PdfExport } from '../actions/pdf-export';import { Toolbar } from '../actions/toolbar';import { Page } from '../actions/page';import { ContextMenu } from '../actions/context-menu';import { EditSettings } from '../models/edit-settings';import { EditSettingsModel } from '../models/edit-settings-model';import { Edit} from '../actions/edit';import { SortSettings } from '../models/sort-settings';import { SortSettingsModel } from '../models/sort-settings-model';import { isHidden, getExpandStatus } from '../utils';import { editAction } from '../actions/crud-actions';import { InfiniteScrollSettings } from '../models/infinite-scroll-settings';import { InfiniteScrollSettingsModel } from '../models/infinite-scroll-settings-model';import { TreeActionEventArgs } from '..';import * as literals from '../base/constant';
 import {ComponentModel} from '@syncfusion/ej2-base';
 
 /**
@@ -22,11 +22,12 @@ export interface TreeGridModel extends ComponentModel{
 
     /**
      *  Defines the mode of clip. The available modes are,
-     * `Clip`: Truncates the cell content when it overflows its area.
-     * `Ellipsis`: Displays ellipsis when the cell content overflows its area.
-     * `EllipsisWithTooltip`:  Displays ellipsis when the cell content overflows its area,
-     *  also it will display the tooltip while hover on ellipsis is applied..
-     *
+     * ```props
+     * * Clip :- Truncates the cell content when it overflows its area.
+     * * Ellipsis :- Displays ellipsis when the cell content overflows its area.
+     * * EllipsisWithTooltip :- Displays ellipsis when the cell content overflows its area,
+     * ```
+     * also it will display the tooltip while hover on ellipsis is applied.
      * @default Syncfusion.EJ2.Grids.ClipMode.Ellipsis
      * @aspType Syncfusion.EJ2.Grids.ClipMode
      * @isEnumeration true
@@ -126,9 +127,10 @@ export interface TreeGridModel extends ComponentModel{
 
     /**
      * Defines the print modes. The available print modes are
-     * * `AllPages`: Prints all pages of the TreeGrid.
-     * * `CurrentPage`: Prints the current page of the TreeGrid.
-     *
+     * ```props
+     * * AllPages :- Prints all pages of the TreeGrid.
+     * * CurrentPage :- Prints the current page of the TreeGrid.
+     * ```
      * @default Syncfusion.EJ2.Grids.PrintMode.AllPages
      * @isEnumeration true
      * @aspType Syncfusion.EJ2.Grids.PrintMode
@@ -320,12 +322,13 @@ export interface TreeGridModel extends ComponentModel{
 
     /**
      * Defines the mode of TreeGrid lines. The available modes are,
-     * * `Both`: Displays both horizontal and vertical TreeGrid lines.
-     * * `None`: No TreeGrid lines are displayed.
-     * * `Horizontal`: Displays the horizontal TreeGrid lines only.
-     * * `Vertical`: Displays the vertical TreeGrid lines only.
-     * * `Default`: Displays TreeGrid lines based on the theme.
-     *
+     * ```props
+     * * Both :- Displays both horizontal and vertical TreeGrid lines.
+     * * None :- No TreeGrid lines are displayed.
+     * * Horizontal :- Displays the horizontal TreeGrid lines only.
+     * * Vertical :- Displays the vertical TreeGrid lines only.
+     * * Default :- Displays TreeGrid lines based on the theme.
+     * ```
      * @default Syncfusion.EJ2.Grids.GridLine.Default
      * @isEnumeration true
      * @aspType Syncfusion.EJ2.Grids.GridLine
@@ -501,6 +504,14 @@ export interface TreeGridModel extends ComponentModel{
      */
     enableColumnVirtualization?: boolean;
 
+    /**
+     * Specifies whether to display or remove the untrusted HTML values in the TreeGrid component.
+     * If `enableHtmlSanitizer` set to true, then it will sanitize any suspected untrusted strings and scripts before rendering them.
+     *
+     * @default false
+     */
+    enableHtmlSanitizer?: boolean;
+
     /**
      * If `enableInfiniteScrolling` set to true, then the data will be loaded in TreeGrid when the scrollbar reaches the end.
      * This helps to load large dataset in TreeGrid.

package/src/treegrid/base/treegrid.d.ts

@@ -168,11 +168,12 @@ export declare class TreeGrid extends Component<HTMLElement> implements INotifyP
     frozenColumns: number;
     /**
      *  Defines the mode of clip. The available modes are,
-     * `Clip`: Truncates the cell content when it overflows its area.
-     * `Ellipsis`: Displays ellipsis when the cell content overflows its area.
-     * `EllipsisWithTooltip`:  Displays ellipsis when the cell content overflows its area,
-     *  also it will display the tooltip while hover on ellipsis is applied..
-     *
+     * ```props
+     * * Clip :- Truncates the cell content when it overflows its area.
+     * * Ellipsis :- Displays ellipsis when the cell content overflows its area.
+     * * EllipsisWithTooltip :- Displays ellipsis when the cell content overflows its area,
+     * ```
+     * also it will display the tooltip while hover on ellipsis is applied.
      * @default Syncfusion.EJ2.Grids.ClipMode.Ellipsis
      * @aspType Syncfusion.EJ2.Grids.ClipMode
      * @isEnumeration true
@@ -286,9 +287,10 @@ export declare class TreeGrid extends Component<HTMLElement> implements INotifyP
     cloneQuery: Query;
     /**
      * Defines the print modes. The available print modes are
-     * * `AllPages`: Prints all pages of the TreeGrid.
-     * * `CurrentPage`: Prints the current page of the TreeGrid.
-     *
+     * ```props
+     * * AllPages :- Prints all pages of the TreeGrid.
+     * * CurrentPage :- Prints the current page of the TreeGrid.
+     * ```
      * @default Syncfusion.EJ2.Grids.PrintMode.AllPages
      * @isEnumeration true
      * @aspType Syncfusion.EJ2.Grids.PrintMode
@@ -456,12 +458,13 @@ export declare class TreeGrid extends Component<HTMLElement> implements INotifyP
     toolbarTemplate: string;
     /**
      * Defines the mode of TreeGrid lines. The available modes are,
-     * * `Both`: Displays both horizontal and vertical TreeGrid lines.
-     * * `None`: No TreeGrid lines are displayed.
-     * * `Horizontal`: Displays the horizontal TreeGrid lines only.
-     * * `Vertical`: Displays the vertical TreeGrid lines only.
-     * * `Default`: Displays TreeGrid lines based on the theme.
-     *
+     * ```props
+     * * Both :- Displays both horizontal and vertical TreeGrid lines.
+     * * None :- No TreeGrid lines are displayed.
+     * * Horizontal :- Displays the horizontal TreeGrid lines only.
+     * * Vertical :- Displays the vertical TreeGrid lines only.
+     * * Default :- Displays TreeGrid lines based on the theme.
+     * ```
      * @default Syncfusion.EJ2.Grids.GridLine.Default
      * @isEnumeration true
      * @aspType Syncfusion.EJ2.Grids.GridLine
@@ -619,6 +622,13 @@ export declare class TreeGrid extends Component<HTMLElement> implements INotifyP
      * @default false
      */
     enableColumnVirtualization: boolean;
+    /**
+     * Specifies whether to display or remove the untrusted HTML values in the TreeGrid component.
+     * If `enableHtmlSanitizer` set to true, then it will sanitize any suspected untrusted strings and scripts before rendering them.
+     *
+     * @default false
+     */
+    enableHtmlSanitizer: boolean;
     /**
      * If `enableInfiniteScrolling` set to true, then the data will be loaded in TreeGrid when the scrollbar reaches the end.
      * This helps to load large dataset in TreeGrid.
@@ -1777,6 +1787,14 @@ export declare class TreeGrid extends Component<HTMLElement> implements INotifyP
     private updateAltRow;
     private treeColumnRowTemplate;
     private collapseRemoteChild;
+    /**
+     * Method to sanitize html element
+     *
+     * @param {any} value - Specifies the html value to sanitize
+     * @returns {any} Returns the sanitized html value
+     * @hidden
+     */
+    private sanitize;
     /**
      * Updates the rows and cells
      *

package/src/treegrid/base/treegrid.js

@@ -17,7 +17,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { Component, addClass, createElement, EventHandler, isNullOrUndefined, extend, merge } from '@syncfusion/ej2-base';
+import { Component, addClass, createElement, EventHandler, isNullOrUndefined, extend, merge, SanitizeHtmlHelper } from '@syncfusion/ej2-base';
 import { removeClass, Complex, Collection, getValue } from '@syncfusion/ej2-base';
 import { Event, Property, NotifyPropertyChanges, setValue, KeyboardEvents, L10n } from '@syncfusion/ej2-base';
 import { Column } from '../models/column';
@@ -589,6 +589,8 @@ var TreeGrid = /** @class */ (function (_super) {
         }
         if (this.isVue) {
             this.grid.isVue = true;
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            this.grid.vueInstance = this.vueInstance;
         }
         createSpinner({ target: this.element }, this.createElement);
         this.log(['mapping_fields_missing']);
@@ -753,6 +755,8 @@ var TreeGrid = /** @class */ (function (_super) {
         this.grid["" + templateInstance] = this["" + templateInstance];
         var isJsComponent = 'isJsComponent';
         this.grid["" + isJsComponent] = true;
+        var enableHtmlSanitizer = 'enableHtmlSanitizer';
+        this.grid["" + enableHtmlSanitizer] = this.enableHtmlSanitizer;
     };
     TreeGrid.prototype.triggerEvents = function (args) {
         this.trigger(getObject('name', args), args);
@@ -2259,13 +2263,15 @@ var TreeGrid = /** @class */ (function (_super) {
             for (var i = 0; i < this.columns.length; i++) {
                 if (!isNullOrUndefined(this.columns[parseInt(i.toString(), 10)].columns)) {
                     for (var j = 0; j < this.columns[parseInt(i.toString(), 10)].columns.length; j++) {
-                        var stackedColumn = this.columns[parseInt(i.toString(), 10)].columns[parseInt(j.toString(), 10)];
+                        var stackedColumn = this.columns[parseInt(i.toString(), 10)]
+                            .columns[parseInt(j.toString(), 10)];
                         var currentColumn = this.grid.getColumnByField(stackedColumn.field);
                         stackedColumn.width = currentColumn.width;
                     }
                 }
                 else if (!isNullOrUndefined(this.columns[parseInt(i.toString(), 10)].field)) {
-                    var currentColumn = this.grid.getColumnByField(this.columns[parseInt(i.toString(), 10)].field);
+                    var fieldName = this.columns[parseInt(i.toString(), 10)].field;
+                    var currentColumn = this.grid.getColumnByField(fieldName);
                     this.columns[parseInt(i.toString(), 10)].width = currentColumn.width;
                 }
             }
@@ -3198,8 +3204,8 @@ var TreeGrid = /** @class */ (function (_super) {
             }
         }
         for (var i = 0; i < detailrows.length; i++) {
-            if (!isNullOrUndefined(detailrows[parseInt(i.toString(), 10)]) && !this.allowPaging && !(this.enableVirtualization
-                || this.enableInfiniteScrolling || isRemoteData(this) || isCountRequired(this))) {
+            if (!isNullOrUndefined(detailrows[parseInt(i.toString(), 10)]) && !this.allowPaging && !(this.enableVirtualization ||
+                this.enableInfiniteScrolling || isRemoteData(this) || isCountRequired(this))) {
                 gridRowsObject[detailrows[parseInt(i.toString(), 10)].rowIndex].visible = displayAction !== 'none' ? true : false;
                 detailrows[parseInt(i.toString(), 10)].style.display = displayAction;
             }
@@ -3300,6 +3306,20 @@ var TreeGrid = /** @class */ (function (_super) {
             }
         }
     };
+    /**
+     * Method to sanitize html element
+     *
+     * @param {any} value - Specifies the html value to sanitize
+     * @returns {any} Returns the sanitized html value
+     * @hidden
+     */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    TreeGrid.prototype.sanitize = function (value) {
+        if (this.enableHtmlSanitizer && typeof (value) === 'string') {
+            return SanitizeHtmlHelper.sanitize(value);
+        }
+        return value;
+    };
     /**
      * Updates the rows and cells
      *
@@ -3871,6 +3891,9 @@ var TreeGrid = /** @class */ (function (_super) {
     __decorate([
         Property(false)
     ], TreeGrid.prototype, "enableColumnVirtualization", void 0);
+    __decorate([
+        Property(false)
+    ], TreeGrid.prototype, "enableHtmlSanitizer", void 0);
     __decorate([
         Property(false)
     ], TreeGrid.prototype, "enableInfiniteScrolling", void 0);

package/src/treegrid/enum.d.ts

@@ -1,49 +1,32 @@
 /**
- * Defines types of Filter Hierarchy
- * * Parent - Specifies the filter type as Parent.
- * * Child - Specifies the filter type as excel.
- * * Both - Specifies the filter type as filter bar
- * * None - Specifies the filter type as check box.
+ * Defines modes of Filter Hierarchy
+ * ```props
+ * * Parent :- Shows filtered records with its Parent records.
+ * * Child :- Shows filtered records with its Child records.
+ * * Both :- Shows filtered records with its Parent and Child records.
+ * * None :- Shows only the filetred records.
+ * ```
  */
-export declare type FilterHierarchyMode = 
-/** Shows filtered records with its Parent records */
-'Parent' | 
-/** Shows filtered records with its Child records */
-'Child' | 
-/** Shows filtered records with its Parent and Child records */
-'Both' | 
-/** Shows only filetred records */
-'None';
+export declare type FilterHierarchyMode = 'Parent' | 'Child' | 'Both' | 'None';
 /**
  * Defines Predefined toolbar items.
- *
+ * ```props
+ * * Add :- Add new record.
+ * * Edit :- Edit the selected record.
+ * * Update :- Update the edited record.
+ * * Delete :- Delete the selected record.
+ * * Cancel :- Cancel the edited state.
+ * * Search :- Searches the TreeGrid records by given key.
+ * * ExpandAll :- Expands all the rows in TreeGrid.
+ * * CollapseAll :- Collapses all the rows in TreeGrid.
+ * * ExcelExport :- Export the TreeGrid to Excel.
+ * * PdfExport :- Export the TreeGrid to Pdf.
+ * * CsvExport :- Export the TreeGrid to Csv.
+ * * Print :- Print the TreeGrid.
+ * ```
  * @hidden
  */
-export declare type ToolbarItems = 
-/** Add new record */
-'Add' | 
-/** Delete selected record */
-'Delete' | 
-/** Update edited record */
-'Update' | 
-/** Cancel the edited state */
-'Cancel' | 
-/** Edit the selected record */
-'Edit' | 
-/** Searches the TreeGrid records by given key */
-'Search' | 
-/** Expands all the rows in TreeGrid */
-'ExpandAll' | 
-/** Collapses all the rows in TreeGrid */
-'CollapseAll' | 
-/** Export the TreeGrid to Excel */
-'ExcelExport' | 
-/** Export the TreeGrid to Pdf */
-'PdfExport' | 
-/** Export the TreeGrid to Csv */
-'CsvExport' | 
-/** Print the TreeGrid */
-'Print';
+export declare type ToolbarItems = 'Add' | 'Delete' | 'Update' | 'Cancel' | 'Edit' | 'Search' | 'ExpandAll' | 'CollapseAll' | 'ExcelExport' | 'PdfExport' | 'CsvExport' | 'Print';
 /**
  * Defines Predefined toolbar items.
  *
@@ -67,56 +50,34 @@ export declare enum ToolbarItem {
 }
 /**
  * Defines different PageSizeMode
- * * All - Specifies the PageSizeMode as All
- * * Root - Specifies the PageSizeMode as Root
+ * ```props
+ * * All :- Defines the pageSizeMode as All
+ * * Root :- Defines the pageSizeMode as Root
+ * ```
  */
-export declare type PageSizeMode = 
-/**  Defines the pageSizeMode as All */
-'All' | 
-/**  Defines the pageSizeMode as Root */
-'Root';
+export declare type PageSizeMode = 'All' | 'Root';
 /**
  * Defines predefined contextmenu items.
- *
+ * ```props
+ * * AutoFitAll :- Auto fit the size of all columns.
+ * * AutoFit :- Auto fit the current column.
+ * * SortAscending :- Sort the current column in ascending order.
+ * * SortDescending :- Sort the current column in descending order.
+ * * Edit :- Edit the current record.
+ * * Delete :- Delete the current record.
+ * * Save :- Save the edited record.
+ * * Cancel :- Cancel the edited state.
+ * * PdfExport :- Export the TreeGrid as Pdf format.
+ * * ExcelExport :- Export the TreeGrid as Excel format.
+ * * CsvExport :- Export the TreeGrid as CSV format.
+ * * FirstPage :- Go to the first page.
+ * * PrevPage :- Go to the previous page.
+ * * LastPage :- Go to the last page.
+ * * NextPage :- Go to the next page.
+ * ```
  * @hidden
  */
-export declare type ContextMenuItem = 
-/** `AutoFitAll` - Auto fit the size of all columns. */
-'AutoFitAll' | 
-/**  `AutoFit` - Auto fit the current column. */
-'AutoFit' | 
-/**  `SortAscending` - Sort the current column in ascending order. */
-'SortAscending' | 
-/** `SortDescending` - Sort the current column in descending order. */
-'SortDescending' | 
-/**  `Edit` - Edit the current record. */
-'Edit' | 
-/** `Delete` - Delete the current record. */
-'Delete' | 
-/** `Save` - Save the edited record. */
-'Save' | 
-/** `Cancel` - Cancel the edited state. */
-'Cancel' | 
-/** `PdfExport` - Export the TreeGrid as Pdf format. */
-'PdfExport' | 
-/** `ExcelExport` - Export the TreeGrid as Excel format. */
-'ExcelExport' | 
-/** `CsvExport` - Export the TreeGrid as CSV format. */
-'CsvExport' | 
-/** `FirstPage` - Go to the first page. */
-'FirstPage' | 
-/** `PrevPage` - Go to the previous page. */
-'PrevPage' | 
-/** `LastPage` - Go to the last page. */
-'LastPage' | 
-/** `NextPage` - Go to the next page. */
-'NextPage' | 
-/** AddRow to the TreeGrid */
-'AddRow' | 
-/** `Indent` - Indents the record to one level of hierarchy */
-'Indent' | 
-/** `Outdent` - Outdent the record to one level of hierarchy */
-'Outdent';
+export declare type ContextMenuItem = 'AutoFitAll' | 'AutoFit' | 'SortAscending' | 'SortDescending' | 'Edit' | 'Delete' | 'Save' | 'Cancel' | 'PdfExport' | 'ExcelExport' | 'CsvExport' | 'FirstPage' | 'PrevPage' | 'LastPage' | 'NextPage' | 'AddRow' | 'Indent' | 'Outdent';
 /**
  * Defines predefined contextmenu items.
  *
@@ -144,69 +105,49 @@ export declare enum ContextMenuItems {
 }
 /**
  * Defines modes of editing.
+ * ```props
+ * * Cell :- Defines the editing mode as Cell.
+ * * Row :- Defines the editing mode as Row.
+ * * Dialog :- Defines the editing mode as Dialog.
+ * * Batch :- Defines the editing mode as Batch.
+ * ```
  */
-export declare type EditMode = 
-/**  Defines EditMode as Cell */
-'Cell' | 
-/**  Defines EditMode as Row */
-'Row' | 
-/**  Defines EditMode as Dialog */
-'Dialog' | 
-/**  Defines EditMode as Batch */
-'Batch';
+export declare type EditMode = 'Cell' | 'Row' | 'Dialog' | 'Batch';
 /**
  * Defines the position where the new row has to be added.
+ * ```props
+ * * Top :- Defines new row position as top of all rows.
+ * * Bottom :- Defines new row position as bottom of all rows.
+ * * Above :- Defines new row position as above the selected row.
+ * * Below :- Defines new row position as below the selected row.
+ * * Child :- Defines new row position as child to the selected row.
+ * ```
  */
-export declare type RowPosition = 
-/**  Defines new row position as top of all rows */
-'Top' | 
-/**  Defines new row position as bottom of all rows */
-'Bottom' | 
-/**  Defines new row position as above the selected row */
-'Above' | 
-/**  Defines new row position as below the selected row */
-'Below' | 
-/**  Defines new row position as child to the selected row */
-'Child';
+export declare type RowPosition = 'Top' | 'Bottom' | 'Above' | 'Below' | 'Child';
 /**
  * Defines types of Filter
- * * Menu - Specifies the filter type as menu.
- * * Excel - Specifies the filter type as excel.
- * * FilterBar - Specifies the filter type as filter bar.
+ * ```props
+ * * Menu :- Defines the filter type as Menu.
+ * * Excel :- Defines the filter type as Excel.
+ * * FilterBar :- Defines the filter type as FilterBar.
+ * ```
  */
-export declare type FilterType = 
-/**  Defines FilterType as filterbar */
-'FilterBar' | 
-/**  Defines FilterType as excel */
-'Excel' | 
-/**  Defines FilterType as menu */
-'Menu';
+export declare type FilterType = 'FilterBar' | 'Excel' | 'Menu';
 /**
  * Defines the wrap mode.
- * * Both -  Wraps both header and content.
- * * Header - Wraps header alone.
- * * Content - Wraps content alone.
+ * ```props
+ * * Both :-  Wraps both header and content.
+ * * Header :- Wraps header alone.
+ * * Content :- Wraps content alone.
  */
-export declare type WrapMode = 
-/** Wraps both header and content */
-'Both' | 
-/** Wraps  header alone */
-'Header' | 
-/** Wraps  content alone */
-'Content';
+export declare type WrapMode = 'Both' | 'Header' | 'Content';
 /**
  * Defines types of CopyHierarchyMode. They are
- * * Parent
- * * Child
- * * Both
- * * None
+ * ```props
+ * * Parent :- Defines CopyHiearchyMode as Parent.
+ * * Child :- Defines CopyHiearchyMode as Child.
+ * * Both :- Defines CopyHiearchyMode as Both.
+ * * None :- Defines CopyHiearchyMode as None.
+ * ```
  */
-export declare type CopyHierarchyType = 
-/**  Defines CopyHiearchyMode as Parent */
-'Parent' | 
-/**  Defines CopyHiearchyMode as Child */
-'Child' | 
-/**  Defines CopyHiearchyMode as Both */
-'Both' | 
-/**  Defines CopyHiearchyMode as None */
-'None';
+export declare type CopyHierarchyType = 'Parent' | 'Child' | 'Both' | 'None';

package/src/treegrid/models/column.d.ts

@@ -403,9 +403,11 @@ export interface ColumnModel {
     columns?: Column[] | string[] | ColumnModel[];
     /**
      * Defines the cell content's overflow mode. The available modes are
-     * * `Clip` -  Truncates the cell content when it overflows its area.
-     * * `Ellipsis` -  Displays ellipsis when the cell content overflows its area.
-     * * `EllipsisWithTooltip` - Displays ellipsis when the cell content overflows its area
+     * ```props
+     * * Clip :- Truncates the cell content when it overflows its area.
+     * * Ellipsis :- Displays ellipsis when the cell content overflows its area.
+     * * EllipsisWithTooltip :- Displays ellipsis when the cell content overflows its area also it will display tooltip while hover on ellipsis applied cell.
+     * ```
      * also it will display tooltip while hover on ellipsis applied cell.
      *
      * @default Syncfusion.EJ2.Grids.ClipMode.Ellipsis