@syncfusion/ej2-treegrid 19.4.56 → 20.1.51

package/dist/es6/ej2-treegrid.es2015.js

@@ -1,4 +1,4 @@
-import { Browser, ChildProperty, Collection, Complex, Component, Event, EventHandler, Internationalization, KeyboardEvents, L10n, NotifyPropertyChanges, Property, addClass, classList, closest, compile, createElement, debounce, extend, getEnumValue, getValue, isNullOrUndefined, merge, remove, removeClass, select, setValue } from '@syncfusion/ej2-base';
+import { Browser, ChildProperty, Collection, Complex, Component, Event, EventHandler, Internationalization, KeyboardEvents, L10n, NotifyPropertyChanges, Property, addClass, classList, closest, compile, createElement, debounce, extend, getEnumValue, getValue, isNullOrUndefined, merge, remove, removeClass, select, setStyleAttribute, setValue } from '@syncfusion/ej2-base';
 import { Aggregate, Cell, CellRenderer, CellType, Clipboard, ColumnChooser, ColumnMenu, CommandColumn, ContextMenu, DetailRow, Edit, ExcelExport, Filter, Freeze, Grid, InfiniteScroll, InterSectionObserver, Logger, Page, PdfExport, Print, RenderType, Reorder, Resize, RowDD, RowDropSettings, RowRenderer, Scroll, Sort, Toolbar, VirtualContentRenderer, VirtualHeaderRenderer, VirtualRowModelGenerator, VirtualScroll, appendChildren, calculateAggregate, detailLists, extend as extend$1, getActualProperties, getObject, getUid, iterateArrayOrObject, parentsUntil, resetRowIndex, templateCompiler } from '@syncfusion/ej2-grids';
 import { createCheckBox } from '@syncfusion/ej2-buttons';
 import { CacheAdaptor, DataManager, DataUtil, Deferred, JsonAdaptor, ODataAdaptor, Predicate, Query, RemoteSaveAdaptor, UrlAdaptor, WebApiAdaptor, WebMethodAdaptor } from '@syncfusion/ej2-data';
@@ -77,12 +77,12 @@ class Column {
         merge(this, options);
     }
     /**
-     * Update the State changes reflected for TreeGrid columndirective in react platform.
-     *
-     * @param {Column} column - specifies the column
-     * @returns {void}
-     * @hidden
-     */
+    * Update the State changes reflected for TreeGrid columndirective in react platform.
+    *
+    * @param {Column} column - specifies the column
+    * @returns {void}
+    * @hidden
+    */
     setProperties(column) {
         //Angular two way binding
         const keys = Object.keys(column);
@@ -91,7 +91,7 @@ class Column {
             //Refresh the react columnTemplates on state change
             if (this.parent && this.parent['isReact'] && keys[i] === 'template') {
                 const refreshReactColumnTemplateByUid = 'refreshReactColumnTemplateByUid';
-                this.parent.clipboardModule['treeGridParent'][refreshReactColumnTemplateByUid](this.uid);
+                this.parent.clipboardModule['treeGridParent'].renderModule[refreshReactColumnTemplateByUid](this.uid);
             }
         }
     }
@@ -1658,6 +1658,31 @@ class Render {
             args.cell.innerHTML = '';
         }
     }
+    /**
+    * @param {string} columnUid - Defines column uid
+    * @returns {void}
+    * @hidden
+    */
+    refreshReactColumnTemplateByUid(columnUid) {
+        if (this.parent.isReact) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            this.parent.clearTemplate(['columnTemplate'], undefined, () => {
+                const cells = 'cells';
+                const rowIdx = 'index';
+                const rowsObj = this.parent.grid.getRowsObject();
+                const indent = this.parent.grid.getIndentCount();
+                const cellIndex = this.parent.grid.getNormalizedColumnIndex(columnUid);
+                for (let j = 0; j < rowsObj.length; j++) {
+                    if (rowsObj[j].isDataRow && !isNullOrUndefined(rowsObj[j].index)) {
+                        const cell = rowsObj[j][cells][cellIndex];
+                        const cellRenderer = new CellRenderer(this.parent.grid, this.parent.grid.serviceLocator);
+                        const td = this.parent.getCellFromIndex(rowsObj[j].index, cellIndex - indent);
+                        cellRenderer.refreshTD(td, cell, rowsObj[j].data, { index: rowsObj[j][rowIdx] });
+                    }
+                }
+            });
+        }
+    }
     columnTemplateResult(args) {
         this.templateResult = args.template;
     }
