@syncfusion/ej2-treegrid - npm Package Compare versions

Comparing version 17.2.28-beta to 17.2.29-beta

CHANGELOG.md

@@ -9,13 +9,11 @@ # Changelog
 
-- Virtual Scrolling support has been provided in which the rows are added dynamically while scrolling.
-- Detail Template support has been provided that provides additional information about a particular row.
+- Checkbox selection support has been provided that allows users to select rows using checkbox.
+- Checkbox Column support has been provided that allows users to check rows using checkbox in treegrid column.
 
 #### Bug Fixes
 
-- `collapseAll` method works fine with pageSize mode set to `All`.
+- Change detection for properties `dataSource` and `query` were handled for remote data.
+- Edited records can be searched/filtered.
+- Inner level records will be collapsed/expanded after filtering/searching actions.
 
-#### Breaking Changes
-
-- The default value of `enableHover` property has been changed from `true` to `false`.
-
 ## 17.1.1-beta (2019-01-29)
@@ -22,0 +20,0 @@

dist/global/index.d.ts

@@ -1,10 +0,1 @@
-/*!
-*  filename: index.d.ts
-*  version : 17.2.28-beta
-*  Copyright Syncfusion Inc. 2001 - 2019. 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
-*  [e-mail]. Any infringement will be prosecuted under
-*  applicable laws. 
-*/
 import * as _treegrid from '@syncfusion/ej2-treegrid';
@@ -11,0 +2,0 @@

package.json

@@ -5,3 +5,3 @@ {
   "_inBundle": false,
-  "_integrity": "sha512-12nznJrXllQzC+BLjlSyd1lu+KEcFbK7ds4xScrElHKRHB5KRB3q86ep5vDkzz/SeZXbJZWYJ7nIQMudODSryg==",
+  "_integrity": "sha512-BzgZuEuJKaLnplX+Nq9vr5VEk3DvELppbmYBrBJD1X4/gjOG7CwBfeX6gNTrGPP61HLO7+7qJkWcfM/4x/7pnQ==",
   "_location": "/@syncfusion/ej2-treegrid",
@@ -28,4 +28,4 @@ "_phantomChildren": {},
   ],
-  "_resolved": "http://nexus.syncfusion.com/repository/ej2-release/@syncfusion/ej2-treegrid/-/ej2-treegrid-17.1.1.tgz",
-  "_shasum": "596cdaac3a130fb6f74651898a4907da24ebfe61",
+  "_resolved": "http://nexus.syncfusion.com/repository/ej2-production/@syncfusion/ej2-treegrid/-/ej2-treegrid-17.1.1.tgz",
+  "_shasum": "975ae29f6a2c6870bcffeb7359921636a4f06c6a",
   "_spec": "@syncfusion/ej2-treegrid@*",
@@ -41,6 +41,6 @@ "_where": "/jenkins/workspace/ation_hotfix_16.4.0.42_Vol4-CJVRBFC7Z7RSISPRJNEMNQSRMCB6XTG67IJD6R2DVNXFIKQEITTQ/packages/included",
   "dependencies": {
-    "@syncfusion/ej2-base": "~17.2.28-beta",
-    "@syncfusion/ej2-data": "~17.2.28-beta",
-    "@syncfusion/ej2-grids": "~17.2.28-beta",
-    "@syncfusion/ej2-popups": "~17.2.28-beta"
+    "@syncfusion/ej2-base": "17.2.29-beta",
+    "@syncfusion/ej2-data": "17.2.29-beta",
+    "@syncfusion/ej2-grids": "17.2.29-beta",
+    "@syncfusion/ej2-popups": "17.2.29-beta"
   },
@@ -65,4 +65,5 @@ "deprecated": false,
   },
-  "version": "17.2.28-beta",
+  "typings": "index.d.ts",
+  "version": "17.2.29-beta",
   "sideEffects": false
 }

README.md

@@ -5,3 +5,3 @@ # ej2-treegrid
 
-![TreeGrid](https://ej2.syncfusion.com/products/tree-grid/readme.png)
+![TreeGrid](https://ej2.syncfusion.com/products/images/tree-grid/readme.png)
 
@@ -8,0 +8,0 @@ > This is a commercial product and requires a paid license for possession or use. Syncfusion’s licensed software, including this component, is subject to the terms and conditions of Syncfusion's EULA https://www.syncfusion.com/eula/es. To acquire a license, you can purchase one at https://www.syncfusion.com/sales/products or start a free 30-day trial here https://www.syncfusion.com/account/manage-trials/start-trials.

src/global.js

 import * as index from './index';
-index.TreeGrid.Inject(index.Filter, index.Page, index.Sort, index.Reorder, index.Toolbar, index.Aggregate, index.Resize, index.ColumnMenu, index.ExcelExport, index.PdfExport, index.CommandColumn, index.ContextMenu, index.Edit, index.Selection, index.VirtualScroll, index.DetailRow);
+index.TreeGrid.Inject(index.Filter, index.Page, index.Sort, index.Reorder, index.Toolbar, index.Aggregate, index.Resize, index.ColumnMenu, index.ExcelExport, index.PdfExport, index.CommandColumn, index.ContextMenu, index.Edit, index.Selection, index.VirtualScroll, index.DetailRow, index.RowDD);
 export * from './index';

src/treegrid/actions/crud-actions.js

 import { isNullOrUndefined, extend } from '@syncfusion/ej2-base';
 import { DataManager } from '@syncfusion/ej2-data';
-import { extendArray, getPlainData } from '../utils';
+import { extendArray, getPlainData, getParentData } from '../utils';
 export function editAction(details, control, isSelfReference, addRowIndex, selectedIndex, columnName, addRowRecord) {
@@ -30,3 +30,3 @@ var value = details.value;
         for (var k = 0; k < modifiedData.length; k++) {
-            var keys = Object.keys(modifiedData[k]);
+            var keys = Object.keys(modifiedData[k].taskData);
             i = treeData.length;
@@ -63,3 +63,4 @@ var _loop_1 = function () {
                                     || keys[j] === columnName)) {
-                                    treeData[i][keys[j]] = modifiedData[k][keys[j]];
+                                    var editedData = getParentData(control, modifiedData[k].uniqueID);
+                                    editedData.taskData[keys[j]] = treeData[i][keys[j]] = modifiedData[k][keys[j]];
                                 }
@@ -72,4 +73,4 @@ }
                                 if (isSelfReference) {
-                                    originalData[control.parentIdMapping] = treeData[i][control.idMapping];
-                                    treeData.splice(i + 1, 0, originalData);
+                                    originalData.taskData[control.parentIdMapping] = treeData[i][control.idMapping];
+                                    treeData.splice(i + 1, 0, originalData.taskData);
                                 }
@@ -80,15 +81,17 @@ else {
                                     }
-                                    treeData[i][control.childMapping].push(originalData);
-                                    updateParentRow(key, treeData[i], action, control, isSelfReference);
+                                    treeData[i][control.childMapping].push(originalData.taskData);
+                                    updateParentRow(key, treeData[i], action, control, isSelfReference, originalData);
                                 }
                             }
                             else if (control.editSettings.newRowPosition === 'Below') {
-                                treeData.splice(i + 1, 0, originalData);
+                                treeData.splice(i + 1, 0, originalData.taskData);
+                                updateParentRow(key, treeData[i], action, control, isSelfReference, originalData);
                             }
                             else if (!addRowIndex) {
                                 index = 0;
-                                treeData.splice(index, 0, originalData);
+                                treeData.splice(index, 0, originalData.taskData);
                             }
                             else if (control.editSettings.newRowPosition === 'Above') {
-                                treeData.splice(i, 0, originalData);
+                                treeData.splice(i, 0, originalData.taskData);
+                                updateParentRow(key, treeData[i], action, control, isSelfReference, originalData);
                             }
@@ -159,5 +162,6 @@ }
                 var keys = Object.keys(modifiedData);
+                var editedData = getParentData(control, modifiedData.uniqueID);
                 for (var i = 0; i < keys.length; i++) {
                     if (childRecords[j].hasOwnProperty(keys[i]) && (control.editSettings.mode !== 'Cell' || keys[i] === columnName)) {
-                        childRecords[j][keys[i]] = modifiedData[keys[i]];
+                        editedData[keys[i]] = editedData.taskData[keys[i]] = childRecords[j][keys[i]] = modifiedData[keys[i]];
                     }
@@ -172,3 +176,3 @@ }
                         childRecords.splice(j + 1, 0, originalData);
-                        updateParentRow(key, childRecords[j], action, control, isSelfReference);
+                        updateParentRow(key, childRecords[j], action, control, isSelfReference, originalData);
                     }
@@ -179,11 +183,13 @@ else {
                         }
-                        childRecords[j][control.childMapping].push(originalData);
-                        updateParentRow(key, childRecords[j], action, control, isSelfReference);
+                        childRecords[j][control.childMapping].push(originalData.taskData);
+                        updateParentRow(key, childRecords[j], action, control, isSelfReference, originalData);
                     }
                 }
                 else if (control.editSettings.newRowPosition === 'Above') {
-                    childRecords.splice(j, 0, originalData);
+                    childRecords.splice(j, 0, originalData.taskData);
+                    updateParentRow(key, childRecords[j], action, control, isSelfReference, originalData);
                 }
                 else if (control.editSettings.newRowPosition === 'Below') {
-                    childRecords.splice(j + 1, 0, originalData);
+                    childRecords.splice(j + 1, 0, originalData.taskData);
+                    updateParentRow(key, childRecords[j], action, control, isSelfReference, originalData);
                 }
