@syncfusion/ej2-filemanager 19.4.56 → 20.1.52-10459

package/src/file-manager/layout/navigation-pane.js

@@ -4,10 +4,10 @@ import { KeyboardEvents, closest } from '@syncfusion/ej2-base';
 import { DataManager, Query } from '@syncfusion/ej2-data';
 import * as events from '../base/constant';
 import * as CLS from '../base/classes';
-import { read, Download, GetDetails, Delete } from '../common/operations';
+import { read, Download, GetDetails, Delete, isFileSystemData } from '../common/operations';
 import { createDialog } from '../pop-up/dialog';
 import { updatePath, getPath, getDirectories } from '../common/utility';
-import { createVirtualDragElement, dragStopHandler, dragStartHandler, draggingHandler, getDirectoryPath, getModule } from '../common/index';
+import { createVirtualDragElement, dragStopHandler, dragStartHandler, draggingHandler, getDirectoryPath, getModule, getPathId } from '../common/index';
 import { copyFiles, cutFiles, removeActive, pasteHandler, getParentPath, readDropPath } from '../common/index';
 import { hasEditAccess, createDeniedDialog, hasDownloadAccess, getAccessClass } from '../common/index';
 /**
@@ -20,6 +20,7 @@ var NavigationPane = /** @class */ (function () {
      * @param {IFileManager} parent - specifies the parent element.
      * @hidden
      */
+    /* istanbul ignore next */
     function NavigationPane(parent) {
         this.removeNodes = [];
         this.moveNames = [];
@@ -28,6 +29,8 @@ var NavigationPane = /** @class */ (function () {
         this.isPathDragged = false;
         this.isRenameParent = false;
         this.isRightClick = false;
+        this.isSameNodeClicked = false;
+        this.isNodeExpandCalled = false;
         this.renameParent = null;
         // Specifies the previously selected nodes in the treeview control.
         this.previousSelected = null;
@@ -41,9 +44,9 @@ var NavigationPane = /** @class */ (function () {
             altEnter: 'alt+enter',
             esc: 'escape',
             del: 'delete',
-            ctrlX: 'ctrl+x',
-            ctrlC: 'ctrl+c',
-            ctrlV: 'ctrl+v',
+            ctrlX: this.parent.isMac ? 'cmd+x' : 'ctrl+x',
+            ctrlC: this.parent.isMac ? 'cmd+c' : 'ctrl+c',
+            ctrlV: this.parent.isMac ? 'cmd+v' : 'ctrl+v',
             ctrlShiftN: 'ctrl+shift+n',
             shiftF10: 'shift+F10',
             f2: 'f2'
@@ -53,10 +56,8 @@ var NavigationPane = /** @class */ (function () {
         if (!isNOU(this.treeObj)) {
             return;
         }
-        // eslint-disable-next-line
         var rootData = getValue(this.parent.pathId[0], this.parent.feParent);
         setValue('_fm_icon', 'e-fe-folder', rootData);
-        // eslint-disable-next-line
         var attr = {};
         var id = getValue('id', rootData);
         if (!isNOU(id)) {
@@ -92,10 +93,7 @@ var NavigationPane = /** @class */ (function () {
     NavigationPane.prototype.addDragDrop = function () {
         var _this = this;
         if (!this.parent.isMobile && this.treeObj) {
-            if (this.parent.allowDragAndDrop) {
-                if (this.dragObj) {
-                    this.dragObj.destroy();
-                }
+            if (this.parent.allowDragAndDrop && isNOU(this.dragObj)) {
                 this.dragObj = new Draggable(this.treeObj.element, {
                     cursorAt: this.parent.dragCursorPosition,
                     dragTarget: '.' + CLS.FULLROW,
@@ -107,12 +105,13 @@ var NavigationPane = /** @class */ (function () {
                     },
                     dragStop: dragStopHandler.bind(this, this.parent),
                     enableTailMode: true,
-                    enableAutoScroll: true,
+                    enableAutoScroll: false,
                     helper: this.dragHelper.bind(this)
                 });
             }
             else if (!this.parent.allowDragAndDrop && this.dragObj) {
                 this.dragObj.destroy();
+                this.dragObj = null;
             }
         }
     };
@@ -128,7 +127,6 @@ var NavigationPane = /** @class */ (function () {
         this.parent.activeElements = [dragLi];
         this.parent.dragNodes = [];
         getModule(this.parent, dragLi);
-        // eslint-disable-next-line
         this.parent.dragData = this.getTreeData(dragLi);
         this.parent.dragPath = this.getDragPath(dragLi, this.parent.dragData[0].name);
         this.parent.dragNodes.push(this.parent.dragData[0].name);
@@ -152,18 +150,20 @@ var NavigationPane = /** @class */ (function () {
         };
         this.parent.trigger('fileLoad', eventArgs);
     };
-    // eslint-disable-next-line
     NavigationPane.prototype.addChild = function (files, target, prevent) {
-        // eslint-disable-next-line
         var directories = getDirectories(files);
-        if (directories.length > 0) {
+        var targetDirectory = this.getTreeData(target);
+        if (directories.length > 0 && targetDirectory.length > 0 &&
+            (directories[0].filterPath == null ||
+                isNOU(targetDirectory[0])
+                    && targetDirectory[0].filterPath == null
+                || directories[0].filterPath !==
+                    targetDirectory[0].filterPath)) {
             var length_1 = 0;
-            // eslint-disable-next-line
             var folders = directories;
             while (length_1 < directories.length) {
-                // eslint-disable-next-line
-                folders[length_1]._fm_icon = 'e-fe-folder';
-                // eslint-disable-next-line
+                // eslint-disable-next-line camelcase
+                folders[parseInt(length_1.toString(), 10)]._fm_icon = 'e-fe-folder';
                 var attr = {};
                 var id = getValue('id', folders[length_1]);
                 if (!isNOU(id)) {
@@ -177,77 +177,105 @@ var NavigationPane = /** @class */ (function () {
                 }
                 length_1++;
             }
-            // eslint-disable-next-line
-            this.treeObj.addNodes(directories, target, null, prevent);
+            var element = select('[data-uid="' + target + '"]', this.treeObj.element);
+            var childElements = select('ul', element);
+            if (isNOU(childElements)) {
+                this.treeObj.addNodes(directories, target, null, prevent);
+            }
         }
     };
     // Node Selecting event handler
     NavigationPane.prototype.onNodeSelecting = function (args) {
-        if (!args.isInteracted && !this.isRightClick && !this.isPathDragged && !this.isRenameParent || this.restrictSelecting) {
+        if (!args.isInteracted && !this.isRightClick &&
+            !this.isSameNodeClicked && !this.isPathDragged && !this.isRenameParent || this.restrictSelecting) {
             this.restrictSelecting = false;
             this.isNodeClickCalled = false;
             return;
         }
         if (!this.renameParent) {
             this.parent.activeModule = 'navigationpane';
-            // eslint-disable-next-line
             var nodeData = this.getTreeData(getValue('id', args.nodeData));
-            var eventArgs = { cancel: false, fileDetails: nodeData[0], module: 'NavigationPane' };
-            this.parent.trigger('fileOpen', eventArgs);
-            args.cancel = eventArgs.cancel;
-            if (args.cancel) {
-                this.restrictSelecting = this.isNodeClickCalled ? this.previousSelected[0] != args.node.getAttribute('data-uid') : false;
-                this.treeObj.selectedNodes = this.isNodeClickCalled ? this.previousSelected : this.treeObj.selectedNodes;
-                this.previousSelected = this.treeObj.selectedNodes;
-                if (!isNOU(this.parent) && !isNOU(this.parent.contextmenuModule)) {
-                    this.parent.contextmenuModule.contextMenu.enableItems(['Open'], true);
+            if (args.node.getAttribute('data-uid') !== this.parent.pathId[this.parent.pathId.length - 1] && !this.isRightClick && !this.isNodeClickCalled || this.isSameNodeClicked) {
+                this.isNodeClickCalled = false;
+                if (!this.isSameNodeClicked) {
+                    this.isSameNodeClicked = true;
+                    var selecEventArgs = { action: args.action, fileDetails: nodeData[0], isInteracted: args.isInteracted };
+                    this.parent.trigger('fileSelect', selecEventArgs);
                 }
+                if (!this.isRightClick) {
+                    var eventArgs = { cancel: false, fileDetails: nodeData[0], module: 'NavigationPane' };
+                    this.parent.trigger('fileOpen', eventArgs);
+                    args.cancel = eventArgs.cancel;
+                }
+                if (args.cancel) {
+                    this.restrictSelecting = this.isNodeClickCalled ? this.previousSelected[0] !== args.node.getAttribute('data-uid') : false;
+                    this.isNodeClickCalled = true;
+                    this.isSameNodeClicked = false;
+                    this.previousSelected = this.treeObj.selectedNodes;
+                    this.treeObj.selectedNodes = [args.node.getAttribute('data-uid')];
+                }
+            }
+            else if (this.previousSelected[0] !== args.node.getAttribute('data-uid')) {
+                var selecEventArgs = { action: args.action, fileDetails: nodeData[0], isInteracted: this.isNodeClickCalled };
+                this.parent.trigger('fileSelect', selecEventArgs);
             }
         }
     };
     // Opens the folder while clicking open context menu item in the treeview.
     NavigationPane.prototype.openFileOnContextMenuClick = function (node) {
         var data = this.treeObj.getTreeData(node);
-        // eslint-disable-next-line
         this.parent.selectedItems = [];
         this.parent.itemData = data;
         this.activeNode = node;
         this.parent.activeModule = 'navigationpane';
-        updatePath(node, this.parent.itemData[0], this.parent);
-        read(this.parent, this.isPathDragged ? events.pasteEnd : events.pathChanged, this.parent.path);
-        this.parent.visitedItem = node;
-        this.isPathDragged = this.isRenameParent = this.isRightClick = false;
-        this.treeObj.selectedNodes = [node.getAttribute('data-uid')];
+        var eventArgs = { cancel: false, fileDetails: data[0], module: 'NavigationPane' };
+        this.parent.trigger('fileOpen', eventArgs);
+        this.isNodeClickCalled = true;
+        if (!eventArgs.cancel) {
+            updatePath(node, this.parent.itemData[0], this.parent);
+            read(this.parent, this.isPathDragged ? events.pasteEnd : events.pathChanged, this.parent.path);
+            this.parent.visitedItem = node;
+            this.isPathDragged = this.isRenameParent = this.isRightClick = false;
+            this.treeObj.selectedNodes = [node.getAttribute('data-uid')];
+        }
     };
     NavigationPane.prototype.onNodeSelected = function (args) {
         if (this.parent.breadcrumbbarModule && this.parent.breadcrumbbarModule.searchObj && !this.renameParent) {
             this.parent.breadcrumbbarModule.searchObj.element.value = '';
             this.parent.isFiltered = false;
+            this.isNodeClickCalled = false;
         }
         this.parent.searchedItems = [];
-        if (!args.isInteracted && !this.isRightClick && !this.isPathDragged && !this.isRenameParent) {
+        if (!args.isInteracted && !this.isRightClick && !this.isSameNodeClicked && !this.isPathDragged && !this.isRenameParent) {
+            this.parent.pathId = getPathId(args.node);
             return;
         }
         this.activeNode = args.node;
         this.parent.activeModule = 'navigationpane';
-        // eslint-disable-next-line
         var nodeData = this.getTreeData(getValue('id', args.nodeData));
         this.parent.selectedItems = [];
         this.parent.itemData = nodeData;
         var previousPath = this.parent.path;
-        updatePath(args.node, this.parent.itemData[0], this.parent);
+        if (!this.isRightClick && this.isSameNodeClicked) {
+            updatePath(args.node, this.parent.itemData[0], this.parent);
+        }
+        else {
+            this.parent.pathId = getPathId(args.node);
+            this.parent.visitedItem = args.node;
+        }
+        if (args.node.querySelector('.' + CLS.ICONS) && args.node.querySelector('.' + CLS.LIST_ITEM) === null) {
+            this.expandNodeTarget = 'add';
+        }
         if (previousPath !== this.parent.path) {
-            this.expandNodeTarget = null;
-            if (args.node.querySelector('.' + CLS.ICONS) && args.node.querySelector('.' + CLS.LIST_ITEM) === null) {
-                this.expandNodeTarget = 'add';
+            if (!this.isRightClick && this.isSameNodeClicked) {
+                read(this.parent, this.isPathDragged ? events.pasteEnd : events.pathChanged, this.parent.path);
+                this.isNodeClickCalled = true;
             }
-            read(this.parent, this.isPathDragged ? events.pasteEnd : events.pathChanged, this.parent.path);
             this.parent.visitedItem = args.node;
         }
-        this.isPathDragged = this.isRenameParent = this.isRightClick = false;
+        this.isPathDragged = this.isRenameParent = this.isRightClick = this.isSameNodeClicked = false;
     };
     /* istanbul ignore next */
-    // eslint-disable-next-line
     NavigationPane.prototype.onPathDrag = function (args) {
         this.isPathDragged = true;
         this.selectResultNode(args[0]);
@@ -258,6 +286,7 @@ var NavigationPane = /** @class */ (function () {
             return;
         }
         if (args.node.querySelector('.' + CLS.LIST_ITEM) === null) {
+            this.isNodeExpandCalled = true;
             var text = getValue('text', args.nodeData);
             var id = args.node.getAttribute('data-id');
             var isId = isNOU(id) ? false : true;
@@ -266,6 +295,7 @@ var NavigationPane = /** @class */ (function () {
             this.expandNodeTarget = args.node.getAttribute('data-uid');
             this.parent.expandedId = this.expandNodeTarget;
             this.parent.itemData = this.getTreeData(getValue('id', args.nodeData));
+            this.parent.pathId.push(getValue('id', args.nodeData));
             read(this.parent, events.nodeExpand, path);
         }
     };
@@ -273,6 +303,7 @@ var NavigationPane = /** @class */ (function () {
     NavigationPane.prototype.onNodeExpanded = function (args) {
         this.addChild(args.files, this.expandNodeTarget, false);
         this.parent.expandedId = null;
+        this.isNodeExpandCalled = false;
     };
     NavigationPane.prototype.onNodeClicked = function (args) {
         this.parent.activeModule = 'navigationpane';
@@ -288,6 +319,14 @@ var NavigationPane = /** @class */ (function () {
             var layout = (this.parent.view === 'LargeIcons') ? 'largeiconsview' : 'detailsview';
             this.parent.notify(events.modelChanged, { module: layout, newProp: { selectedItems: [] } });
         }
+        else if (args.node.getAttribute('data-uid') === this.treeObj.selectedNodes[0] && !this.isNodeClickCalled && !this.isNodeExpandCalled) {
+            if (args.event.which === 3) {
+                this.isRightClick = true;
+            }
+            this.isSameNodeClicked = true;
+            this.isNodeClickCalled = true;
+            this.treeObj.selectedNodes = [args.node.getAttribute('data-uid')];
+        }
     };
     /* istanbul ignore next */
     NavigationPane.prototype.onNodeEditing = function (args) {
@@ -297,11 +336,10 @@ var NavigationPane = /** @class */ (function () {
     };
     NavigationPane.prototype.onPathChanged = function (args) {
         this.parent.isCut = false;
-        // eslint-disable-next-line
         var currFiles = getValue(this.parent.pathId[this.parent.pathId.length - 1], this.parent.feFiles);
         if (this.expandNodeTarget === 'add') {
             var sNode = select('[data-uid="' + this.treeObj.selectedNodes[0] + '"]', this.treeObj.element);
-            var ul = select('.' + CLS.LIST_PARENT, sNode);
+            var ul = (!isNOU(sNode)) ? select('.' + CLS.LIST_PARENT, sNode) : null;
             if (isNOU(ul)) {
                 this.addChild(args.files, this.treeObj.selectedNodes[0], !this.expandTree);
             }
@@ -311,6 +349,9 @@ var NavigationPane = /** @class */ (function () {
         if (isNOU(currFiles)) {
             setValue(this.parent.pathId[this.parent.pathId.length - 1], args.files, this.parent.feFiles);
         }
+        if (this.parent.uploadObj.directoryUpload && !(this.parent.hasId)) {
+            this.updateTree(args);
+        }
     };
     NavigationPane.prototype.updateTree = function (args) {
         if (this.treeObj) {
@@ -352,7 +393,6 @@ var NavigationPane = /** @class */ (function () {
     NavigationPane.prototype.onFinalizeEnd = function (args) {
         this.onInit();
         var id = getValue('_fm_id', args.cwd);
-        this.removeChildNodes(id);
         this.addChild(args.files, id, false);
         this.treeObj.selectedNodes = [this.parent.pathId[this.parent.pathId.length - 1]];
     };
@@ -400,14 +440,12 @@ var NavigationPane = /** @class */ (function () {
             this.renameParent = null;
         }
         else {
-            // eslint-disable-next-line
             var resultData = [];
             if (this.parent.hasId) {
                 resultData = new DataManager(this.treeObj.getTreeData()).
                     executeLocal(new Query().where('id', 'equal', this.parent.renamedId, false));
             }
             else {
-                // eslint-disable-next-line
                 var nData = new DataManager(this.treeObj.getTreeData()).
                     executeLocal(new Query().where(this.treeObj.fields.text, 'equal', this.parent.renameText, false));
                 if (nData.length > 0) {
@@ -416,7 +454,6 @@ var NavigationPane = /** @class */ (function () {
                 }
             }
             if (resultData.length > 0) {
-                this.isRenameParent = true;
                 var id_1 = getValue(this.treeObj.fields.id, resultData[0]);
                 this.treeObj.selectedNodes = [id_1];
                 this.treeObj.dataBind();
@@ -429,16 +466,13 @@ var NavigationPane = /** @class */ (function () {
             this.updateTree(args);
         }
         else {
-            // eslint-disable-next-line
             var data = this.treeObj.getTreeData();
-            // eslint-disable-next-line
             var resultData = [];
             if (this.parent.hasId) {
                 resultData = new DataManager(data).
                     executeLocal(new Query().where('id', 'equal', this.parent.renamedId, false));
             }
             else {
-                // eslint-disable-next-line
                 var nData = new DataManager(data).
                     executeLocal(new Query().where(this.treeObj.fields.text, 'equal', this.parent.currentItemText, false));
                 if (nData.length > 0) {
@@ -494,7 +528,6 @@ var NavigationPane = /** @class */ (function () {
         }
         this.treeObj.removeNodes(moveNames);
     };
-    // eslint-disable-next-line
     NavigationPane.prototype.getMoveNames = function (files, flag, path) {
         var moveNames = [];
         for (var i = 0; i < files.length; i++) {
@@ -507,7 +540,6 @@ var NavigationPane = /** @class */ (function () {
                         name_2 = path.substring(index + 1);
                         path = path.substring(0, index + 1);
                     }
-                    // eslint-disable-next-line
                     var resultData = new DataManager(this.treeObj.getTreeData()).
                         executeLocal(new Query().where(this.treeObj.fields.text, 'equal', name_2, false));
                     for (var j = 0; j < resultData.length; j++) {
@@ -534,16 +566,13 @@ var NavigationPane = /** @class */ (function () {
         this.treeObj.removeNodes(moveNames);
     };
     /* istanbul ignore next */
-    // eslint-disable-next-line
     NavigationPane.prototype.selectResultNode = function (resultObj) {
         if (!this.parent.hasId) {
             var path = getValue('filterPath', resultObj);
             var itemname = getValue('name', resultObj);
-            // eslint-disable-next-line
             var data = new DataManager(this.treeObj.getTreeData()).
                 executeLocal(new Query().where(this.treeObj.fields.text, 'equal', itemname, false));
             if (data.length > 0) {
-                // eslint-disable-next-line
                 var resultData = new DataManager(data).
                     executeLocal(new Query().where('filterPath', 'equal', path, false));
                 if (resultData.length > 0) {
@@ -554,7 +583,8 @@ var NavigationPane = /** @class */ (function () {
             }
         }
         else {
-            this.treeObj.selectedNodes = [getValue('_fm_id', resultObj)];
+            var selectedNode = this.treeObj.getTreeData().filter(function (obj) { return obj.name === resultObj.name; })[0];
+            this.treeObj.selectedNodes = [getValue('_fm_id', selectedNode)];
             this.treeObj.dataBind();
         }
     };
@@ -564,14 +594,12 @@ var NavigationPane = /** @class */ (function () {
         this.parent.isDropEnd = !this.parent.isPasteError;
     };
     NavigationPane.prototype.onpasteEnd = function (args) {
-        // eslint-disable-next-line
         var resultData = [];
         if (this.parent.hasId) {
             resultData = new DataManager(this.treeObj.getTreeData()).
                 executeLocal(new Query().where('id', 'equal', getValue('id', args.cwd), false));
         }
         else {
-            // eslint-disable-next-line
             var nData = new DataManager(this.treeObj.getTreeData()).
                 executeLocal(new Query().where(this.treeObj.fields.text, 'equal', getValue('name', args.cwd), false));
             if (nData.length > 0) {
@@ -593,6 +621,9 @@ var NavigationPane = /** @class */ (function () {
     };
     /* istanbul ignore next */
     NavigationPane.prototype.checkDropPath = function (args) {
+        if (isFileSystemData(this.parent) && (this.parent.path === this.parent.dropPath || this.parent.targetModule === 'navigationpane')) {
+            return;
+        }
         if (this.parent.hasId) {
             this.parent.isDropEnd = !this.parent.isPasteError;
             readDropPath(this.parent);
@@ -611,8 +642,7 @@ var NavigationPane = /** @class */ (function () {
             this.updateItemData();
         }
         this.moveNames = [];
-        // eslint-disable-next-line
-        var obj = this.parent.isDragDrop ? this.parent.dragData : this.parent.actionRecords;
+        var obj = this.parent.isDragDrop || isFileSystemData(this.parent) ? this.parent.dragData : this.parent.actionRecords;
         for (var i = 0; i < obj.length; i++) {
             if (getValue('isFile', obj[i]) === false) {
                 this.moveNames.push(getValue('_fm_id', obj[i]));
@@ -692,12 +722,10 @@ var NavigationPane = /** @class */ (function () {
     /* istanbul ignore next */
     NavigationPane.prototype.onDetailsInit = function () {
         if (this.parent.activeModule === this.getModuleName()) {
-            // eslint-disable-next-line
             var dataobj = this.getTreeData(this.treeObj.selectedNodes[0]);
             this.parent.itemData = dataobj;
         }
     };
-    // eslint-disable-next-line
     NavigationPane.prototype.onMenuItemData = function (args) {
         if (this.parent.activeModule === this.getModuleName()) {
             var liEle = closest(args.target, 'li');
@@ -795,7 +823,6 @@ var NavigationPane = /** @class */ (function () {
                 break;
             case 'f2':
                 if (this.parent.selectedItems.length === 0) {
-                    // eslint-disable-next-line
                     var data = this.getTreeData(this.treeObj.selectedNodes[0])[0];
                     if (!hasEditAccess(data)) {
                         createDeniedDialog(this.parent, data, events.permissionEdit);
@@ -808,9 +835,7 @@ var NavigationPane = /** @class */ (function () {
                 break;
         }
     };
-    // eslint-disable-next-line
     NavigationPane.prototype.getTreeData = function (args) {
-        // eslint-disable-next-line
         var data = this.treeObj.getTreeData(args);
         for (var i = 0; i < data.length; i++) {
             if (isNOU(getValue('hasChild', data[i]))) {
@@ -824,7 +849,6 @@ var NavigationPane = /** @class */ (function () {
         this.parent.currentItemText = getValue('name', this.parent.itemData[0]);
     };
     NavigationPane.prototype.updateItemData = function () {
-        // eslint-disable-next-line
         var data = this.getTreeData(this.treeObj.selectedNodes[0])[0];
         this.parent.itemData = [data];
         this.parent.isFile = false;

package/src/file-manager/models/column-model.d.ts

@@ -1,4 +1,4 @@
-import { Property, ChildProperty, NumberFormatOptions, DateFormatOptions } from '@syncfusion/ej2-base';
+import { Property, ChildProperty, NumberFormatOptions, DateFormatOptions } from '@syncfusion/ej2-base';import { SortComparer } from '../base/interface';
 import {TextAlign} from "./column";
 
 /**
@@ -82,15 +82,27 @@ export interface ColumnModel {
      * It accepts either [template string](https://ej2.syncfusion.com/documentation/common/template-engine/) or HTML element ID.
      *
      * @default null
+     * @aspType string
+     */
+    template?: string | Function;
+
+    /**
+     * Defines the custom sort comparer function.
+     * The sort comparer function has the same functionality like
+     * [`Array.sort`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) sort comparer.
+     *
+     * @default null
+     * @aspType string
      */
-    template?: string;
+    sortComparer?: SortComparer | string;
 
     /**
      * Defines the column template as string or HTML element ID which is used to add customized element in the column header.
      *
      * @default null
+     * @aspType string
      */
-    headerTemplate?: string;
+    headerTemplate?: string | Function;
 
     /**
      * If `allowSorting` set to false, then it disables sorting option of a particular column.
@@ -112,7 +124,6 @@ export interface ColumnModel {
      *
      * @default null
      */
-    /* eslint-disable */
     customAttributes?: { [x: string]: Object };
 
     /**
@@ -131,7 +142,14 @@ export interface ColumnModel {
      *
      * @default null
      */
-    /* eslint-disable */
     customFormat?: { [x: string]: Object };
 
+    /**
+     * If `isPrimaryKey` is set to true, considers this column as the primary key constraint.
+     *
+     * @deprecated
+     * @default false
+     */
+    isPrimaryKey?: boolean;
+
 }

package/src/file-manager/models/column.d.ts

@@ -1,4 +1,5 @@
 import { ChildProperty, NumberFormatOptions, DateFormatOptions } from '@syncfusion/ej2-base';
+import { SortComparer } from '../base/interface';
 /**
  * Defines alignments of text, they are
  * * Left
@@ -110,14 +111,25 @@ export declare class Column extends ChildProperty<Column> {
      * It accepts either [template string](https://ej2.syncfusion.com/documentation/common/template-engine/) or HTML element ID.
      *
      * @default null
+     * @aspType string
+     */
+    template: string | Function;
+    /**
+     * Defines the custom sort comparer function.
+     * The sort comparer function has the same functionality like
+     * [`Array.sort`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) sort comparer.
+     *
+     * @default null
+     * @aspType string
      */
-    template: string;
+    sortComparer: SortComparer | string;
     /**
      * Defines the column template as string or HTML element ID which is used to add customized element in the column header.
      *
      * @default null
+     * @aspType string
      */
-    headerTemplate: string;
+    headerTemplate: string | Function;
     /**
      * If `allowSorting` set to false, then it disables sorting option of a particular column.
      * By default all columns are sortable.
@@ -157,4 +169,11 @@ export declare class Column extends ChildProperty<Column> {
     customFormat: {
         [x: string]: Object;
     };
+    /**
+     * If `isPrimaryKey` is set to true, considers this column as the primary key constraint.
+     *
+     * @deprecated
+     * @default false
+     */
+    isPrimaryKey: boolean;
 }

package/src/file-manager/models/column.js

@@ -57,6 +57,9 @@ var Column = /** @class */ (function (_super) {
     __decorate([
         Property(null)
     ], Column.prototype, "template", void 0);
+    __decorate([
+        Property(null)
+    ], Column.prototype, "sortComparer", void 0);
     __decorate([
         Property(null)
     ], Column.prototype, "headerTemplate", void 0);
@@ -75,6 +78,9 @@ var Column = /** @class */ (function (_super) {
     __decorate([
         Property(null)
     ], Column.prototype, "customFormat", void 0);
+    __decorate([
+        Property(false)
+    ], Column.prototype, "isPrimaryKey", void 0);
     return Column;
 }(ChildProperty));
 export { Column };

package/src/file-manager/models/default-locale.js

@@ -1,7 +1,6 @@
 /**
  * Specifies the default locale of FileManager component
  */
-// eslint-disable-next-line
 export var defaultLocale = {
     'NewFolder': 'New folder',
     'Upload': 'Upload',

package/src/file-manager/models/details-view-settings-model.d.ts

@@ -1,4 +1,4 @@
-import { Property, ChildProperty } from '@syncfusion/ej2-base';import { ColumnModel } from './index';
+import { Property, ChildProperty, initializeCSPTemplate } from '@syncfusion/ej2-base';import { ColumnModel } from './index';
 
 /**
  * Interface for a class DetailsViewSettings

package/src/file-manager/models/details-view-settings.js

@@ -17,21 +17,26 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { Property, ChildProperty } from '@syncfusion/ej2-base';
+import { Property, ChildProperty, initializeCSPTemplate } from '@syncfusion/ej2-base';
 /**
  * Specifies the columns in the details view of the file manager.
  */
 export var columnArray = [
     {
         field: 'name', headerText: 'Name', minWidth: 120,
-        template: '<span class="e-fe-text">${name}</span>', customAttributes: { class: 'e-fe-grid-name' }
+        template: '<span class="e-fe-text">${name}</span>',
+        customAttributes: { class: 'e-fe-grid-name' }
     },
     {
         field: '_fm_modified', headerText: 'DateModified', type: 'dateTime',
         format: 'MMMM dd, yyyy HH:mm', minWidth: 120, width: '190'
     },
     {
-        field: 'size', headerText: 'Size', minWidth: 90, width: '110', template: '<span class="e-fe-size">${size}</span>'
+        field: 'size', headerText: 'Size', minWidth: 90, width: '110',
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        template: initializeCSPTemplate(function (data) {
+            return "<span class=\"e-fe-size\">" + data.size + "</span>";
+        }), format: 'n2'
     }
 ];
 /**

package/src/file-manager/models/navigation-pane-settings.d.ts

@@ -22,13 +22,13 @@ export declare class NavigationPaneSettings extends ChildProperty<NavigationPane
      */
     visible: boolean;
     /**
-    * Specifies a value that indicates how to sort the folders in the navigation pane of the file manager component.
-    *
-    * If the sortOrder is Ascending, the folders are sorted in ascending order.
-    * If the sortOrder is Descending, the folders are sorted in descending order.
-    * If the sortOrder is None, the folders are not sorted.
-    *
-    * @default 'None'
-    */
+     * Specifies a value that indicates how to sort the folders in the navigation pane of the file manager component.
+     *
+     * If the sortOrder is Ascending, the folders are sorted in ascending order.
+     * If the sortOrder is Descending, the folders are sorted in descending order.
+     * If the sortOrder is None, the folders are not sorted.
+     *
+     * @default 'None'
+     */
     sortOrder: 'None' | 'Ascending' | 'Descending';
 }