@@ -2586,7 +2611,9 @@ function editAction(details, control, isSelfReference, addRowIndex, selectedInde
                                 const childRecords = parentData ? parentData[control.childMapping] : [];
                                 for (let p = childRecords.length - 1; p >= 0; p--) {
                                     if (childRecords[p][control.idMapping] === currentData[control.idMapping]) {
-                                        parentData['childRecords'].splice(p, 1);
+                                        if (!control.enableImmutableMode) {
+                                            parentData['childRecords'].splice(p, 1);
+                                        }
                                         childRecords.splice(p, 1);
                                         if (!childRecords.length) {
                                             parentData.hasChildRecords = false;
@@ -2879,7 +2906,12 @@ function updateParentRow(key, record, action, control, isSelfReference, child) {
         control.grid.setRowData(key, record);
         let row = control.getRowByIndex(index);
         if (control.editSettings.mode === 'Batch') {
-            row = control.getRows()[control.grid.getRowIndexByPrimaryKey(record[key])];
+            if (action === 'add') {
+                row = control.getRows()[control.grid.getCurrentViewRecords().indexOf(record)];
+            }
+            else {
+                row = control.getRows()[control.grid.getRowIndexByPrimaryKey(record[key])];
+            }
         }
         let movableRow;
         if (control.frozenRows || control.getFrozenColumns()) {
@@ -2952,6 +2984,8 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
         this.changedRecords = 'changedRecords';
         this.deletedRecords = 'deletedRecords';
         this.addedRecords = 'addedRecords';
+        this.indentOutdentAction = 'indentOutdentAction';
+        this.modifiedRecords = [];
         this.objectEqualityChecker = (old, current) => {
             if (old) {
                 const keys = Object.keys(old);
@@ -3358,7 +3392,14 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
         return modules;
     }
     extendRequiredModules(modules) {
-        if (this.allowRowDragAndDrop) {
+        const IsRowDDInjected = this.injectedModules.filter((e) => {
+            return e.name === 'RowDD';
+        });
+        if (this.allowRowDragAndDrop || IsRowDDInjected.length) {
+            if ((!isNullOrUndefined(this.toolbar) && (this.toolbar['includes']('Indent') ||
+                this.toolbar['includes']('Outdent')))) {
+                this.isIndentEnabled = true;
+            }
             modules.push({
                 member: 'rowDragAndDrop',
                 args: [this]
@@ -3482,7 +3523,12 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
             }
             return modules;
         };
+        const root = 'root';
+        this.grid[root] = this[root] ? this[root] : this;
         this.grid.appendTo(gridContainer);
+        if (this.isIndentEnabled) {
+            this.refreshToolbarItems();
+        }
         this.wireEvents();
         this.renderComplete();
         const destroyTemplate = 'destroyTemplate';
@@ -3496,6 +3542,15 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
             }
         };
     }
+    refreshToolbarItems() {
+        const toolbarElement = this.toolbarModule.getToolbar();
+        const indentID = this.element.id + '_gridcontrol_indent';
+        const outdentID = this.element.id + '_gridcontrol_outdent';
+        const indentElement = toolbarElement.querySelector('#' + indentID).parentElement;
+        const outdentElement = toolbarElement.querySelector('#' + outdentID).parentElement;
+        indentElement.classList.add('e-hidden');
+        outdentElement.classList.add('e-hidden');
+    }
     afterGridRender() {
         if (!isNullOrUndefined(this.grid.clipboardModule)) {
             this.grid.clipboardModule.destroy();
@@ -3969,14 +4024,24 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
             }
             if (this.action === 'indenting' || this.action === 'outdenting') {
                 this.action = this.action === 'indenting' ? 'indented' : 'outdented';
+                const selectedItem = [this.selectedRecords];
                 const actionArgs = {
+                    data: selectedItem,
+                    dropIndex: this.dropIndex,
+                    dropPosition: this.dropPosition,
+                    modifiedRecords: this.modifiedRecords,
                     requestType: this.action,
-                    data: this.selectedRecords,
                     row: this.selectedRows
                 };
                 this.trigger(actionComplete, actionArgs);
+                const currentPageItem = this.getCurrentViewRecords().filter((e) => {
+                    return e.uniqueID === selectedItem[0].uniqueID;
+                });
+                if (!currentPageItem.length) {
+                    this.refreshToolbarItems();
+                }
                 this.action = '';
-                this.selectedRecords = this.selectedRows = [];
+                this.selectedRecords = this.selectedRows = this.modifiedRecords = [];
             }
             else {
                 this.trigger(actionComplete, args);
@@ -4178,7 +4243,7 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
                     case ToolbarItem.RowIndent:
                         tooltipText = this.l10n.getConstant('RowIndent');
                         items.push({
-                            text: tooltipText, tooltipText: tooltipText, disabled: true,
+                            text: tooltipText, tooltipText: tooltipText,
                             prefixIcon: 'e-indent', id: this.element.id + '_gridcontrol_indent'
                         });
                         break;
@@ -4186,7 +4251,7 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
                     case ToolbarItem.RowOutdent:
                         tooltipText = this.l10n.getConstant('RowOutdent');
                         items.push({
-                            text: tooltipText, tooltipText: tooltipText, disabled: true,
+                            text: tooltipText, tooltipText: tooltipText,
                             prefixIcon: 'e-outdent', id: this.element.id + '_gridcontrol_outdent'
                         });
                         break;
@@ -4236,6 +4301,15 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
                 this.columnModel.push(new Column(treeGridColumn));
             }
             gridColumnCollection.push(gridColumn);
+            if (!isNullOrUndefined(this.columnModel[this.treeColumnIndex]) && this.enableRtl) {
+                if (gridColumn.field === this.columnModel[this.treeColumnIndex].field) {
+                    if (isNullOrUndefined(this.treeColumnTextAlign)) {
+                        this.treeColumnTextAlign = this.columnModel[this.treeColumnIndex].textAlign;
+                        this.treeColumnField = this.columnModel[this.treeColumnIndex].field;
+                    }
+                    gridColumn.textAlign = 'Right';
+                }
+            }
         }
         return gridColumnCollection;
     }
@@ -4407,6 +4481,9 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
                     this.grid.allowPdfExport = this.allowPdfExport;
                     break;
                 case 'enableRtl':
+                    if (!isNullOrUndefined(this.treeColumnField)) {
+                        this.updateTreeColumnTextAlign();
+                    }
                     this.grid.enableRtl = this.enableRtl;
                     break;
                 case 'allowReordering':
@@ -4447,6 +4524,11 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
             }
         }
     }
+    updateTreeColumnTextAlign() {
+        const gridColumn = this.grid.getColumnByField(this.treeColumnField);
+        gridColumn.textAlign = this.enableRtl ? 'Right' : this.treeColumnTextAlign;
+        this.grid.refreshColumns();
+    }
     /**
      * Destroys the component (detaches/removes all event handlers, attributes, classes, and empties the component element).
      *
@@ -4784,10 +4866,13 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
         rowData.parentUniqueID = record.parentUniqueID;
         rowData.expanded = record.expanded;
         this.grid.setRowData(key, rowData);
-        const table = this.getContentTable();
-        const sHeight = table.scrollHeight;
-        const clientHeight = this.getContent().clientHeight;
-        this.lastRowBorder(this.getRows()[record.index], sHeight <= clientHeight);
+        const visibleRecords = this.getVisibleRecords();
+        if (visibleRecords.length > 0 && key === (visibleRecords[visibleRecords.length - 1])[primaryKey]) {
+            const table = this.getContentTable();
+            const sHeight = table.scrollHeight;
+            const clientHeight = this.getContent().clientHeight;
+            this.lastRowBorder(this.getRows()[currentRecords.indexOf(record)], sHeight <= clientHeight);
+        }
     }
     /**
      * Navigates to the specified target page.
@@ -4996,31 +5081,6 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
         this[merge$$1] = undefined; // Workaround for blazor updateModel
         return this.columnModel;
     }
-    /**
-     * @param {string} columnUid - Defines column uid
-     * @returns {void}
-     * @hidden
-     */
-    refreshReactColumnTemplateByUid(columnUid) {
-        if (this.isReact) {
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            this.clearTemplate(['columnTemplate'], undefined, () => {
-                const cells = 'cells';
-                const rowIdx = 'index';
-                const rowsObj = this.grid.getRowsObject();
-                const indent = this.grid.getIndentCount();
-                const cellIndex = this.grid.getNormalizedColumnIndex(columnUid);
-                for (let j = 0; j < rowsObj.length; j++) {
-                    if (rowsObj[j].isDataRow && !isNullOrUndefined(rowsObj[j].index)) {
-                        const cell = rowsObj[j][cells][cellIndex];
-                        const cellRenderer = new CellRenderer(this.grid, this.grid.serviceLocator);
-                        const td = this.getCellFromIndex(rowsObj[j].index, cellIndex - indent);
-                        cellRenderer.refreshTD(td, cell, rowsObj[j].data, { index: rowsObj[j][rowIdx] });
-                    }
-                }
-            });
-        }
-    }
     /**
      * Gets the content div of the TreeGrid.
      *
@@ -5165,8 +5225,14 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
         this.uniqueIDCollection = {};
         this.convertTreeData(this.dataSource);
         if (!isCountRequired(this)) {
-            this.grid.dataSource = !(this.dataSource instanceof DataManager) ? this.flatData :
-                new DataManager(this.dataSource.dataSource, this.dataSource.defaultQuery, this.dataSource.adaptor);
+            if (!(this.dataSource instanceof DataManager)) {
+                this.grid.dataSource = this.flatData;
+            }
+            else {
+                this.grid.setProperties({
+                    dataSource: new DataManager(this.dataSource.dataSource, this.dataSource.defaultQuery, this.dataSource.adaptor)
+                }, true);
+            }
         }
         this.grid.refresh();
     }
@@ -5309,6 +5375,9 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
                 if (!(isRemoteData(this) && !isOffline(this)) && (!isCountRequired(this) || !isNullOrUndefined(record[children]))) {
                     const collapseArgs = { data: record, row: row };
                     this.setHeightForFrozenContent();
+                    if (!isNullOrUndefined(this.expandStateMapping)) {
+                        this.updateExpandStateMapping(collapseArgs.data, true);
+                    }
                     this.trigger(expanded, collapseArgs);
                 }
             }
@@ -5370,6 +5439,9 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
                 const collapseArgs = { data: record, row: row };
                 if (!isRemoteData(this)) {
                     this.setHeightForFrozenContent();
+                    if (!isNullOrUndefined(this.expandStateMapping)) {
+                        this.updateExpandStateMapping(collapseArgs.data, false);
+                    }
                     this.trigger(collapsed, collapseArgs);
                     if (this.enableInfiniteScrolling) {
                         const scrollHeight = this.grid.getContent().firstElementChild.scrollHeight;
@@ -5382,6 +5454,19 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
             }
         });
     }
+    updateExpandStateMapping(record, state) {
+        const totalRecords = record;
+        if (totalRecords.length) {
+            for (let i = 0; i < totalRecords.length; i++) {
+                totalRecords[i][this.expandStateMapping] = state;
+                editAction({ value: totalRecords[i], action: 'edit' }, this, this.isSelfReference, totalRecords[i].index, this.grid.selectedRowIndex, this.expandStateMapping);
+            }
+        }
+        else {
+            record[this.expandStateMapping] = state;
+            editAction({ value: record, action: 'edit' }, this, this.isSelfReference, record.index, this.grid.selectedRowIndex, this.expandStateMapping);
+        }
+    }
     /**
      * Expands the records at specific hierarchical level
      *
@@ -5807,7 +5892,7 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
                 freezeRightRows[i].style.display = displayAction;
             }
             this.notify('childRowExpand', { row: rows[i] });
-            if (!isNullOrUndefined(childRecords[i].childRecords) && (action !== 'expand' ||
+            if ((!isNullOrUndefined(childRecords[i].childRecords) && childRecords[i].childRecords.length > 0) && (action !== 'expand' ||
                 isNullOrUndefined(childRecords[i].expanded) || childRecords[i].expanded)) {
                 this.expandCollapse(action, rows[i], childRecords[i], true);
                 if (this.frozenColumns <= this.treeColumnIndex && !isNullOrUndefined(movableRows)) {
@@ -5902,6 +5987,28 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
             }
         }
     }
+    /**
+     * Updates the rows and cells
+     *
+     * @param {Object[]} records - Updates the given records
+     * @param {HTMLTableRowElement[]} rows - Updates the given rows
+     * @param {number} index -  Updates the given cell index
+     * @returns {void}
+     */
+    updateRowAndCellElements(records, rows, index) {
+        for (let i = 0; i < records.length; i++) {
+            this.renderModule.cellRender({
+                data: records[i], cell: rows[i].cells[index],
+                column: this.grid.getColumns()[this.treeColumnIndex],
+                requestType: 'rowDragAndDrop'
+            });
+            if (this['action'] === 'indenting' || this['action'] === 'outdenting') {
+                this.renderModule.RowModifier({
+                    data: records[i], row: rows[i]
+                });
+            }
+        }
+    }
     /**
      * @hidden
      * @returns {void}
@@ -6255,6 +6362,30 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
     reorderRows(fromIndexes, toIndex, position) {
         this.rowDragAndDropModule.reorderRows(fromIndexes, toIndex, position);
     }
+    /**
+     * Indents the record to one level of hierarchy. Moves the selected row as the last child of its previous row.
+     *
+     * @param {Object} record – specifies the record to do indented
+     * @returns {void}
+     */
+    indent(record) {
+        if (!isNullOrUndefined(this.rowDragAndDropModule)) {
+            record = record;
+            this.rowDragAndDropModule[this.indentOutdentAction](record, 'indent');
+        }
+    }
+    /**
+     * Outdent the record to one level of hierarchy. Moves the selected row as sibling to its parent row.
+     *
+     * @param {Object} record – specifies the record to do outdented
+     * @returns {void}
+     */
+    outdent(record) {
+        if (!isNullOrUndefined(this.rowDragAndDropModule)) {
+            record = record;
+            this.rowDragAndDropModule[this.indentOutdentAction](record, 'outdent');
+        }
+    }
 };
 __decorate([
     Property(0)
@@ -6769,6 +6900,14 @@ class RowDD$1 {
         /** @hidden */
         this.isDraggedWithChild = false;
         /** @hidden */
+        this.modifiedRecords = 'modifiedRecords';
+        /** @hidden */
+        this.selectedRecords = 'selectedRecords';
+        /** @hidden */
+        this.selectedRows = 'selectedRows';
+        /** @hidden */
+        this.hasDropItem = true;
+        /** @hidden */
         this.isaddtoBottom = false;
         Grid.Inject(RowDD);
         this.parent = parent;
@@ -6808,6 +6947,8 @@ class RowDD$1 {
     reorderRows(fromIndexes, toIndex, position) {
         const tObj = this.parent;
         const action = 'action';
+        const dropPosition = 'dropPosition';
+        const updateRowAndCellElements = 'updateRowAndCellElements';
         if (fromIndexes[0] !== toIndex && ['above', 'below', 'child'].indexOf(position) !== -1) {
             if (position === 'above') {
                 this.dropPosition = 'topSegment';
@@ -6818,6 +6959,7 @@ class RowDD$1 {
             if (position === 'child') {
                 this.dropPosition = 'middleSegment';
             }
+            this.parent[dropPosition] = this.dropPosition;
             const data = [];
             for (let i = 0; i < fromIndexes.length; i++) {
                 data[i] = this.parent.getCurrentViewRecords()[fromIndexes[i]];
@@ -6841,7 +6983,13 @@ class RowDD$1 {
             }
             this.parent.grid.refresh();
             if (this.parent.enableImmutableMode && this.dropPosition === 'middleSegment') {
-                const index = this.parent.treeColumnIndex + 1;
+                let index;
+                if (this.parent.allowRowDragAndDrop) {
+                    index = this.parent.treeColumnIndex + 1;
+                }
+                else if (this.parent[action] === 'indenting') {
+                    index = this.parent.treeColumnIndex;
+                }
                 const row = this.parent.getRows()[fromIndexes[0]];
                 const dropData = args.data[0];
                 const totalRecord = [];
@@ -6853,31 +7001,116 @@ class RowDD$1 {
                 const parentrow = this.parent.getRows()[toIndex];
                 totalRecord.push(parentData);
                 rows.push(parentrow);
-                for (let i = 0; i < totalRecord.length; i++) {
-                    this.parent.renderModule.cellRender({
-                        data: totalRecord[i], cell: rows[i].cells[index],
-                        column: this.parent.grid.getColumns()[this.parent.treeColumnIndex],
-                        requestType: 'rowDragAndDrop'
-                    });
-                    if (this.parent[action] === 'indenting' || this.parent[action] === 'outdenting') {
-                        this.parent.renderModule.RowModifier({
-                            data: totalRecord[i], row: rows[i]
-                        });
-                    }
+                this.parent[updateRowAndCellElements](totalRecord, rows, index);
+            }
+            if (this.parent.enableImmutableMode && this.parent[action] === 'outdenting') {
+                let index;
+                if (this.parent.allowRowDragAndDrop) {
+                    index = this.parent.treeColumnIndex + 1;
+                }
+                else if (this.parent[action] === 'outdenting') {
+                    index = this.parent.treeColumnIndex;
                 }
+                const record = args.data[0];
+                const row = this.parent.getRows()[fromIndexes[0]];
+                const totalRecord = [];
+                const rows = [];
+                totalRecord.push(record);
+                rows.push(row);
+                this.parent[updateRowAndCellElements](totalRecord, rows, index);
             }
         }
         else {
             return;
         }
     }
+    indentOutdentAction(record, request) {
+        const tObj = this.parent;
+        const action = 'action';
+        const droppedIndex = 'dropIndex';
+        let selectedItemIndex = -1;
+        if (isNullOrUndefined(record) && this.parent.selectedRowIndex === -1) {
+            return;
+        }
+        else {
+            if (this.parent.enableVirtualization && this.parent.selectedRowIndex !== -1) {
+                selectedItemIndex = this.parent.getSelectedRows()[0].rowIndex;
+            }
+            else if (this.parent.selectedRowIndex !== -1) {
+                selectedItemIndex = this.parent.selectedRowIndex;
+            }
+            this.selectedItem = isNullOrUndefined(record) ?
+                tObj.getCurrentViewRecords()[selectedItemIndex] : record;
+            const primaryKeyField = this.parent.getPrimaryKeyFieldNames()[0];
+            const rowIndex = this.parent.grid.getRowIndexByPrimaryKey(this.selectedItem[primaryKeyField]);
+            this.selectedRow = this.parent[this.selectedRows] = selectedItemIndex !== -1 ?
+                this.parent.getSelectedRows()[0]
+                : this.parent.grid.getRowByIndex(rowIndex);
+            this.selectedRecord = this.parent[this.selectedRecords] = selectedItemIndex !== -1 ?
+                tObj.getCurrentViewRecords()[selectedItemIndex]
+                : this.selectedItem;
+            if (request === 'indent') {
+                const record = tObj.getCurrentViewRecords()[this.selectedRow.rowIndex - 1];
+                let dropIndex;
+                if (this.selectedRow.rowIndex === 0 || this.selectedRow.rowIndex === -1 ||
+                    tObj.getCurrentViewRecords()[this.selectedRow.rowIndex].level - record.level === 1) {
+                    return;
+                }
+                if (record.level > this.selectedRecord.level) {
+                    for (let i = 0; i < tObj.getCurrentViewRecords().length; i++) {
+                        if (tObj.getCurrentViewRecords()[i].taskData === record.parentItem.taskData) {
+                            dropIndex = i;
+                        }
+                    }
+                }
+                else {
+                    dropIndex = this.selectedRow.rowIndex - 1;
+                }
+                tObj[action] = 'indenting';
+                tObj[droppedIndex] = dropIndex;
+                this.eventTrigger('indenting', dropIndex);
+            }
+            else if (request === 'outdent') {
+                if (this.selectedRow.rowIndex === -1 || this.selectedRow.rowIndex === 0 ||
+                    tObj.getCurrentViewRecords()[this.selectedRow.rowIndex].level === 0) {
+                    return;
+                }
+                let dropIndex;
+                const parentItem = this.selectedRecord.parentItem;
+                for (let i = 0; i < tObj.getCurrentViewRecords().length; i++) {
+                    if (tObj.getCurrentViewRecords()[i].taskData === parentItem.taskData) {
+                        dropIndex = i;
+                    }
+                }
+                tObj[action] = 'outdenting';
+                tObj[droppedIndex] = dropIndex;
+                this.eventTrigger('outdenting', dropIndex);
+            }
+        }
+    }
+    eventTrigger(action, dropIndex) {
+        const actionArgs = {
+            action: action,
+            cancel: false,
+            data: [this.parent[this.selectedRecords]],
+            row: this.parent[this.selectedRows]
+        };
+        this.parent.trigger(actionBegin, actionArgs, (actionArgs) => {
+            if (!actionArgs.cancel) {
+                if (actionArgs.action === 'indenting') {
+                    this.reorderRows([this.selectedRow.rowIndex], dropIndex, 'child');
+                }
+                else if (actionArgs.action === 'outdenting') {
+                    this.reorderRows([this.selectedRow.rowIndex], dropIndex, 'below');
+                }
+            }
+        });
+    }
     orderToIndex(currentData) {
         for (let i = 0; i < currentData.length; i++) {
             currentData[i].index = i;
             if (!isNullOrUndefined(currentData[i].parentItem)) {
-                const updatedParent = currentData.filter((data) => {
-                    return data.uniqueID === currentData[i].parentUniqueID;
-                })[0];
+                const updatedParent = getValue('uniqueIDCollection.' + currentData[i].parentUniqueID, this.parent);
                 currentData[i].parentItem.index = updatedParent.index;
             }
         }
@@ -6938,7 +7171,8 @@ class RowDD$1 {
                         }
                     }
                 }
-                if (Object.prototype.hasOwnProperty.call(draggedRecord, tObj.parentIdMapping) && draggedRecord[tObj.parentIdMapping] != null
+                if (Object.prototype.hasOwnProperty.call(draggedRecord, tObj.parentIdMapping)
+                    && draggedRecord[tObj.parentIdMapping] !== null
                     && !this.isDraggedWithChild) {
                     draggedRecord.taskData[tObj.parentIdMapping] = null;
                     delete draggedRecord.parentItem;
@@ -7214,13 +7448,34 @@ class RowDD$1 {
             spanContent.innerHTML = content;
             dragelem.querySelector('.e-rowcell').appendChild(ele);
             dragelem.querySelector('.e-rowcell').appendChild(spanContent);
+            const dropItemSpan = document.querySelector('.e-dropitemscount');
+            if (this.hasDropItem && dropItemSpan) {
+                const dropItemLeft = parseInt(dropItemSpan.style.left, 10) + ele.offsetWidth + 16;
+                const spanLeft = !this.parent.enableRtl ? dropItemLeft : 0;
+                dropItemSpan.style.left = `${spanLeft}px`;
+                this.hasDropItem = false;
+            }
         }
     }
     removeErrorElem() {
         const errorelem = document.querySelector('.e-errorelem');
+        const errorValue = document.querySelector('.errorValue');
+        const dropItemSpan = document.querySelector('.e-dropitemscount');
         if (errorelem) {
+            if (dropItemSpan) {
+                const dropItemLeft = parseInt(dropItemSpan.style.left, 10) - errorelem.offsetWidth - 16;
+                setStyleAttribute(errorValue, {
+                    paddingLeft: '0px'
+                });
+                if (!this.parent.enableRtl) {
+                    setStyleAttribute(dropItemSpan, {
+                        left: `${dropItemLeft}px`
+                    });
+                }
+            }
             errorelem.remove();
         }
+        this.hasDropItem = true;
     }
     topOrBottomBorder(target) {
         let rowElement = [];
@@ -7409,7 +7664,7 @@ class RowDD$1 {
                 indexes[i] = records[i].index;
             }
             const data = srcControl.dataSource;
-            if (this.parent.idMapping != null && (isNullOrUndefined(this.dropPosition) || this.dropPosition === 'bottomSegment' || this.dropPosition === 'Invalid') && !(data.length)) {
+            if (this.parent.idMapping !== null && (isNullOrUndefined(this.dropPosition) || this.dropPosition === 'bottomSegment' || this.dropPosition === 'Invalid') && !(data.length)) {
                 const actualData = [];
                 for (let i = 0; i < records.length; i++) {
                     if (records[i].hasChildRecords) {
@@ -7457,14 +7712,25 @@ class RowDD$1 {
     getTargetIdx(targetRow) {
         return targetRow ? parseInt(targetRow.getAttribute('aria-rowindex'), 10) : 0;
     }
-    getParentData(record) {
+    getParentData(record, data) {
         const parentItem = record.parentItem;
+        let selectedItemIndex = -1;
+        if (this.parent.enableVirtualization && this.parent.selectedRowIndex !== -1) {
+            selectedItemIndex = this.parent.getSelectedRows()[0].rowIndex;
+        }
+        else if (this.parent.selectedRowIndex !== -1) {
+            selectedItemIndex = this.parent.selectedRowIndex;
+        }
         if (this.dropPosition === 'bottomSegment') {
-            const selectedRecord = this.parent.getSelectedRecords()[0];
+            const primaryKeyField = this.parent.getPrimaryKeyFieldNames()[0];
+            const rowIndex = selectedItemIndex === -1 ?
+                (this.parent.grid.getRowIndexByPrimaryKey(data[0][primaryKeyField])) - 1
+                : this.parent.getSelectedRowIndexes()[0] - 1;
+            const selectedRecord = this.parent.getCurrentViewRecords()[rowIndex];
             this.droppedRecord = getParentData(this.parent, selectedRecord.parentItem.uniqueID);
         }
         if (this.dropPosition === 'middleSegment') {
-            const level = this.parent.getSelectedRecords()[0].level;
+            const level = this.parent.getCurrentViewRecords()[selectedItemIndex].level;
             if (level === parentItem.level) {
                 this.droppedRecord = getParentData(this.parent, parentItem.uniqueID);
             }
@@ -7479,9 +7745,12 @@ class RowDD$1 {
             let draggedRecord;
             let droppedRecord;
             if (isNullOrUndefined(args.dropIndex)) {
-                const rowIndex = tObj.getSelectedRowIndexes()[0] - 1;
+                const primaryKeyField = this.parent.getPrimaryKeyFieldNames()[0];
+                const rowIndex = tObj.selectedRowIndex === -1 ?
+                    (this.parent.grid.getRowIndexByPrimaryKey(args.data[0][primaryKeyField])) - 1
+                    : tObj.getSelectedRowIndexes()[0] - 1;
                 const record = tObj.getCurrentViewRecords()[rowIndex];
-                this.getParentData(record);
+                this.getParentData(record, args.data);
             }
             else {
                 args.dropIndex = args.dropIndex === args.fromIndex ? this.getTargetIdx(args.target.parentElement) : args.dropIndex;
@@ -7495,6 +7764,7 @@ class RowDD$1 {
             else {
                 dragRecords = args.data;
             }
+            this.parent[this.modifiedRecords].push(args.data[0], droppedRecord);
             let count = 0;
             const multiplegrid = this.parent.rowDropSettings.targetID;
             this.isMultipleGrid = multiplegrid;
@@ -7548,6 +7818,7 @@ class RowDD$1 {
                         }
                         if (isNullOrUndefined(droppedRecord.parentItem)) {
                             delete draggedRecord.parentItem;
+                            delete draggedRecord.parentUniqueID;
                             draggedRecord.level = 0;
                             if (this.parent.parentIdMapping) {
                                 draggedRecord[this.parent.parentIdMapping] = null;
@@ -7758,7 +8029,7 @@ class RowDD$1 {
                 if (childRecords && childRecords.length > 0) {
                     childIndex = childRecords.indexOf(deletedRow);
                     flatParentData.childRecords.splice(childIndex, 1);
-                    if (!this.parent.parentIdMapping) {
+                    if (!this.parent.parentIdMapping || tObj.enableImmutableMode) {
                         editAction({ value: deletedRow, action: 'delete' }, this.parent, isSelfReference, deletedRow.index, deletedRow.index);
                     }
                 }
@@ -7812,6 +8083,19 @@ class RowDD$1 {
                 flatParentData.hasChildRecords = false;
                 flatParentData.hasFilteredChildRecords = false;
             }
+            if (this.parent[this.modifiedRecords].indexOf(flatParentData) === -1 && !isNullOrUndefined(flatParentData)) {
+                this.parent[this.modifiedRecords].push(flatParentData);
+            }
+            if (!isNullOrUndefined(flatParentData)) {
+                this.updateModifiedRecords(flatParentData);
+            }
+        }
+    }
+    updateModifiedRecords(record) {
+        const parentData = getParentData(this.parent, record.parentUniqueID);
+        if (!isNullOrUndefined(parentData)) {
+            this.parent[this.modifiedRecords].push(parentData);
+            this.updateModifiedRecords(parentData);
         }
     }
     removeChildItem(record) {
@@ -8180,6 +8464,9 @@ class Filter$1 {
                     }
                 }
                 else {
+                    if (parent['expanded'] === false && this.parent.getVisibleRecords().indexOf(record) === -1 && isNullOrUndefined(this.parent['dataResults']['action'])) {
+                        this.parent.expandRow(this.parent.getRows()[parent['index']], parent);
+                    }
                     this.addParentRecord(parent);
                 }
             }
@@ -8840,46 +9127,59 @@ class Toolbar$1 {
     }
     refreshToolbar(args) {
         const tObj = this.parent;
-        if (args.row.rowIndex === 0 || tObj.getSelectedRecords().length > 1) {
-            this.enableItems([tObj.element.id + '_gridcontrol_indent', tObj.element.id + '_gridcontrol_outdent'], false);
-        }
-        else if (args['name'] !== "rowDeselected") {
-            if (!isNullOrUndefined(tObj.getCurrentViewRecords()[args.row.rowIndex])) {
-                if (!isNullOrUndefined(tObj.getCurrentViewRecords()[args.row.rowIndex]) &&
-                    (tObj.getCurrentViewRecords()[args.row.rowIndex].level >
-                        tObj.getCurrentViewRecords()[args.row.rowIndex - 1].level)) {
-                    this.enableItems([tObj.element.id + '_gridcontrol_indent'], false);
-                }
-                else {
-                    this.enableItems([tObj.element.id + '_gridcontrol_indent'], true);
-                }
-                if (tObj.getCurrentViewRecords()[args.row.rowIndex].level ===
-                    tObj.getCurrentViewRecords()[args.row.rowIndex - 1].level) {
-                    this.enableItems([tObj.element.id + '_gridcontrol_indent'], true);
+        let indentElement;
+        let outdentElement;
+        const indentID = tObj.element.id + '_gridcontrol_indent';
+        const outdentID = tObj.element.id + '_gridcontrol_outdent';
+        const toolbarElement = this.parent.grid.toolbarModule.getToolbar();
+        const indentEle = toolbarElement.querySelector('#' + indentID);
+        const outdentEle = toolbarElement.querySelector('#' + outdentID);
+        let row = args.row;
+        const selectedrow = tObj.getSelectedRows()[0];
+        if (!isNullOrUndefined(row[0])) {
+            row = row[0];
+        }
+        row = (!isNullOrUndefined(selectedrow) && selectedrow.rowIndex !== row.rowIndex) ? selectedrow : row;
+        if (indentEle !== null && outdentEle !== null) {
+            indentElement = toolbarElement.querySelector('#' + indentID).parentElement;
+            outdentElement = toolbarElement.querySelector('#' + outdentID).parentElement;
+            if (row.rowIndex === 0 || tObj.getSelectedRowIndexes().length > 1) {
+                indentElement.classList.add('e-hidden');
+                outdentElement.classList.add('e-hidden');
+            }
+            else if (args['name'] !== 'rowDeselected' || (!isNullOrUndefined(selectedrow) && tObj.grid.isCheckBoxSelection)) {
+                const selectedItem = tObj.getCurrentViewRecords()[row.rowIndex];
+                if (!isNullOrUndefined(selectedItem)) {
+                    if ((selectedItem.level > tObj.getCurrentViewRecords()[row.rowIndex - 1].level)) {
+                        indentElement.classList.add('e-hidden');
+                    }
+                    else {
+                        indentElement.classList.remove('e-hidden');
+                    }
+                    if (selectedItem.level === tObj.getCurrentViewRecords()[row.rowIndex - 1].level) {
+                        indentElement.classList.remove('e-hidden');
+                    }
+                    if (selectedItem.level === 0) {
+                        outdentElement.classList.add('e-hidden');
+                    }
+                    if (selectedItem.level !== 0) {
+                        outdentElement.classList.remove('e-hidden');
+                    }
                 }
-                if (tObj.getCurrentViewRecords()[args.row.rowIndex].level === 0) {
-                    this.enableItems([tObj.element.id + '_gridcontrol_outdent'], false);
+            }
+            if (args['name'] === 'rowDeselected' && isNullOrUndefined(selectedrow) && !tObj.grid.isCheckBoxSelection) {
+                if (this.parent.toolbar['includes']('Indent')) {
+                    indentElement.classList.add('e-hidden');
                 }
-                if (tObj.getCurrentViewRecords()[args.row.rowIndex].level !== 0) {
-                    this.enableItems([tObj.element.id + '_gridcontrol_outdent'], true);
+                if (this.parent.toolbar['includes']('Outdent')) {
+                    outdentElement.classList.add('e-hidden');
                 }
             }
         }
-        if (args['name'] === "rowDeselected") {
-            if (this.parent.toolbar['includes']('Indent')) {
-                this.enableItems([tObj.element.id + '_gridcontrol_indent'], false);
-            }
-            if (this.parent.toolbar['includes']('Outdent')) {
-                this.enableItems([tObj.element.id + '_gridcontrol_outdent'], false);
-            }
-        }
-        if (args.row.rowIndex === 0 && !isNullOrUndefined(args.data.parentItem)) {
-            this.enableItems([tObj.element.id + '_gridcontrol_outdent'], true);
-        }
     }
     toolbarClickHandler(args) {
         const tObj = this.parent;
-        const action = 'action';
+        const indentOutdentAction = 'indentOutdentAction';
         if (this.parent.editSettings.mode === 'Cell' && this.parent.grid.editSettings.mode === 'Batch' &&
             args.item.id === this.parent.grid.element.id + '_update') {
             args.cancel = true;
@@ -8891,56 +9191,15 @@ class Toolbar$1 {
         if (args.item.id === this.parent.grid.element.id + '_collapseall') {
             this.parent.collapseAll();
         }
-        if (args.item.id === tObj.grid.element.id + '_indent' && tObj.getSelectedRecords().length) {
-            const record = tObj.getCurrentViewRecords()[tObj.getSelectedRowIndexes()[0] - 1];
-            let dropIndex;
-            if (record.level > tObj.getSelectedRecords()[0].level) {
-                for (let i = 0; i < tObj.getCurrentViewRecords().length; i++) {
-                    if (tObj.getCurrentViewRecords()[i].taskData === record.parentItem.taskData) {
-                        dropIndex = i;
-                    }
-                }
-            }
-            else {
-                dropIndex = tObj.getSelectedRowIndexes()[0] - 1;
-            }
-            this.parent[action] = 'indenting';
-            this.eventTrigger('indenting', dropIndex);
+        if (args.item.id === tObj.grid.element.id + '_indent' && tObj.getSelectedRecords().length
+            && !isNullOrUndefined(tObj.rowDragAndDropModule)) {
+            this.parent.rowDragAndDropModule[indentOutdentAction](null, 'indent');
         }
-        if (args.item.id === tObj.grid.element.id + '_outdent' && tObj.getSelectedRecords().length) {
-            let dropIndex;
-            const parentItem = tObj.getSelectedRecords()[0].parentItem;
-            for (let i = 0; i < tObj.getCurrentViewRecords().length; i++) {
-                if (tObj.getCurrentViewRecords()[i].taskData === parentItem.taskData) {
-                    dropIndex = i;
-                }
-            }
-            this.parent[action] = 'outdenting';
-            this.eventTrigger('outdenting', dropIndex);
+        if (args.item.id === tObj.grid.element.id + '_outdent' && tObj.getSelectedRecords().length
+            && !isNullOrUndefined(tObj.rowDragAndDropModule)) {
+            this.parent.rowDragAndDropModule[indentOutdentAction](null, 'outdent');
         }
     }
-    eventTrigger(action, dropIndex) {
-        const selectedRecords = 'selectedRecords';
-        const selectedRows = 'selectedRows';
-        this.parent[selectedRows] = this.parent.getSelectedRows();
-        this.parent[selectedRecords] = this.parent.getSelectedRecords();
-        const actionArgs = {
-            requestType: action,
-            data: this.parent.getSelectedRecords(),
-            row: this.parent.getSelectedRows(),
-            cancel: false
-        };
-        this.parent.trigger(actionBegin, actionArgs, (actionArgs) => {
-            if (!actionArgs.cancel) {
-                if (actionArgs.requestType === 'indenting') {
-                    this.parent.reorderRows([this.parent.getSelectedRowIndexes()[0]], dropIndex, 'child');
-                }
-                else if (actionArgs.requestType === 'outdenting') {
-                    this.parent.reorderRows([this.parent.getSelectedRowIndexes()[0]], dropIndex, 'below');
-                }
-            }
-        });
-    }
     /**
      * Gets the toolbar of the TreeGrid.
      *
@@ -9668,9 +9927,17 @@ class BatchEdit {
             this.parent.editModule[isTabLastRow] = false;
             return;
         }
-        this.selectedIndex = this.parent.grid.selectedRowIndex;
-        this.addRowIndex = this.parent.grid.selectedRowIndex > -1 ? this.parent.grid.selectedRowIndex : 0;
-        this.addRowRecord = this.parent.getSelectedRecords()[0];
+        if (this.parent.editModule['isAddedRowByMethod'] && !isNullOrUndefined(this.parent.editModule['addRowIndex']) && this.parent.grid.selectedRowIndex === -1) {
+            this.selectedIndex = this.parent.editModule['selectedIndex'];
+            this.addRowIndex = this.parent.editModule['addRowIndex'];
+            this.addRowRecord = this.parent.getCurrentViewRecords()[this.selectedIndex];
+        }
+        else {
+            this.selectedIndex = this.parent.grid.selectedRowIndex;
+            this.addRowIndex = this.parent.grid.selectedRowIndex > -1 ? this.parent.grid.selectedRowIndex : 0;
+            this.parent.editModule['addRowIndex'] = this.parent.grid.selectedRowIndex > -1 ? this.parent.grid.selectedRowIndex : 0;
+            this.addRowRecord = this.parent.getSelectedRecords()[0];
+        }
     }
     batchAdd(e) {
         if (this.parent.editSettings.newRowPosition !== 'Bottom') {
@@ -9682,6 +9949,9 @@ class BatchEdit {
                 this.batchRecords = extendArray(this.parent.grid.getCurrentViewRecords());
                 this.currentViewRecords = extendArray(this.parent.grid.getCurrentViewRecords());
             }
+            if (this.parent.editModule['isAddedRowByMethod'] && !isNullOrUndefined(this.parent.editModule['addRowIndex'])) {
+                classList(this.parent.grid.getDataRows()[0], ['e-batchrow'], []);
+            }
             if (this.parent.editSettings.newRowPosition !== 'Top') {
                 let records = this.parent.grid.getCurrentViewRecords();
                 if (this.parent.editSettings.mode === 'Batch' && (this.parent.getBatchChanges()[this.addedRecords].length > 1
@@ -9905,6 +10175,10 @@ class BatchEdit {
             }
             if (this.parent.editSettings.newRowPosition !== 'Bottom' && !Object.hasOwnProperty.call(args, 'updatedRecords')) {
                 data.splice(data.length - addRecords.length, addRecords.length);
+                if (this.parent.editModule['isAddedRowByMethod'] && addRecords.length && !isNullOrUndefined(this.parent.editModule['addRowIndex'])) {
+                    const index = parseInt(this.parent.getContentTable().getElementsByClassName('e-insertedrow')[0].getAttribute('aria-rowindex'), 10);
+                    data.splice(index, 0, addRecords[0]);
+                }
                 if (!this.parent.allowPaging && data.length !== currentViewRecords.length) {
                     if (currentViewRecords.length > addRecords.length) {
                         currentViewRecords.splice(currentViewRecords.length - addRecords.length, addRecords.length);
@@ -9956,7 +10230,8 @@ class BatchEdit {
                 }
                 editAction({ value: addRecords[i], action: 'add' }, this.parent, this.isSelfReference, addRowIndex, selectedIndex, columnName, addRowRecord);
                 selectedIndex = null;
-                if (this.parent.editSettings.newRowPosition === 'Child' && !isNullOrUndefined(addRecords[i][parentItem])) {
+                if (this.parent.editSettings.newRowPosition === 'Child' && !isNullOrUndefined(addRecords[i][parentItem]) &&
+                    (isNullOrUndefined(this.parent.editModule['addRowIndex']) || this.isSelfReference)) {
                     const indexValue = currentViewRecords.map((e) => { return e[primarykey]; })
                         .indexOf(addRecords[i][parentItem][primarykey]);
                     const children = currentViewRecords[indexValue][childRecords];
@@ -10698,6 +10973,21 @@ class Edit$1 {
                 focussedElement.focus();
             }
         }
+        if (this.parent.editSettings.mode === 'Batch' && !isNullOrUndefined(this.addRowIndex) && this.addRowIndex !== -1) {
+            index = this.batchEditModule.getAddRowIndex();
+            this.selectedIndex = this.batchEditModule.getSelectedIndex();
+            if (this.parent.editModule['isAddedRowByMethod']) {
+                const args = {
+                    action: 'add',
+                    data: this.parent.getBatchChanges()['addedRecords'][0],
+                    index: index,
+                    seletedRow: 0
+                };
+                this.parent.editModule.beginAddEdit(args);
+                this.parent.editModule.batchEditModule['batchAddRowRecord'].push(this.parent.editModule.batchEditModule['addRowRecord']);
+                this.parent.editModule.batchEditModule['batchAddedRecords'].push(args['data']);
+            }
+        }
     }
     // private beforeDataBound(args: BeforeDataBoundArgs): void {
     //   if (this.parent.grid.isEdit && this.parent.dataSource instanceof DataManager &&
@@ -10838,7 +11128,7 @@ class Edit$1 {
             let parentIdMapping;
             const isVirtualization = this.parent.enableVirtualization && this.addRowIndex > -1 && this.prevAriaRowIndex !== '-1';
             const rows = this.parent.getRows();
-            const firstAriaIndex = rows.length ? +rows[0].getAttribute('aria-rowindex') : 0;
+            const firstAriaIndex = rows.length ? currentData.indexOf(currentData[0]) : 0;
             const lastAriaIndex = rows.length ? +rows[rows.length - 1].getAttribute('aria-rowindex') : 0;
             const withinRange = this.selectedIndex >= firstAriaIndex && this.selectedIndex <= lastAriaIndex;
             if (currentData.length) {
@@ -11270,7 +11560,7 @@ class VirtualTreeContentRenderer extends VirtualContentRenderer {
                     getValue('virtualEle', this).setVirtualHeight(this.parent.getRowHeight() * e.count, '100%');
                 }
             }
-            if ((!isNullOrUndefined(e.requestType) && e.requestType.toString() === 'collapseAll') || this.isDataSourceChanged) {
+            if ((!isNullOrUndefined(e.requestType) && e.requestType.toString() === 'collapseAll') || (this.isDataSourceChanged && this.startIndex === -1)) {
                 this.contents.scrollTop = 0;
                 this.isDataSourceChanged = false;
             }
@@ -11794,7 +12084,7 @@ class VirtualScroll$1 {
         }
         else {
             const requestType = pageingDetails.actionArgs.requestType;
-            if (requestType === 'filtering' || requestType === 'collapseAll' ||
+            if (requestType === 'filtering' || requestType === 'collapseAll' || requestType === 'searching' ||
                 (requestType === 'refresh' && this.parent.enableCollapseAll && endIndex > visualData.length)) {
                 startIndex = 0;
                 endIndex = this.parent.grid.pageSettings.pageSize - 1;