@@ -208,45 +214,66 @@ }
 export function updateParentRow(key, record, action, control, isSelfReference, child) {
-    var currentRecords = control.grid.getCurrentViewRecords();
-    var index;
-    currentRecords.map(function (e, i) { if (e[key] === record[key]) {
-        index = i;
-        return;
-    } });
-    record = currentRecords[index];
-    record.hasChildRecords = false;
-    if (action === 'add') {
-        record.expanded = true;
-        record.hasChildRecords = true;
-        if (control.sortSettings.columns.length && isNullOrUndefined(child)) {
-            child = currentRecords.filter(function (e) {
-                if (e.parentUniqueID === record.uniqueID) {
-                    return e;
+    if ((control.editSettings.newRowPosition === 'Above' || control.editSettings.newRowPosition === 'Below')
+        && action === 'add' && !isNullOrUndefined(child.parentItem)) {
+        var parentData = getParentData(control, child.parentItem.uniqueID);
+        parentData.childRecords.push(child);
+    }
+    else {
+        var currentRecords = control.grid.getCurrentViewRecords();
+        var index_1;
+        currentRecords.map(function (e, i) { if (e[key] === record[key]) {
+            index_1 = i;
+            return;
+        } });
+        record = currentRecords[index_1];
+        record.hasChildRecords = false;
+        if (action === 'add') {
+            record.expanded = true;
+            record.hasChildRecords = true;
+            if (control.sortSettings.columns.length && isNullOrUndefined(child)) {
+                child = currentRecords.filter(function (e) {
+                    if (e.parentUniqueID === record.uniqueID) {
+                        return e;
+                    }
+                    else {
+                        return null;
+                    }
+                });
+            }
+            var childRecords = child ? child instanceof Array ? child[0] : child : currentRecords[index_1 + 1];
+            if (!record.hasOwnProperty('childRecords')) {
+                record.childRecords = [];
+            }
+            else {
+                if (!isNullOrUndefined(child)) {
+                    record.childRecords.push(child);
                 }
-                else {
-                    return null;
-                }
-            });
-        }
-        var childRecords = child ? child instanceof Array ? child[0] : child : currentRecords[index + 1];
-        if (!record.hasOwnProperty('childRecords')) {
-            record.childRecords = [];
-        }
-        if (record.childRecords.indexOf(childRecords) === -1) {
-            record.childRecords.unshift(childRecords);
-        }
-        if (isSelfReference) {
-            if (!record.hasOwnProperty(control.childMapping)) {
-                record[control.childMapping] = [];
             }
             if (record.childRecords.indexOf(childRecords) === -1) {
-                record[control.childMapping].unshift(childRecords);
+                record.childRecords.unshift(childRecords);
             }
+            if (isSelfReference) {
+                if (!record.hasOwnProperty(control.childMapping)) {
+                    record[control.childMapping] = [];
+                }
+                if (record[control.childMapping].indexOf(childRecords) === -1) {
+                    record[control.childMapping].unshift(childRecords);
+                }
+            }
         }
+        var primaryKeys = control.grid.getPrimaryKeyFieldNames()[0];
+        var data = control.grid.dataSource instanceof DataManager ?
+            control.grid.dataSource.dataSource.json : control.grid.dataSource;
+        for (var i = 0; i < data.length; i++) {
+            if (data[i][primaryKeys] === record[primaryKeys]) {
+                data[i] = record;
+                break;
+            }
+        }
+        control.grid.setRowData(key, record);
+        var row = control.getRowByIndex(index_1);
+        control.renderModule.cellRender({
+            data: record, cell: row.cells[control.treeColumnIndex],
+            column: control.grid.getColumns()[control.treeColumnIndex]
+        });
     }
-    control.grid.setRowData(key, record);
-    var row = control.getRowByIndex(index);
-    control.renderModule.cellRender({
-        data: record, cell: row.cells[control.treeColumnIndex],
-        column: control.grid.getColumns()[control.treeColumnIndex]
-    });
 }

src/treegrid/actions/edit.d.ts

@@ -17,2 +17,3 @@ import { Column } from '@syncfusion/ej2-grids';
     private doubleClickTarget;
+    private internalProperties;
     private previousNewRowPosition;
@@ -19,0 +20,0 @@ /**

src/treegrid/actions/edit.js

@@ -5,3 +5,3 @@ import { Grid, Edit as GridEdit, getUid, getObject } from '@syncfusion/ej2-grids';
 import { DataManager } from '@syncfusion/ej2-data';
-import { findChildrenRecords } from '../utils';
+import { findChildrenRecords, getParentData } from '../utils';
 import { editAction, updateParentRow } from './crud-actions';
@@ -24,2 +24,3 @@ /**
         this.previousNewRowPosition = null;
+        this.internalProperties = {};
         this.addEventListener();
@@ -114,3 +115,3 @@ }
             column.allowEditing && !(target.classList.contains('e-treegridexpand') ||
-            target.classList.contains('e-treegridcollapse'))) {
+            target.classList.contains('e-treegridcollapse')) && this.parent.editSettings.allowEditOnDblClick) {
             this.isOnBatch = true;
@@ -142,4 +143,15 @@ this.parent.grid.setProperties({ selectedRowIndex: args.rowIndex }, true);
     Edit.prototype.cellEdit = function (args) {
+        var _this = this;
+        var promise = 'promise';
+        var prom = args[promise];
+        delete args[promise];
         if (this.keyPress !== 'enter') {
-            this.parent.trigger(events.cellEdit, args);
+            this.parent.trigger(events.cellEdit, args, function (celleditArgs) {
+                if (!celleditArgs.cancel && _this.parent.editSettings.mode === 'Cell') {
+                    _this.enableToolbarItems('edit');
+                }
+                if (!isNullOrUndefined(prom)) {
+                    prom.resolve(celleditArgs);
+                }
+            });
         }
@@ -160,5 +172,2 @@ if (this.doubleClickTarget && (this.doubleClickTarget.classList.contains('e-treegridexpand') ||
             }
-            if (!args.cancel) {
-                this.enableToolbarItems('edit');
-            }
         }
@@ -263,5 +272,13 @@ // if (this.isAdd && this.parent.editSettings.mode === 'Batch' && !args.cell.parentElement.classList.contains('e-insertedrow')) {
         this.parent.parentData = [];
-        var data = this.parent.grid.dataSource;
-        for (var i = 0; i < this.parent.grid.dataSource.length; i++) {
+        var data = this.parent.grid.dataSource instanceof DataManager ?
+            this.parent.grid.dataSource.dataSource.json : this.parent.grid.dataSource;
+        for (var i = 0; i < data.length; i++) {
             data[i].index = i;
+            var key = this.parent.grid.getPrimaryKeyFieldNames()[0];
+            if (details.value[key] === data[i][key]) {
+                if (details.action === 'add') {
+                    data[i].level = this.internalProperties.level;
+                    data[i].parentItem = this.internalProperties.parentItem;
+                }
+            }
             setValue('uniqueIDCollection.' + data[i].uniqueID + '.index', i, this.parent);
@@ -327,3 +344,3 @@ if (!data[i].level) {
             if (this.parent.editSettings.newRowPosition === 'Child' && !(records[index].expanded) &&
-                records[index].hasChildRecords) {
+                records[index][this.parent.childMapping] && records[index][this.parent.childMapping].length) {
                 this.parent.expandRow(rows[index + 1], records[index]);
@@ -427,2 +444,3 @@ }
             var position = null;
+            value.taskData = isNullOrUndefined(value.taskData) ? extend({}, args.data) : value.taskData;
             // let currentData: ITreeData[] = this.batchRecords.length ? this.batchRecords :
@@ -450,3 +468,3 @@ //            <ITreeData[]>this.parent.grid.getCurrentViewRecords();
             }
-            if (this.parent.editSettings.newRowPosition !== 'Top') {
+            if (this.parent.editSettings.newRowPosition !== 'Top' && currentData.length) {
                 if (this.parent.editSettings.newRowPosition === 'Above') {
@@ -475,3 +493,3 @@ position = 'before';
                     if (this.isSelfReference) {
-                        value[this.parent.parentIdMapping] = idMapping;
+                        value.taskData[this.parent.parentIdMapping] = value[this.parent.parentIdMapping] = idMapping;
                         if (!isNullOrUndefined(value.parentItem)) {
@@ -491,3 +509,3 @@ updateParentRow(key, value.parentItem, 'add', this.parent, this.isSelfReference, value);
                     if (this.isSelfReference) {
-                        value[this.parent.parentIdMapping] = parentIdMapping;
+                        value.taskData[this.parent.parentIdMapping] = value[this.parent.parentIdMapping] = parentIdMapping;
                         if (!isNullOrUndefined(value.parentItem)) {
@@ -515,2 +533,17 @@ updateParentRow(key, value.parentItem, 'add', this.parent, this.isSelfReference, value);
         }
+        if (args.action === 'add') {
+            this.internalProperties = { level: value.level, parentItem: value.parentItem };
+        }
+        if (args.requestType === 'delete') {
+            var deletedValues = args.data;
+            for (var i = 0; i < deletedValues.length; i++) {
+                if (deletedValues[i].parentItem) {
+                    var parentItem = getParentData(this.parent, deletedValues[i].parentItem.uniqueID);
+                    if (!isNullOrUndefined(parentItem) && parentItem.hasChildRecords) {
+                        var childIndex = parentItem.childRecords.indexOf(deletedValues[i]);
+                        parentItem.childRecords.splice(childIndex, 1);
+                    }
+                }
+            }
+        }
         return args;
@@ -517,0 +550,0 @@ };

src/treegrid/actions/excel-export.js

@@ -76,3 +76,5 @@ import { getObject, Grid, ExcelExport as GridExcel } from '@syncfusion/ej2-grids';
                 excelExportProperties = _this.manipulateExportProperties(excelExportProperties, dataSource, e);
-                return _this.parent.grid.excelExportModule.Map(_this.parent.grid, excelExportProperties, isMultipleExport, workbook, isCsv, isBlob);
+                return _this.parent.grid.excelExportModule.Map(_this.parent.grid, excelExportProperties, isMultipleExport, workbook, isCsv, isBlob).then(function (book) {
+                    resolve(book);
+                });
             });
@@ -111,2 +113,9 @@ });
         }
+        if (property && property.dataSource && this.isLocal()) {
+            var flatsData = this.parent.flatData;
+            var dataSrc = property.dataSource instanceof DataManager ? property.dataSource.dataSource.json : property.dataSource;
+            this.parent.dataModule.convertToFlatData(dataSrc);
+            dtSrc = this.parent.flatData;
+            this.parent.flatData = flatsData;
+        }
         property = isNullOrUndefined(property) ? Object() : property;
@@ -113,0 +122,0 @@ property.dataSource = new DataManager({ json: dtSrc });

src/treegrid/actions/page.js

@@ -5,3 +5,3 @@ import { Grid } from '@syncfusion/ej2-grids';
 import { DataManager, Query, Predicate } from '@syncfusion/ej2-data';
-import { getValue, isNullOrUndefined } from '@syncfusion/ej2-base';
+import { getValue, isNullOrUndefined, isBlazor } from '@syncfusion/ej2-base';
 import { getExpandStatus } from '../utils';
@@ -78,2 +78,7 @@ /**
         rowDetails.record.expanded = rowDetails.action === 'collapse' ? false : true;
+        if (isBlazor()) {
+            this.parent.flatData.filter(function (e) {
+                return e.uniqueID === rowDetails.record.uniqueID;
+            })[0].expanded = rowDetails.action === 'collapse' ? false : true;
+        }
         var ret = {
@@ -80,0 +85,0 @@ result: this.parent.flatData,

src/treegrid/actions/pdf-export.js

@@ -76,3 +76,5 @@ import { getObject, PdfExport as GridPdf, Grid } from '@syncfusion/ej2-grids';
                 pdfExportProperties = _this.manipulatePdfProperties(pdfExportProperties, dtSrc, e);
-                return _this.parent.grid.pdfExportModule.Map(_this.parent.grid, pdfExportProperties, isMultipleExport, pdfDoc, isBlob);
+                return _this.parent.grid.pdfExportModule.Map(_this.parent.grid, pdfExportProperties, isMultipleExport, pdfDoc, isBlob).then(function (document) {
+                    resolve(document);
+                });
             });
@@ -112,2 +114,9 @@ });
         }
+        if (prop && prop.dataSource && isLocal) {
+            var flatDatas = this.parent.flatData;
+            var dataSrc = prop.dataSource instanceof DataManager ? prop.dataSource.dataSource.json : prop.dataSource;
+            this.parent.dataModule.convertToFlatData(dataSrc);
+            dtSrc = this.parent.flatData;
+            this.parent.flatData = flatDatas;
+        }
         prop = isNullOrUndefined(prop) ? {} : prop;
@@ -114,0 +123,0 @@ prop.dataSource = new DataManager({ json: dtSrc });

src/treegrid/actions/selection.js

@@ -56,2 +56,6 @@ import { isNullOrUndefined, removeClass } from '@syncfusion/ej2-base';
             checkBox = checkWrap.querySelector('input[type="checkbox"]');
+            var rowIndex = void 0;
+            rowIndex = [];
+            rowIndex.push(target.closest('tr').rowIndex);
+            this.selectCheckboxes(rowIndex);
             this.triggerChkChangeEvent(checkBox, checkBox.nextElementSibling.classList.contains('e-check'), target.closest('tr'));
@@ -63,17 +67,12 @@ }
             this.headerSelection(checkBoxvalue);
+            checkBox = checkWrap.querySelector('input[type="checkbox"]');
+            this.triggerChkChangeEvent(checkBox, checkBoxvalue, target.closest('tr'));
         }
     };
     Selection.prototype.triggerChkChangeEvent = function (checkBox, checkState, rowElement) {
-        var _this = this;
-        var rowIndex;
-        rowIndex = [];
-        rowIndex.push(rowElement.rowIndex);
         var data = this.parent.getCurrentViewRecords()[rowElement.rowIndex];
-        var args = { checked: checkState, target: checkBox, cancel: false, rowElement: rowElement,
-            rowData: data };
-        this.parent.trigger(events.checkboxChange, args, function (checkBoxArgs) {
-            if (!checkBoxArgs.cancel) {
-                _this.selectCheckboxes(rowIndex);
-            }
-        });
+        var args = { checked: checkState, target: checkBox, rowElement: rowElement,
+            rowData: checkBox.classList.contains('e-treeselectall')
+                ? this.parent.getCheckedRecords() : data };
+        this.parent.trigger(events.checkboxChange, args);
     };
@@ -80,0 +79,0 @@ Selection.prototype.getCheckboxcolumnIndex = function () {

src/treegrid/actions/summary.js

@@ -81,2 +81,3 @@ import { Query, DataManager } from '@syncfusion/ej2-data';
                     setValue('isSummaryRow', true, item);
+                    setValue('parentUniqueID', summaryParent.uniqueID, item);
                     if (isSort) {
@@ -83,0 +84,0 @@ var childRecords = getObject('childRecords', parentRecord);

src/treegrid/actions/toolbar.d.ts

@@ -22,2 +22,3 @@ import { TreeGrid } from '../base';
     removeEventListener(): void;
+    private refreshToolbar;
     private toolbarClickHandler;
@@ -24,0 +25,0 @@ /**

src/treegrid/actions/toolbar.js

 import { Grid, Toolbar as tool } from '@syncfusion/ej2-grids';
 import * as events from '../base/constant';
+import { isNullOrUndefined } from '@syncfusion/ej2-base';
 /**
@@ -24,2 +25,3 @@ * Toolbar Module for TreeGrid
     Toolbar.prototype.addEventListener = function () {
+        this.parent.on(events.rowSelected, this.refreshToolbar, this);
         this.parent.on(events.toolbarClick, this.toolbarClickHandler, this);
@@ -34,5 +36,36 @@ };
         }
+        this.parent.off(events.rowSelected, this.refreshToolbar);
         this.parent.off(events.toolbarClick, this.toolbarClickHandler);
     };
+    Toolbar.prototype.refreshToolbar = function (args) {
+        var tObj = this.parent;
+        var isParent;
+        if (args.rowIndex === 0 || tObj.getSelectedRecords().length > 1) {
+            this.enableItems([tObj.element.id + '_gridcontrol_indent', tObj.element.id + '_gridcontrol_outdent'], false);
+        }
+        else {
+            if (tObj.getCurrentViewRecords()[args.rowIndex].level >
+                tObj.getCurrentViewRecords()[args.rowIndex - 1].level) {
+                this.enableItems([tObj.element.id + '_gridcontrol_indent'], false);
+            }
+            else {
+                this.enableItems([tObj.element.id + '_gridcontrol_indent'], true);
+            }
+            if (tObj.getCurrentViewRecords()[args.rowIndex].level ===
+                tObj.getCurrentViewRecords()[args.rowIndex - 1].level) {
+                this.enableItems([tObj.element.id + '_gridcontrol_indent'], true);
+            }
+            if (tObj.getCurrentViewRecords()[args.rowIndex].level === 0) {
+                this.enableItems([tObj.element.id + '_gridcontrol_outdent'], false);
+            }
+            if (tObj.getCurrentViewRecords()[args.rowIndex].level !== 0) {
+                this.enableItems([tObj.element.id + '_gridcontrol_outdent'], true);
+            }
+        }
+        if (args.rowIndex === 0 && !isNullOrUndefined(args.data.parentItem)) {
+            this.enableItems([tObj.element.id + '_gridcontrol_outdent'], true);
+        }
+    };
     Toolbar.prototype.toolbarClickHandler = function (args) {
+        var tObj = this.parent;
         if (this.parent.editSettings.mode === 'Cell' && this.parent.grid.editSettings.mode === 'Batch' &&
@@ -49,2 +82,28 @@ args.item.id === this.parent.grid.element.id + '_update') {
         }
+        if (args.item.id === tObj.grid.element.id + '_indent' && tObj.getSelectedRecords().length) {
+            var record = tObj.getCurrentViewRecords()[tObj.getSelectedRowIndexes()[0] - 1];
+            var dropIndex = void 0;
+            if (record.level > tObj.getSelectedRecords()[0].level) {
+                for (var i = 0; i < tObj.getCurrentViewRecords().length; i++) {
+                    if (tObj.getCurrentViewRecords()[i].taskData === record.parentItem.taskData) {
+                        dropIndex = i;
+                    }
+                }
+            }
+            else {
+                dropIndex = tObj.getSelectedRowIndexes()[0] - 1;
+            }
+            tObj.reorderRows([tObj.getSelectedRowIndexes()[0]], dropIndex, 'child');
+        }
+        if (args.item.id === tObj.grid.element.id + '_outdent' && tObj.getSelectedRecords().length) {
+            var index = tObj.getSelectedRowIndexes()[0];
+            var dropIndex = void 0;
+            var parentItem = tObj.getSelectedRecords()[0].parentItem;
+            for (var i = 0; i < tObj.getCurrentViewRecords().length; i++) {
+                if (tObj.getCurrentViewRecords()[i].taskData === parentItem.taskData) {
+                    dropIndex = i;
+                }
+            }
+            tObj.reorderRows([index], dropIndex, 'below');
+        }
     };
@@ -51,0 +110,0 @@ /**

src/treegrid/base/constant.d.ts

@@ -103,1 +103,17 @@ /**
 export declare const detailDataBound: string;
+/** @hidden */
+export declare const rowDrag: string;
+/** @hidden */
+export declare const rowDragStartHelper: string;
+/** @hidden */
+export declare const rowDrop: string;
+/** @hidden */
+export declare const rowDragStart: string;
+/** @hidden */
+export declare const rowsAdd: string;
+/** @hidden */
+export declare const rowsRemove: string;
+/** @hidden */
+export declare const rowdraging: string;
+/** @hidden */
+export declare const rowDropped: string;

src/treegrid/base/constant.js

@@ -103,1 +103,17 @@ /**
 export var detailDataBound = 'detailDataBound';
+/** @hidden */
+export var rowDrag = 'rowDrag';
+/** @hidden */
+export var rowDragStartHelper = 'rowDragStartHelper';
+/** @hidden */
+export var rowDrop = 'rowDrop';
+/** @hidden */
+export var rowDragStart = 'rowDragStart';
+/** @hidden */
+export var rowsAdd = 'rows-add';
+/** @hidden */
+export var rowsRemove = 'rows-remove';
+/** @hidden */
+export var rowdraging = 'row-draging';
+/** @hidden */
+export var rowDropped = 'row-dropped';

src/treegrid/base/data.js

@@ -1,2 +0,2 @@
-import { extend, isNullOrUndefined, setValue, getValue } from '@syncfusion/ej2-base';
+import { extend, isNullOrUndefined, setValue, getValue, isBlazor, addClass, removeClass } from '@syncfusion/ej2-base';
 import { DataManager, Query, DataUtil } from '@syncfusion/ej2-data';
@@ -62,3 +62,3 @@ import { showSpinner, hideSpinner } from '@syncfusion/ej2-popups';
         return true;
-        // let gridData: DataManager = <DataManager>this.parent.dataSource;
+        // let gridData:  DataManager = <DataManager>this.parent.dataSource;
         // return gridData.dataSource.offline !== true && gridData.dataSource.url !== undefined;
@@ -72,3 +72,4 @@ };
         var _this = this;
-        this.parent.flatData = (Object.keys(data).length === 0 ? this.parent.dataSource : []);
+        this.parent.flatData = (Object.keys(data).length === 0 && !(this.parent.dataSource instanceof DataManager) ?
+            this.parent.dataSource : []);
         this.parent.parentData = [];
@@ -82,7 +83,4 @@ var adaptorName = 'adaptorName';
                 if (this.parent.parentIdMapping) {
-                    this.parent.query.where(this.parent.parentIdMapping, 'equal', null);
-                    var key = !this.parent.query.params.length ? [] : this.parent.query.params.filter(function (e) {
-                        return e.key === 'IdMapping';
-                    });
-                    if (!key.length) {
+                    if (this.parent.initialRender) {
+                        this.parent.query.where(this.parent.parentIdMapping, 'equal', null);
                         this.parent.query.addParams('IdMapping', this.parent.idMapping);
@@ -119,3 +117,3 @@ }
                 var tempData = data[i];
-                this.hierarchyData.push(extend({}, tempData, true));
+                this.hierarchyData.push(extend({}, tempData));
                 if (!isNullOrUndefined(tempData[this.parent.idMapping])) {
@@ -144,3 +142,3 @@ this.taskIds.push(tempData[this.parent.idMapping]);
             if (!Object.keys(this.hierarchyData).length) {
-                this.parent.flatData = (this.parent.dataSource);
+                this.parent.flatData = (!(this.parent.dataSource instanceof DataManager) ? this.parent.dataSource : []);
             }
@@ -188,3 +186,4 @@ else {
         var adaptorName = 'adaptorName';
-        if (!this.parent.hasChildMapping && !this.parentItems.length && !(this.parent.dataSource[adaptorName] === 'BlazorAdaptor')) {
+        if (!this.parent.hasChildMapping && !this.parentItems.length &&
+            (!(this.parent.dataSource[adaptorName] === 'BlazorAdaptor') && !this.parent.loadChildOnDemand)) {
             this.zerothLevelData = args;
@@ -194,3 +193,3 @@ setValue('cancel', true, args);
         else {
-            if (!(this.parent.dataSource[adaptorName] === 'BlazorAdaptor')) {
+            if (!(this.parent.dataSource[adaptorName] === 'BlazorAdaptor') && !this.parent.loadChildOnDemand) {
                 for (var rec = 0; rec < records.length; rec++) {
@@ -209,3 +208,3 @@ if ((records[rec][this.parent.hasChildMapping] || this.parentItems.indexOf(records[rec][this.parent.idMapping]) !== -1)
         }
-        args.result = this.parent.dataSource[adaptorName] === 'BlazorAdaptor' ? this.parent.flatData : records;
+        args.result = this.parent.dataSource[adaptorName] === 'BlazorAdaptor' || this.parent.loadChildOnDemand ? this.parent.flatData : records;
         this.parent.notify('updateResults', args);
@@ -219,12 +218,32 @@ };
         var _this = this;
+        var gridRows = this.parent.getRows();
+        var adaptorName = 'adaptorName';
         var args = { row: rowDetails.parentRow, data: rowDetails.record };
         if (rowDetails.rows.length > 0) {
             rowDetails.record.expanded = true;
-            for (var i = 0; i < rowDetails.rows.length; i++) {
+            var _loop_1 = function (i) {
                 rowDetails.rows[i].style.display = 'table-row';
-                if (!isNullOrUndefined(rowDetails.detailrows[i])) {
-                    rowDetails.detailrows[i].style.display = 'table-row';
+                if ((isBlazor() && this_1.parent.dataSource[adaptorName] === 'BlazorAdaptor') || !this_1.parent.loadChildOnDemand) {
+                    var targetEle = rowDetails.rows[i].getElementsByClassName('e-treegridcollapse')[0];
+                    if (!isNullOrUndefined(targetEle)) {
+                        addClass([targetEle], 'e-treegridexpand');
+                        removeClass([targetEle], 'e-treegridcollapse');
+                    }
+                    var childRecord_1 = this_1.parent.grid.getRowObjectFromUID(rowDetails.rows[i].getAttribute('data-Uid')).data;
+                    var childRows = gridRows.filter(function (r) {
+                        return r.classList.contains('e-gridrowindex' + childRecord_1.index + 'level' + (childRecord_1.level + 1));
+                    });
+                    if (childRows.length) {
+                        this_1.collectExpandingRecs({ record: childRecord_1, rows: childRows, parentRow: rowDetails.parentRow });
+                    }
                 }
+                var expandingTd = rowDetails.rows[i].querySelector('.e-detailrowcollapse');
+                if (!isNullOrUndefined(expandingTd)) {
+                    this_1.parent.grid.detailRowModule.expand(expandingTd);
+                }
+            };
+            var this_1 = this;
+            for (var i = 0; i < rowDetails.rows.length; i++) {
+                _loop_1(i);
             }
-            this.parent.trigger(events.expanded, args);
         }
@@ -244,2 +263,3 @@ else {
                 var result = e.result;
+                rowDetails.record.childRecords = result;
                 for (var r = 0; r < result.length; r++) {
@@ -249,2 +269,3 @@ result[r].level = rowDetails.record.level + 1;
                     result[r].parentItem = rowDetails.record;
+                    delete result[r].parentItem.childRecords;
                     if ((result[r][_this.parent.hasChildMapping] || _this.parentItems.indexOf(result[r][_this.parent.idMapping]) !== -1)
@@ -254,2 +275,4 @@ && !(haveChild && !haveChild[r])) {
                         result[r].expanded = false;
+                        result[r].uniqueID = getUid(_this.parent.element.id + '_data_');
+                        setValue('uniqueIDCollection.' + result[r].uniqueID, result[r], _this.parent);
                     }
@@ -272,4 +295,6 @@ datas.splice(inx + r + 1, 0, result[r]);
     DataManipulation.prototype.createRecords = function (data, parentRecords) {
+        var treeGridData = [];
         for (var i = 0, len = Object.keys(data).length; i < len; i++) {
-            var currentData = data[i];
+            var currentData = extend({}, data[i]);
+            currentData.taskData = data[i];
             var level = 0;
@@ -279,3 +304,2 @@ this.storedIndex++;
             if (!isNullOrUndefined(currentData[this.parent.childMapping])) {
-                currentData.childRecords = currentData[this.parent.childMapping];
                 currentData.hasChildRecords = true;
@@ -300,2 +324,5 @@ if (this.parent.enableCollapseAll) {
                 delete parentData[this.parent.childMapping];
+                if (this.isSelfReference) {
+                    delete parentData.taskData[this.parent.childMapping];
+                }
                 currentData.parentItem = parentData;
@@ -314,5 +341,8 @@ currentData.parentUniqueID = parentData.uniqueID;
             if (!isNullOrUndefined(currentData[this.parent.childMapping] && currentData[this.parent.childMapping].length)) {
-                this.createRecords(currentData[this.parent.childMapping], currentData);
+                var record = this.createRecords(currentData[this.parent.childMapping], currentData);
+                currentData.childRecords = record;
             }
+            treeGridData.push(currentData);
         }
+        return treeGridData;
     };
@@ -327,2 +357,3 @@ /**
         var exportType = getObject('exportType', args);
+        var isPrinting = getObject('isPrinting', args);
         var dataObj;
@@ -424,3 +455,3 @@ var actionArgs = getObject('actionArgs', args);
         count = results.length;
-        var temp = this.paging(results, count, isExport, exportType, args);
+        var temp = this.paging(results, count, isExport, isPrinting, exportType, args);
         results = temp.result;
@@ -432,4 +463,6 @@ count = temp.count;
     };
-    DataManipulation.prototype.paging = function (results, count, isExport, exportType, args) {
-        if (this.parent.allowPaging && (!isExport || exportType === 'CurrentPage')) {
+    /* tslint:disable */
+    DataManipulation.prototype.paging = function (results, count, isExport, isPrinting, exportType, args) {
+        if (this.parent.allowPaging && (!isExport || exportType === 'CurrentPage')
+            && (!isPrinting || this.parent.printMode === 'CurrentPage')) {
             this.parent.notify(events.pagingActions, { result: results, count: count });
@@ -436,0 +469,0 @@ results = this.dataResults.result;

src/treegrid/base/index.d.ts

@@ -11,1 +11,2 @@ /**
 export * from '../actions/resize';
+export * from '../actions/rowdragdrop';

src/treegrid/base/index.js

@@ -9,1 +9,2 @@ /**
 export * from '../actions/resize';
+export * from '../actions/rowdragdrop';

src/treegrid/base/interface.d.ts

@@ -59,2 +59,6 @@ import { Column } from '../models/column';
     isSummaryRow?: boolean;
+    /**
+     * Specifies the main data
+     */
+    taskData?: ITreeData;
 }
@@ -68,3 +72,6 @@ /**
 export interface RowExpandedEventArgs {
-    /** Defines the parent row data. */
+    /**
+     * Defines the parent row data.
+     * @isGenericType true
+     */
     data?: Object;
@@ -75,3 +82,6 @@ /** Defines the parent row element. */
 export interface RowExpandingEventArgs {
-    /** Defines the parent row data. */
+    /**
+     * Defines the parent row data.
+     * @isGenericType true
+     */
     data?: Object;
@@ -84,3 +94,6 @@ /** Defines the parent row element. */
 export interface RowCollapsedEventArgs {
-    /** Defines the parent row data. */
+    /**
+     * Defines the parent row data.
+     * @isGenericType true
+     */
     data?: Object;
@@ -91,3 +104,6 @@ /** Defines the parent row element. */
 export interface RowCollapsingEventArgs {
-    /** Defines the parent row data. */
+    /**
+     * Defines the parent row data.
+     * @isGenericType true
+     */
     data?: Object;
@@ -94,0 +110,0 @@ /** Defines the parent row element. */

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

@@ -1,2 +0,2 @@
-import { Component, addClass, createElement, EventHandler, isNullOrUndefined, Ajax, ModuleDeclaration, extend} from '@syncfusion/ej2-base';import { removeClass, EmitType, Complex, Collection, KeyboardEventArgs, resetBlazorTemplate } from '@syncfusion/ej2-base';import {Event, Property, NotifyPropertyChanges, INotifyPropertyChanged, setValue, KeyboardEvents, L10n } from '@syncfusion/ej2-base';import { Column, ColumnModel } from '../models/column';import { GridModel, ColumnQueryModeType, HeaderCellInfoEventArgs, EditSettingsModel as GridEditModel } from '@syncfusion/ej2-grids';import { DetailDataBoundEventArgs, Row}  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 {Filter} from '../actions/filter';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 { 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, 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 { TextWrapSettings, TextWrapSettingsModel, 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 } from '@syncfusion/ej2-data';import { createSpinner, hideSpinner, showSpinner } from '@syncfusion/ej2-popups';import { isRemoteData, isOffline } from '../utils';import { Grid, QueryCellInfoEventArgs } from '@syncfusion/ej2-grids';import { Render } from '../renderer/render';import { DataManipulation } from './data';import { Sort } from '../actions/sort';import { ITreeData, RowExpandedEventArgs, RowExpandingEventArgs, RowCollapsedEventArgs, RowCollapsingEventArgs } from './interface';import { CellSaveEventArgs } from './interface';import { iterateArrayOrObject, GridLine } from '@syncfusion/ej2-grids';import { DataSourceChangedEventArgs, DataStateChangeEventArgs, RecordDoubleClickEventArgs, ResizeArgs } from '@syncfusion/ej2-grids';import { ToolbarItems, ToolbarItem, ContextMenuItem, ContextMenuItems, RowPosition } 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 { Component, addClass, createElement, EventHandler, isNullOrUndefined, Ajax, ModuleDeclaration, extend} from '@syncfusion/ej2-base';import { removeClass, EmitType, Complex, Collection, KeyboardEventArgs, isBlazor, getElement } from '@syncfusion/ej2-base';import {Event, Property, NotifyPropertyChanges, INotifyPropertyChanged, setValue, KeyboardEvents, L10n } from '@syncfusion/ej2-base';import { Column, ColumnModel } from '../models/column';import { GridModel, ColumnQueryModeType, HeaderCellInfoEventArgs, EditSettingsModel as GridEditModel } from '@syncfusion/ej2-grids';import {RowDragEventArgs, RowDropEventArgs, RowDropSettingsModel, RowDropSettings } from '@syncfusion/ej2-grids';import { ActionEventArgs } from'@syncfusion/ej2-grids';import { DetailDataBoundEventArgs, Row}  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 {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 { 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, 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 } from '@syncfusion/ej2-popups';import { isRemoteData, isOffline, extendArray } from '../utils';import { Grid, QueryCellInfoEventArgs } from '@syncfusion/ej2-grids';import { Render } from '../renderer/render';import { DataManipulation } from './data';import { RowDD } from '../actions/rowdragdrop';import { Sort } from '../actions/sort';import { ITreeData, RowExpandedEventArgs, RowExpandingEventArgs, RowCollapsedEventArgs, RowCollapsingEventArgs } from './interface';import { CellSaveEventArgs } from './interface';import { iterateArrayOrObject, GridLine } from '@syncfusion/ej2-grids';import { DataSourceChangedEventArgs, DataStateChangeEventArgs, RecordDoubleClickEventArgs, ResizeArgs } from '@syncfusion/ej2-grids';import { ToolbarItems, ToolbarItem, ContextMenuItem, ContextMenuItems, RowPosition } 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 {ComponentModel} from '@syncfusion/ej2-base';
@@ -59,4 +59,11 @@
     /**
+   * Specifies the mapping property path for the expand status of a record in data source
+   * @default false
+   */
+    allowRowDragAndDrop?: boolean;
+
+    /**
    * It is used to render TreeGrid table rows.
    * @default []
+   * @isGenericType true
    * @isDataSource true
@@ -85,2 +92,3 @@ */
   * @aspType Syncfusion.EJ2.Grids.PrintMode
+  * @blazorType Syncfusion.EJ2.Blazor.Grids.PrintMode
   */
@@ -96,2 +104,8 @@ printMode?: PrintMode;
     /**
+   * If `loadChildOnDemand` is enabled, parent records are render in expanded state.
+   * @default false
+   */
+    loadChildOnDemand?: boolean;
+
+    /**
  * If `allowTextWrap` set to true,  
@@ -136,2 +150,7 @@ * then text content will wrap to the next line when its text content exceeds the width of the Column Cells.
     /**
+ * Configures the row drop settings of the TreeGrid.
+ */
+    rowDropSettings?: RowDropSettingsModel;
+
+    /**
  * @hidden
@@ -245,2 +264,3 @@ * It used to render pager template
    * @aspType Syncfusion.EJ2.Grids.GridLine
+   * @blazorType Syncfusion.EJ2.Blazor.Grids.GridLine
    */
@@ -395,3 +415,4 @@ gridLines?: GridLine;
    * @event
-   * @deprecated
+   * @blazorproperty 'OnCellSave'
+   * @blazorType Syncfusion.EJ2.Blazor.Grids.CellSaveArgs<TValue>
    */
@@ -403,3 +424,4 @@ cellSave?: EmitType<CellSaveArgs>;
    * @event
-   * @deprecated
+   * @blazorproperty 'OnActionBegin'
+   * @blazorType Syncfusion.EJ2.Blazor.Grids.ActionEventArgs<TValue>
    */
@@ -411,3 +433,4 @@ actionBegin?: EmitType<PageEventArgs | FilterEventArgs | SortEventArgs | SearchEventArgs | AddEventArgs | SaveEventArgs | EditEventArgs | DeleteEventArgs>;
    * @event
-   * @deprecated
+   * @blazorproperty 'OnActionComplete'
+   * @blazorType Syncfusion.EJ2.Blazor.Grids.ActionEventArgs<TValue>
    */
@@ -420,3 +443,4 @@
    * @event
-   * @deprecated
+   * @blazorproperty 'OnBeginEdit'
+   * @blazorType Syncfusion.EJ2.Blazor.Grids.BeginEditArgs<TValue>
    */
@@ -428,3 +452,4 @@ beginEdit?: EmitType<BeginEditArgs>;
    * @event
-   * @deprecated
+   * @blazorproperty 'OnCellEdit'
+   * @blazorType Syncfusion.EJ2.Blazor.Grids.CellEditArgs<TValue>
    */
@@ -436,3 +461,4 @@ cellEdit?: EmitType<CellEditArgs>;
    * @event
-   * @deprecated
+   * @blazorproperty 'OnActionFailure'
+   * @blazorType Syncfusion.EJ2.Blazor.Grids.FailureEventArgs
    */
@@ -454,2 +480,3 @@ actionFailure?: EmitType<FailureEventArgs>;
    * @blazorProperty 'dataSourceUpdated'
+   * @blazorType Syncfusion.EJ2.Blazor.Grids.DataSourceChangedEventArgs
    */
@@ -463,2 +490,3 @@ dataSourceChanged?: EmitType<DataSourceChangedEventArgs>;
    * @deprecated
+   * @blazorType Syncfusion.EJ2.Blazor.Grids.DataStateChangeEventArgs
    */
@@ -470,3 +498,4 @@ dataStateChange?: EmitType<DataStateChangeEventArgs>;
    * @event
-   * @deprecated
+   * @blazorproperty 'OnRecordDoubleClick'
+   * @blazorType Syncfusion.EJ2.Blazor.Grids.RecordDoubleClickEventArgs<TValue>
    */
@@ -479,3 +508,4 @@ recordDoubleClick?: EmitType<RecordDoubleClickEventArgs>;
    * @event
-   * @deprecated
+   * @blazorproperty 'RowDataBound'
+   * @blazorType Syncfusion.EJ2.Blazor.Grids.RowDataBoundEventArgs<TValue>
    */
@@ -487,4 +517,5 @@ rowDataBound?: EmitType<RowDataBoundEventArgs>;
    * > This event triggers at initial expand.  
-   * @event 
-   * @deprecated
+   * @event
+   * @blazorproperty 'DetailDataBound'
+   * @blazorType Syncfusion.EJ2.Blazor.Grids.DetailDataBoundEventArgs<TValue>
    */
@@ -497,3 +528,4 @@ detailDataBound?: EmitType<DetailDataBoundEventArgs>;
    * @event
-   * @deprecated
+   * @blazorproperty 'QueryCellInfo'
+   * @blazorType Syncfusion.EJ2.Blazor.Grids.QueryCellInfoEventArgs<TValue>
    */
@@ -511,3 +543,4 @@ queryCellInfo?: EmitType<QueryCellInfoEventArgs>;
      * @event
-     * @deprecated
+     * @blazorproperty 'RowSelecting'
+     * @blazorType Syncfusion.EJ2.Blazor.Grids.RowSelectingEventArgs<TValue>
      */
@@ -519,3 +552,4 @@ rowSelecting?: EmitType<RowSelectingEventArgs>;
      * @event
-     * @deprecated
+     * @blazorproperty 'RowSelected'
+     * @blazorType Syncfusion.EJ2.Blazor.Grids.RowSelectEventArgs<TValue>
      */
@@ -528,2 +562,3 @@ rowSelected?: EmitType<RowSelectEventArgs>;
      * @deprecated
+     * @blazorType Syncfusion.EJ2.Blazor.Grids.RowDeselectEventArgs<TValue>
      */
@@ -535,3 +570,4 @@ rowDeselecting?: EmitType<RowDeselectEventArgs>;
      * @event
-     * @deprecated
+     * @blazorproperty 'RowDeselected'
+     * @blazorType Syncfusion.EJ2.Blazor.Grids.RowDeselectEventArgs<TValue>
      */
@@ -542,3 +578,5 @@ rowDeselected?: EmitType<RowDeselectEventArgs>;
      * Triggered for stacked header.
-     * @event 
+     * @event
+     * @blazorproperty 'HeaderCellInfo'
+     * @blazorType Syncfusion.EJ2.Blazor.Grids.HeaderCellInfoEventArgs 
      */
@@ -549,4 +587,5 @@ headerCellInfo?: EmitType<HeaderCellInfoEventArgs>;
        * Triggers before any cell selection occurs.
-       * @event 
-       * @deprecated
+       * @event
+       * @blazorproperty 'CellSelecting'
+       * @blazorType Syncfusion.EJ2.Blazor.Grids.CellSelectingEventArgs<TValue>
        */
@@ -559,2 +598,3 @@ cellSelecting?: EmitType<CellSelectingEventArgs>;
      * @deprecated
+     * @blazorType Syncfusion.EJ2.Blazor.Grids.ColumnMenuOpenEventArgs
      */
@@ -566,3 +606,4 @@ columnMenuOpen?: EmitType<ColumnMenuOpenEventArgs>;
      * @event
-     * @deprecated
+     * @blazorproperty 'ColumnMenuItemClicked'
+     * @blazorType Syncfusion.EJ2.Blazor.Navigations.MenuEventArgs
      */
@@ -574,3 +615,4 @@ columnMenuClick?: EmitType<MenuEventArgs>;
      * @event 
-     * @deprecated
+     * @blazorproperty 'CellSelected'
+     * @blazorType Syncfusion.EJ2.Blazor.Grids.CellSelectEventArgs<TValue>
      */
@@ -583,2 +625,3 @@ cellSelected?: EmitType<CellSelectEventArgs>;
      * @deprecated
+     * @blazorType Syncfusion.EJ2.Blazor.Grids.CellDeselectEventArgs
      */
@@ -591,2 +634,3 @@ cellDeselecting?: EmitType<CellDeselectEventArgs>;
    * @deprecated
+   * @blazorType Syncfusion.EJ2.Blazor.Grids.CellDeselectEventArgs
    */
@@ -620,2 +664,3 @@ cellDeselected?: EmitType<CellDeselectEventArgs>;
    * @deprecated
+   * @blazorType Syncfusion.EJ2.Blazor.Grids.ColumnDragEventArgs
    */
@@ -628,2 +673,3 @@ columnDragStart?: EmitType<ColumnDragEventArgs>;
    * @deprecated
+   * @blazorType Syncfusion.EJ2.Blazor.Grids.ColumnDragEventArgs
    */
@@ -636,2 +682,3 @@ columnDrag?: EmitType<ColumnDragEventArgs>;
   * @deprecated
+  * @blazorType Syncfusion.EJ2.Blazor.Grids.ColumnDragEventArgs
   */
@@ -651,2 +698,3 @@ columnDrop?: EmitType<ColumnDragEventArgs>;
   * @deprecated
+  * @blazorType Syncfusion.EJ2.Blazor.Grids.PrintEventArgs
   */
@@ -659,2 +707,3 @@ printComplete?: EmitType<PrintEventArgs>;
   * @deprecated
+  * @blazorType Syncfusion.EJ2.Blazor.Grids.PrintEventArgs
   */
@@ -666,3 +715,4 @@ beforePrint?: EmitType<PrintEventArgs>;
    * @event
-   * @deprecated
+   * @blazorproperty 'OnToolbarClick'
+   * @blazorType Syncfusion.EJ2.Blazor.Navigations.ClickEventArgs
    */
@@ -674,3 +724,4 @@ toolbarClick?: EmitType<ClickEventArgs>;
    * @event 
-   * @deprecated
+   * @blazorproperty 'OnDataBound'
+   * @blazorType Syncfusion.EJ2.Blazor.Grids.BeforeDataBoundArgs<TValue>
    */
@@ -683,2 +734,3 @@ beforeDataBound?: EmitType<BeforeDataBoundArgs>;
    * @deprecated
+   * @blazorType Syncfusion.EJ2.Blazor.Navigations.BeforeOpenCloseMenuEventArgs
    */
@@ -690,3 +742,4 @@ contextMenuOpen?: EmitType<BeforeOpenCloseMenuEventArgs>;
    * @event
-   * @deprecated
+   * @blazorproperty 'ContextMenuItemClicked'
+   * @blazorType Syncfusion.EJ2.Blazor.Navigations.MenuEventArgs
    */
@@ -696,2 +749,27 @@ contextMenuClick?: EmitType<MenuEventArgs>;
     /**
+   * Triggers when row elements are dragged (moved) continuously.
+   * @event
+   * @deprecated
+   */
+    rowDrag?: EmitType<RowDragEventArgs>;
+
+    /**
+   * Triggers when row element’s drag(move) starts.
+   * @event
+   */
+    rowDragStart?: EmitType<RowDragEventArgs>;
+
+    /**
+   * Triggers when row element’s before drag(move).
+   * @event
+   */
+    rowDragStartHelper?: EmitType<RowDragEventArgs>;
+
+    /**
+   * Triggers when row elements are dropped on the target row.
+   * @event
+   */
+    rowDrop?: EmitType<RowDragEventArgs>;
+
+    /**
    * The `selectedRowIndex` allows you to select a row at initial rendering. 
@@ -730,2 +808,3 @@ * You can also get the currently selected row index.
      * @deprecated
+     * @blazorType Syncfusion.EJ2.Blazor.Grids.PdfQueryCellInfoEventArgs
      */
@@ -739,2 +818,3 @@ pdfQueryCellInfo?: EmitType<PdfQueryCellInfoEventArgs>;
  * @deprecated
+ * @blazorType Syncfusion.EJ2.Blazor.Grids.PdfHeaderQueryCellInfoEventArgs
  */
@@ -748,2 +828,3 @@ pdfHeaderQueryCellInfo?: EmitType<PdfHeaderQueryCellInfoEventArgs>;
  * @deprecated
+ * @blazorType Syncfusion.EJ2.Blazor.Grids.ExcelQueryCellInfoEventArgs
  */
@@ -757,2 +838,3 @@ excelQueryCellInfo?: EmitType<ExcelQueryCellInfoEventArgs>;
  * @deprecated
+ * @blazorType Syncfusion.EJ2.Blazor.Grids.ExcelHeaderQueryCellInfoEventArgs
  */
@@ -764,2 +846,3 @@ excelHeaderQueryCellInfo?: EmitType<ExcelHeaderQueryCellInfoEventArgs>;
  * @event
+ * @blazorproperty 'OnExcelExport'
  */
@@ -772,2 +855,3 @@ beforeExcelExport?: EmitType<Object>;
  * @deprecated
+ * @blazorType Syncfusion.EJ2.Blazor.Grids.ExcelExportCompleteArgs
  */
@@ -779,2 +863,3 @@ excelExportComplete?: EmitType<ExcelExportCompleteArgs>;
  * @event
+ * @blazorproperty 'OnPdfExport'
  */
@@ -787,2 +872,3 @@ beforePdfExport?: EmitType<Object>;
  * @deprecated
+ * @blazorType Syncfusion.EJ2.Blazor.Grids.PdfExportCompleteArgs
  */
@@ -789,0 +875,0 @@ pdfExportComplete?: EmitType<PdfExportCompleteArgs>;

src/treegrid/base/treegrid.d.ts

@@ -6,5 +6,7 @@ import { Component, ModuleDeclaration } from '@syncfusion/ej2-base';
 import { ColumnQueryModeType, HeaderCellInfoEventArgs } from '@syncfusion/ej2-grids';
+import { RowDragEventArgs, RowDropSettingsModel } from '@syncfusion/ej2-grids';
 import { DetailDataBoundEventArgs } from '@syncfusion/ej2-grids';
 import { SearchEventArgs, AddEventArgs, EditEventArgs, DeleteEventArgs } from '@syncfusion/ej2-grids';
 import { SaveEventArgs, CellSaveArgs, BeginEditArgs, CellEditArgs } from '@syncfusion/ej2-grids';
+import { TextWrapSettingsModel } from '../models/textwrap-settings-model';
 import { Filter } from '../actions/filter';
@@ -26,3 +28,3 @@ import { Aggregate } from '../actions/summary';
 import { SortDirection, ColumnDragEventArgs } from '@syncfusion/ej2-grids';
-import { TextWrapSettingsModel, PrintMode, Data, ContextMenuItemModel } from '@syncfusion/ej2-grids';
+import { PrintMode, Data, ContextMenuItemModel } from '@syncfusion/ej2-grids';
 import { ColumnMenuItem, ColumnMenuItemModel, CheckBoxChangeEventArgs } from '@syncfusion/ej2-grids';
@@ -38,2 +40,3 @@ import { ExcelExportCompleteArgs, ExcelHeaderQueryCellInfoEventArgs, ExcelQueryCellInfoEventArgs } from '@syncfusion/ej2-grids';
 import { DataManipulation } from './data';
+import { RowDD } from '../actions/rowdragdrop';
 import { Sort } from '../actions/sort';
@@ -106,2 +109,6 @@ import { RowExpandedEventArgs, RowExpandingEventArgs } from './interface';
     /**
+     * The `rowDragandDrop` is used to manipulate Row Reordering in TreeGrid.
+     */
+    rowDragAndDropModule: RowDD;
+    /**
      * The `contextMenuModule` is used to handle context menu items and its action in the TreeGrid.
@@ -179,4 +186,10 @@ */
     /**
+     * Specifies the mapping property path for the expand status of a record in data source
+     * @default false
+     */
+    allowRowDragAndDrop: boolean;
+    /**
      * It is used to render TreeGrid table rows.
      * @default []
+     * @isGenericType true
      * @isDataSource true
@@ -202,2 +215,3 @@ */
      * @aspType Syncfusion.EJ2.Grids.PrintMode
+     * @blazorType Syncfusion.EJ2.Blazor.Grids.PrintMode
      */
@@ -211,2 +225,7 @@ printMode: PrintMode;
     /**
+     * If `loadChildOnDemand` is enabled, parent records are render in expanded state.
+     * @default false
+     */
+    loadChildOnDemand: boolean;
+    /**
      * If `allowTextWrap` set to true,
@@ -245,2 +264,6 @@ * then text content will wrap to the next line when its text content exceeds the width of the Column Cells.
     /**
+     * Configures the row drop settings of the TreeGrid.
+     */
+    rowDropSettings: RowDropSettingsModel;
+    /**
      * @hidden
@@ -341,2 +364,3 @@ * It used to render pager template
      * @aspType Syncfusion.EJ2.Grids.GridLine
+     * @blazorType Syncfusion.EJ2.Blazor.Grids.GridLine
      */
@@ -473,3 +497,4 @@ gridLines: GridLine;
      * @event
-     * @deprecated
+     * @blazorproperty 'OnCellSave'
+     * @blazorType Syncfusion.EJ2.Blazor.Grids.CellSaveArgs<TValue>
      */
@@ -480,3 +505,4 @@ cellSave: EmitType<CellSaveArgs>;
      * @event
-     * @deprecated
+     * @blazorproperty 'OnActionBegin'
+     * @blazorType Syncfusion.EJ2.Blazor.Grids.ActionEventArgs<TValue>
      */
@@ -487,3 +513,4 @@ actionBegin: EmitType<PageEventArgs | FilterEventArgs | SortEventArgs | SearchEventArgs | AddEventArgs | SaveEventArgs | EditEventArgs | DeleteEventArgs>;
      * @event
-     * @deprecated
+     * @blazorproperty 'OnActionComplete'
+     * @blazorType Syncfusion.EJ2.Blazor.Grids.ActionEventArgs<TValue>
      */
@@ -494,3 +521,4 @@ actionComplete: EmitType<PageEventArgs | FilterEventArgs | SortEventArgs | SearchEventArgs | AddEventArgs | SaveEventArgs | EditEventArgs | DeleteEventArgs | CellSaveEventArgs>;
      * @event
-     * @deprecated
+     * @blazorproperty 'OnBeginEdit'
+     * @blazorType Syncfusion.EJ2.Blazor.Grids.BeginEditArgs<TValue>
      */
@@ -501,3 +529,4 @@ beginEdit: EmitType<BeginEditArgs>;
      * @event
-     * @deprecated
+     * @blazorproperty 'OnCellEdit'
+     * @blazorType Syncfusion.EJ2.Blazor.Grids.CellEditArgs<TValue>
      */
@@ -508,3 +537,4 @@ cellEdit: EmitType<CellEditArgs>;
      * @event
-     * @deprecated
+     * @blazorproperty 'OnActionFailure'
+     * @blazorType Syncfusion.EJ2.Blazor.Grids.FailureEventArgs
      */
@@ -524,2 +554,3 @@ actionFailure: EmitType<FailureEventArgs>;
      * @blazorProperty 'dataSourceUpdated'
+     * @blazorType Syncfusion.EJ2.Blazor.Grids.DataSourceChangedEventArgs
      */
@@ -532,2 +563,3 @@ dataSourceChanged: EmitType<DataSourceChangedEventArgs>;
      * @deprecated
+     * @blazorType Syncfusion.EJ2.Blazor.Grids.DataStateChangeEventArgs
      */
@@ -538,3 +570,4 @@ dataStateChange: EmitType<DataStateChangeEventArgs>;
      * @event
-     * @deprecated
+     * @blazorproperty 'OnRecordDoubleClick'
+     * @blazorType Syncfusion.EJ2.Blazor.Grids.RecordDoubleClickEventArgs<TValue>
      */
@@ -546,3 +579,4 @@ recordDoubleClick: EmitType<RecordDoubleClickEventArgs>;
      * @event
-     * @deprecated
+     * @blazorproperty 'RowDataBound'
+     * @blazorType Syncfusion.EJ2.Blazor.Grids.RowDataBoundEventArgs<TValue>
      */
@@ -554,3 +588,4 @@ rowDataBound: EmitType<RowDataBoundEventArgs>;
      * @event
-     * @deprecated
+     * @blazorproperty 'DetailDataBound'
+     * @blazorType Syncfusion.EJ2.Blazor.Grids.DetailDataBoundEventArgs<TValue>
      */
@@ -562,3 +597,4 @@ detailDataBound: EmitType<DetailDataBoundEventArgs>;
      * @event
-     * @deprecated
+     * @blazorproperty 'QueryCellInfo'
+     * @blazorType Syncfusion.EJ2.Blazor.Grids.QueryCellInfoEventArgs<TValue>
      */
@@ -574,3 +610,4 @@ queryCellInfo: EmitType<QueryCellInfoEventArgs>;
      * @event
-     * @deprecated
+     * @blazorproperty 'RowSelecting'
+     * @blazorType Syncfusion.EJ2.Blazor.Grids.RowSelectingEventArgs<TValue>
      */
@@ -581,3 +618,4 @@ rowSelecting: EmitType<RowSelectingEventArgs>;
      * @event
-     * @deprecated
+     * @blazorproperty 'RowSelected'
+     * @blazorType Syncfusion.EJ2.Blazor.Grids.RowSelectEventArgs<TValue>
      */
@@ -589,2 +627,3 @@ rowSelected: EmitType<RowSelectEventArgs>;
      * @deprecated
+     * @blazorType Syncfusion.EJ2.Blazor.Grids.RowDeselectEventArgs<TValue>
      */
@@ -595,3 +634,4 @@ rowDeselecting: EmitType<RowDeselectEventArgs>;
      * @event
-     * @deprecated
+     * @blazorproperty 'RowDeselected'
+     * @blazorType Syncfusion.EJ2.Blazor.Grids.RowDeselectEventArgs<TValue>
      */
@@ -602,2 +642,4 @@ rowDeselected: EmitType<RowDeselectEventArgs>;
      * @event
+     * @blazorproperty 'HeaderCellInfo'
+     * @blazorType Syncfusion.EJ2.Blazor.Grids.HeaderCellInfoEventArgs
      */
@@ -608,3 +650,4 @@ headerCellInfo: EmitType<HeaderCellInfoEventArgs>;
      * @event
-     * @deprecated
+     * @blazorproperty 'CellSelecting'
+     * @blazorType Syncfusion.EJ2.Blazor.Grids.CellSelectingEventArgs<TValue>
      */
@@ -616,2 +659,3 @@ cellSelecting: EmitType<CellSelectingEventArgs>;
      * @deprecated
+     * @blazorType Syncfusion.EJ2.Blazor.Grids.ColumnMenuOpenEventArgs
      */
@@ -622,3 +666,4 @@ columnMenuOpen: EmitType<ColumnMenuOpenEventArgs>;
      * @event
-     * @deprecated
+     * @blazorproperty 'ColumnMenuItemClicked'
+     * @blazorType Syncfusion.EJ2.Blazor.Navigations.MenuEventArgs
      */
@@ -629,3 +674,4 @@ columnMenuClick: EmitType<MenuEventArgs>;
      * @event
-     * @deprecated
+     * @blazorproperty 'CellSelected'
+     * @blazorType Syncfusion.EJ2.Blazor.Grids.CellSelectEventArgs<TValue>
      */
@@ -637,2 +683,3 @@ cellSelected: EmitType<CellSelectEventArgs>;
      * @deprecated
+     * @blazorType Syncfusion.EJ2.Blazor.Grids.CellDeselectEventArgs
      */
@@ -644,2 +691,3 @@ cellDeselecting: EmitType<CellDeselectEventArgs>;
      * @deprecated
+     * @blazorType Syncfusion.EJ2.Blazor.Grids.CellDeselectEventArgs
      */
@@ -669,2 +717,3 @@ cellDeselected: EmitType<CellDeselectEventArgs>;
      * @deprecated
+     * @blazorType Syncfusion.EJ2.Blazor.Grids.ColumnDragEventArgs
      */
@@ -676,2 +725,3 @@ columnDragStart: EmitType<ColumnDragEventArgs>;
      * @deprecated
+     * @blazorType Syncfusion.EJ2.Blazor.Grids.ColumnDragEventArgs
      */
@@ -683,2 +733,3 @@ columnDrag: EmitType<ColumnDragEventArgs>;
      * @deprecated
+     * @blazorType Syncfusion.EJ2.Blazor.Grids.ColumnDragEventArgs
      */
@@ -696,2 +747,3 @@ columnDrop: EmitType<ColumnDragEventArgs>;
      * @deprecated
+     * @blazorType Syncfusion.EJ2.Blazor.Grids.PrintEventArgs
      */
@@ -703,2 +755,3 @@ printComplete: EmitType<PrintEventArgs>;
      * @deprecated
+     * @blazorType Syncfusion.EJ2.Blazor.Grids.PrintEventArgs
      */
@@ -709,3 +762,4 @@ beforePrint: EmitType<PrintEventArgs>;
      * @event
-     * @deprecated
+     * @blazorproperty 'OnToolbarClick'
+     * @blazorType Syncfusion.EJ2.Blazor.Navigations.ClickEventArgs
      */
@@ -716,3 +770,4 @@ toolbarClick: EmitType<ClickEventArgs>;
      * @event
-     * @deprecated
+     * @blazorproperty 'OnDataBound'
+     * @blazorType Syncfusion.EJ2.Blazor.Grids.BeforeDataBoundArgs<TValue>
      */
@@ -724,2 +779,3 @@ beforeDataBound: EmitType<BeforeDataBoundArgs>;
      * @deprecated
+     * @blazorType Syncfusion.EJ2.Blazor.Navigations.BeforeOpenCloseMenuEventArgs
      */
@@ -730,3 +786,4 @@ contextMenuOpen: EmitType<BeforeOpenCloseMenuEventArgs>;
      * @event
-     * @deprecated
+     * @blazorproperty 'ContextMenuItemClicked'
+     * @blazorType Syncfusion.EJ2.Blazor.Navigations.MenuEventArgs
      */
@@ -739,3 +796,19 @@ contextMenuClick: EmitType<MenuEventArgs>;
      */
+    rowDrag: EmitType<RowDragEventArgs>;
     /**
+     * Triggers when row element’s drag(move) starts.
+     * @event
+     */
+    rowDragStart: EmitType<RowDragEventArgs>;
+    /**
+     * Triggers when row element’s before drag(move).
+     * @event
+     */
+    rowDragStartHelper: EmitType<RowDragEventArgs>;
+    /**
+     * Triggers when row elements are dropped on the target row.
+     * @event
+     */
+    rowDrop: EmitType<RowDragEventArgs>;
+    /**
      * The `selectedRowIndex` allows you to select a row at initial rendering.
@@ -770,2 +843,3 @@ * You can also get the currently selected row index.
      * @deprecated
+     * @blazorType Syncfusion.EJ2.Blazor.Grids.PdfQueryCellInfoEventArgs
      */
@@ -778,2 +852,3 @@ pdfQueryCellInfo: EmitType<PdfQueryCellInfoEventArgs>;
      * @deprecated
+     * @blazorType Syncfusion.EJ2.Blazor.Grids.PdfHeaderQueryCellInfoEventArgs
      */
@@ -786,2 +861,3 @@ pdfHeaderQueryCellInfo: EmitType<PdfHeaderQueryCellInfoEventArgs>;
      * @deprecated
+     * @blazorType Syncfusion.EJ2.Blazor.Grids.ExcelQueryCellInfoEventArgs
      */
@@ -794,2 +870,3 @@ excelQueryCellInfo: EmitType<ExcelQueryCellInfoEventArgs>;
      * @deprecated
+     * @blazorType Syncfusion.EJ2.Blazor.Grids.ExcelHeaderQueryCellInfoEventArgs
      */
@@ -800,2 +877,3 @@ excelHeaderQueryCellInfo: EmitType<ExcelHeaderQueryCellInfoEventArgs>;
      * @event
+     * @blazorproperty 'OnExcelExport'
      */
@@ -807,2 +885,3 @@ beforeExcelExport: EmitType<Object>;
      * @deprecated
+     * @blazorType Syncfusion.EJ2.Blazor.Grids.ExcelExportCompleteArgs
      */
@@ -813,2 +892,3 @@ excelExportComplete: EmitType<ExcelExportCompleteArgs>;
      * @event
+     * @blazorproperty 'OnPdfExport'
      */
@@ -820,2 +900,3 @@ beforePdfExport: EmitType<Object>;
      * @deprecated
+     * @blazorType Syncfusion.EJ2.Blazor.Grids.PdfExportCompleteArgs
      */
@@ -946,3 +1027,6 @@ pdfExportComplete: EmitType<PdfExportCompleteArgs>;
     private bindGridEvents;
+    private bindCallBackEvents;
     private extendedGridEditEvents;
+    private updateRowTemplate;
+    private bindedDataSource;
     private extendedGridEvents;
@@ -1186,3 +1270,3 @@ /**
      * @return {Object[]}
-     * @hidden
+     * @isGenericType true
      */
@@ -1238,3 +1322,3 @@ getCurrentViewRecords(): Object[];
      * @return {Object[]}
-     * @hidden
+     * @isGenericType true
      */
@@ -1276,3 +1360,2 @@ getCheckedRecords(): Object[];
     collapseRow(row: HTMLTableRowElement, record?: Object): void;
-    private resetTemplates;
     /**
@@ -1383,2 +1466,3 @@ * Expands the records at specific hierarchical level
      * Gets the collection of selected records.
+     * @isGenericType true
      * @return {Object[]}
@@ -1396,2 +1480,6 @@ */
     /**
+     * Reorder the rows based on given indexes and position
+     */
+    reorderRows(fromIndexes: number[], toIndex: number, position: string): void;
+    /**
      * The `toolbarModule` is used to manipulate ToolBar items and its action in the TreeGrid.
@@ -1398,0 +1486,0 @@ */

src/treegrid/enum.d.ts

@@ -162,1 +162,14 @@ /**
 'Menu';
+/**
+ * Defines the wrap mode.
+ * * 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';

src/treegrid/models/column.d.ts

@@ -100,2 +100,9 @@ import { TextAlign, ClipMode, ValueAccessor, IFilter, IFilterUI, IEditCell, CommandModel } from '@syncfusion/ej2-grids';
     /**
+     * Defines the filter template/UI that used as filter for a particular column.
+     * It accepts either template string or HTML element ID.
+     * @default null
+     * @aspIgnore
+     */
+    filterTemplate: string;
+    /**
      * If `isIdentity` is set to true, then this column is considered as identity column.
@@ -151,2 +158,3 @@ * @default false
      * @aspType string
+     * @blazorType string
      */
@@ -312,2 +320,3 @@ format: string | NumberFormatOptions | DateFormatOptions;
      * @aspType Syncfusion.EJ2.Grids.TextAlign
+     * @blazorType Syncfusion.EJ2.Blazor.Grids.TextAlign
      */
@@ -329,2 +338,3 @@ textAlign?: TextAlign;
      * @aspType Syncfusion.EJ2.Grids.ClipMode
+     * @blazorType Syncfusion.EJ2.Blazor.Grids.ClipMode
      */
@@ -336,4 +346,6 @@ clipMode?: ClipMode;
      * @aspDefaultValueIgnore
+     * @blazorDefaultValueIgnore
      * @isEnumeration true
      * @aspType Syncfusion.EJ2.Grids.TextAlign
+     * @blazorType Syncfusion.EJ2.Blazor.Grids.TextAlign
      */
@@ -387,2 +399,3 @@ headerTextAlign?: TextAlign;
      * @aspType string
+     * @blazorType string
      */
@@ -550,2 +563,8 @@ format?: string | NumberFormatOptions | DateFormatOptions;
     /**
+     * Defines the filter template/UI that is used as filter for a particular column.
+     * It accepts either template string or HTML element ID.
+     * @aspIgnore
+     */
+    filterTemplate?: string;
+    /**
      * If `isIdentity` is set to true, then this column is considered as identity column.
@@ -552,0 +571,0 @@ * @default false

src/treegrid/models/filter-settings-model.d.ts

@@ -29,2 +29,3 @@ import { Collection, Property, ChildProperty } from '@syncfusion/ej2-base';import { ICustomOptr, FilterBarMode, FilterType, PredicateModel, Predicate } from '@syncfusion/ej2-grids';import { FilterHierarchyMode } from '../enum';
      * @aspType Syncfusion.EJ2.Grids.FilterBarMode
+     * @blazorType Syncfusion.EJ2.Blazor.Grids.FilterBarMode
      */
@@ -31,0 +32,0 @@ mode?: FilterBarMode;

src/treegrid/models/filter-settings.d.ts

@@ -27,2 +27,3 @@ import { ChildProperty } from '@syncfusion/ej2-base';
      * @aspType Syncfusion.EJ2.Grids.FilterBarMode
+     * @blazorType Syncfusion.EJ2.Blazor.Grids.FilterBarMode
      */
@@ -29,0 +30,0 @@ mode: FilterBarMode;

src/treegrid/models/selection-settings-model.d.ts

@@ -13,2 +13,3 @@ import { Property, ChildProperty } from '@syncfusion/ej2-base';import { SelectionMode, CellSelectionMode, SelectionType, CheckboxSelectionType } from '@syncfusion/ej2-grids';
      * @aspType Syncfusion.EJ2.Grids.SelectionMode
+     * @blazorType Syncfusion.EJ2.Blazor.Grids.SelectionMode
      */
@@ -25,2 +26,3 @@ mode?: SelectionMode;
      * @aspType Syncfusion.EJ2.Grids.CellSelectionMode
+     * @blazorType Syncfusion.EJ2.Blazor.Grids.CellSelectionMode
      */
@@ -36,2 +38,3 @@ cellSelectionMode?: CellSelectionMode;
      * @aspType Syncfusion.EJ2.Grids.SelectionType
+     * @blazorType Syncfusion.EJ2.Blazor.Grids.SelectionType
      */
@@ -38,0 +41,0 @@ type?: SelectionType;

src/treegrid/models/selection-settings.d.ts

@@ -12,2 +12,3 @@ import { ChildProperty } from '@syncfusion/ej2-base';
      * @aspType Syncfusion.EJ2.Grids.SelectionMode
+     * @blazorType Syncfusion.EJ2.Blazor.Grids.SelectionMode
      */
@@ -23,2 +24,3 @@ mode: SelectionMode;
      * @aspType Syncfusion.EJ2.Grids.CellSelectionMode
+     * @blazorType Syncfusion.EJ2.Blazor.Grids.CellSelectionMode
      */
@@ -33,2 +35,3 @@ cellSelectionMode: CellSelectionMode;
      * @aspType Syncfusion.EJ2.Grids.SelectionType
+     * @blazorType Syncfusion.EJ2.Blazor.Grids.SelectionType
      */
@@ -35,0 +38,0 @@ type: SelectionType;

src/treegrid/models/sort-settings-model.d.ts

@@ -18,3 +18,5 @@ import { ChildProperty, Property, Collection } from '@syncfusion/ej2-base';import { SortDirection } from '@syncfusion/ej2-grids';
      * @isEnumeration true
+     * @blazorDefaultValueIgnore
      * @aspType Syncfusion.EJ2.Grids.SortDirection
+     * @blazorType Syncfusion.EJ2.Blazor.Grids.SortDirection
      */
@@ -21,0 +23,0 @@ direction?: SortDirection;

src/treegrid/models/sort-settings.d.ts

@@ -17,3 +17,5 @@ import { ChildProperty } from '@syncfusion/ej2-base';
      * @isEnumeration true
+     * @blazorDefaultValueIgnore
      * @aspType Syncfusion.EJ2.Grids.SortDirection
+     * @blazorType Syncfusion.EJ2.Blazor.Grids.SortDirection
      */
@@ -20,0 +22,0 @@ direction: SortDirection;

src/treegrid/models/summary-model.d.ts

@@ -47,2 +47,3 @@ import { Property, ChildProperty, Collection, getEnumValue, compile, DateFormatOptions, NumberFormatOptions } from '@syncfusion/ej2-base';import { Internationalization } from '@syncfusion/ej2-base';import { CustomSummaryType, AggregateType, CellType } from '@syncfusion/ej2-grids';
    * @aspType string
+   * @blazorType string
    * @default null    
@@ -49,0 +50,0 @@ */

src/treegrid/models/summary.d.ts

@@ -47,2 +47,3 @@ import { ChildProperty, DateFormatOptions, NumberFormatOptions } from '@syncfusion/ej2-base';
      * @aspType string
+     * @blazorType string
      * @default null
@@ -49,0 +50,0 @@ */

src/treegrid/renderer/render.d.ts

@@ -22,4 +22,5 @@ import { TreeGrid } from '..';
     cellRender(args: QueryCellInfoEventArgs): void;
+    private updateTreeCell;
     private columnTemplateResult;
     destroy(): void;
 }

src/treegrid/renderer/render.js

@@ -145,12 +145,4 @@ import { getObject, appendChildren } from '@syncfusion/ej2-grids';
             }
-            var textContent = args.cell.querySelector('.e-treecell') != null ?
-                args.cell.querySelector('.e-treecell').innerHTML : args.cell.innerHTML;
-            cellElement.innerHTML = textContent;
-            if (typeof (args.column.template) === 'object' && this.templateResult) {
-                cellElement.innerHTML = '';
-                appendChildren(cellElement, this.templateResult);
-                this.templateResult = null;
-            }
+            this.updateTreeCell(args, cellElement, container);
             container.appendChild(cellElement);
-            args.cell.innerHTML = '';
             args.cell.appendChild(container);
@@ -177,2 +169,21 @@ }
     };
+    Render.prototype.updateTreeCell = function (args, cellElement, container) {
+        var textContent = args.cell.querySelector('.e-treecell') != null ?
+            args.cell.querySelector('.e-treecell').innerHTML : args.cell.innerHTML;
+        if (typeof (args.column.template) === 'object' && this.templateResult) {
+            appendChildren(cellElement, this.templateResult);
+            this.templateResult = null;
+            args.cell.innerHTML = '';
+        }
+        else if (args.cell.classList.contains('e-templatecell')) {
+            var len = args.cell.children.length;
+            for (var i = 0; i < len; len = args.cell.children.length) {
+                cellElement.appendChild(args.cell.children[i]);
+            }
+        }
+        else {
+            cellElement.innerHTML = textContent;
+            args.cell.innerHTML = '';
+        }
+    };
     Render.prototype.columnTemplateResult = function (args) {
@@ -179,0 +190,0 @@ this.templateResult = args.template;

src/treegrid/utils.js

@@ -76,7 +76,9 @@ import { getObject } from '@syncfusion/ej2-grids';
     }
-    var childRecords = records.childRecords;
-    for (var i = 0, len = Object.keys(childRecords).length; i < len; i++) {
-        datas.push(childRecords[i]);
-        if (childRecords[i].hasChildRecords) {
-            datas = datas.concat(findChildrenRecords(childRecords[i]));
+    if (!isNullOrUndefined(records.childRecords)) {
+        var childRecords = records.childRecords;
+        for (var i = 0, len = Object.keys(childRecords).length; i < len; i++) {
+            datas.push(childRecords[i]);
+            if (childRecords[i].hasChildRecords) {
+                datas = datas.concat(findChildrenRecords(childRecords[i]));
+            }
         }
@@ -83,0 +85,0 @@ }

No alert changes

Improved metrics

Total package byte prevSize

3938769

increased by23.58%

Number of package files

166

increased by3.11%

Lines of code

35316

increased by22.36%

Dependency changes

• + Added@syncfusion/ej2-base@17.2.29-beta(transitive)

• + Added@syncfusion/ej2-buttons@17.2.29-beta(transitive)

• + Added@syncfusion/ej2-calendars@17.2.29-beta(transitive)

• + Added@syncfusion/ej2-compression@17.2.29-beta(transitive)

• + Added@syncfusion/ej2-data@17.2.29-beta(transitive)

• + Added@syncfusion/ej2-dropdowns@17.2.29-beta(transitive)

• + Added@syncfusion/ej2-excel-export@17.2.29-beta(transitive)

• + Added@syncfusion/ej2-file-utils@17.2.29-beta(transitive)

• + Added@syncfusion/ej2-grids@17.2.29-beta(transitive)

• + Added@syncfusion/ej2-icons@17.2.29-beta(transitive)

• + Added@syncfusion/ej2-inputs@17.2.29-beta(transitive)

• + Added@syncfusion/ej2-lists@17.2.29-beta(transitive)

• + Added@syncfusion/ej2-navigations@17.2.29-beta(transitive)

• + Added@syncfusion/ej2-pdf-export@17.2.29-beta(transitive)

• + Added@syncfusion/ej2-popups@17.2.29-beta(transitive)

• + Added@syncfusion/ej2-splitbuttons@17.2.29-beta(transitive)

• - Removed@syncfusion/ej2-base@17.2.49(transitive)

• - Removed@syncfusion/ej2-buttons@17.2.47(transitive)

• - Removed@syncfusion/ej2-calendars@17.2.49(transitive)

• - Removed@syncfusion/ej2-compression@17.2.47(transitive)

• - Removed@syncfusion/ej2-data@17.2.47(transitive)

• - Removed@syncfusion/ej2-dropdowns@17.2.49(transitive)

• - Removed@syncfusion/ej2-excel-export@17.2.47(transitive)

• - Removed@syncfusion/ej2-file-utils@17.2.47(transitive)

• - Removed@syncfusion/ej2-grids@17.2.51(transitive)

• - Removed@syncfusion/ej2-icons@17.2.47(transitive)

• - Removed@syncfusion/ej2-inputs@17.2.52(transitive)

• - Removed@syncfusion/ej2-lists@17.2.47(transitive)

• - Removed@syncfusion/ej2-navigations@17.2.49(transitive)

• - Removed@syncfusion/ej2-pdf-export@17.2.47(transitive)

• - Removed@syncfusion/ej2-popups@17.2.47(transitive)

• - Removed@syncfusion/ej2-splitbuttons@17.2.47(transitive)

• Updated@syncfusion/ej2-base@17.2.29-beta

• Updated@syncfusion/ej2-data@17.2.29-beta

• Updated@syncfusion/ej2-grids@17.2.29-beta

• Updated@syncfusion/ej2-popups@17.2.29-beta