@syncfusion/ej2-filemanager 21.2.3 → 22.1.34

package/dist/global/index.d.ts

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

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-filemanager@*",
-  "_id": "@syncfusion/ej2-filemanager@21.1.41",
+  "_id": "@syncfusion/ej2-filemanager@18.21.3",
   "_inBundle": false,
-  "_integrity": "sha512-JJlmdBbW9+9GtqQp3HUI6GuhDAvbfej0r+qJlyEzoR4SdlHDBnYZPlzqe3riJgV/m6nt4AeRhy8uyL+jH84Jpw==",
+  "_integrity": "sha512-Hwb3KAwwFZQ0S1Qi2CTox6BClUF8xXddNcNNSwNigwQ/hWY9Ae7KEyOvZb9kFwxH6qEcozBdhGP/ZlrvPTI4Zw==",
   "_location": "/@syncfusion/ej2-filemanager",
   "_phantomChildren": {},
   "_requested": {
@@ -19,11 +19,14 @@
   "_requiredBy": [
     "/",
     "/@syncfusion/ej2",
+    "/@syncfusion/ej2-angular-filemanager",
     "/@syncfusion/ej2-pdfviewer",
-    "/@syncfusion/ej2-richtexteditor"
+    "/@syncfusion/ej2-react-filemanager",
+    "/@syncfusion/ej2-richtexteditor",
+    "/@syncfusion/ej2-vue-filemanager"
   ],
-  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-filemanager/-/ej2-filemanager-21.1.41.tgz",
-  "_shasum": "294db32c4ba33961fc58e360e9c682d8044ba0ad",
+  "_resolved": "https://nexus.syncfusion.com/repository/ej2-release/@syncfusion/ej2-filemanager/-/ej2-filemanager-18.21.3.tgz",
+  "_shasum": "f9e01d2b9ea1f4d63f7087e411959a2a64cbf430",
   "_spec": "@syncfusion/ej2-filemanager@*",
   "_where": "/jenkins/workspace/elease-automation_release_21.1.1/packages/included",
   "author": {
@@ -34,16 +37,16 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~21.2.3",
-    "@syncfusion/ej2-buttons": "~21.2.3",
-    "@syncfusion/ej2-data": "~21.2.3",
-    "@syncfusion/ej2-grids": "~21.2.3",
-    "@syncfusion/ej2-inputs": "~21.2.3",
-    "@syncfusion/ej2-layouts": "~21.2.3",
-    "@syncfusion/ej2-lists": "~21.2.3",
-    "@syncfusion/ej2-navigations": "~21.2.3",
-    "@syncfusion/ej2-popups": "~21.2.3",
-    "@syncfusion/ej2-splitbuttons": "~21.2.3"
+    "@syncfusion/ej2-base": "~22.1.34",
+    "@syncfusion/ej2-buttons": "~22.1.34",
+    "@syncfusion/ej2-data": "~22.1.34",
+    "@syncfusion/ej2-grids": "~22.1.34",
+    "@syncfusion/ej2-inputs": "~22.1.34",
+    "@syncfusion/ej2-layouts": "~22.1.34",
+    "@syncfusion/ej2-lists": "~22.1.34",
+    "@syncfusion/ej2-navigations": "~22.1.34",
+    "@syncfusion/ej2-popups": "~22.1.34",
+    "@syncfusion/ej2-splitbuttons": "~22.1.34"
   },
   "deprecated": false,
   "description": "Essential JS 2 FileManager Component",
@@ -73,6 +76,6 @@
     "url": "git+https://github.com/syncfusion/ej2-javascript-ui-controls.git"
   },
   "typings": "index.d.ts",
-  "version": "21.2.3",
+  "version": "22.1.34",
   "sideEffects": false
 }

package/src/file-manager/base/file-manager-model.d.ts

@@ -32,6 +32,13 @@ export interface FileManagerModel extends ComponentModel{
      */
     allowMultiSelection?: boolean;
 
+    /**
+     * Gets or sets a boolean value that determines whether to display checkboxes in the file manager. If enabled, checkboxes are shown for files or folders on hover.
+     *
+     * @default true
+     */
+    showItemCheckBoxes?: boolean;
+
     /**
      * Specifies the context menu settings of the file manager.
      *

package/src/file-manager/base/file-manager.d.ts

@@ -170,6 +170,12 @@ export declare class FileManager extends Component<HTMLElement> implements INoti
      * @default true
      */
     allowMultiSelection: boolean;
+    /**
+     * Gets or sets a boolean value that determines whether to display checkboxes in the file manager. If enabled, checkboxes are shown for files or folders on hover.
+     *
+     * @default true
+     */
+    showItemCheckBoxes: boolean;
     /**
      * Specifies the context menu settings of the file manager.
      *

package/src/file-manager/base/file-manager.js

@@ -1143,6 +1143,9 @@ var FileManager = /** @class */ (function (_super) {
     __decorate([
         Property(true)
     ], FileManager.prototype, "allowMultiSelection", void 0);
+    __decorate([
+        Property(true)
+    ], FileManager.prototype, "showItemCheckBoxes", void 0);
     __decorate([
         Complex({}, ContextMenuSettings)
     ], FileManager.prototype, "contextMenuSettings", void 0);

package/src/file-manager/base/interface.d.ts

@@ -16,145 +16,59 @@ import { BreadCrumbBar, Virtualization } from '../actions';
 import { PositionModel } from '@syncfusion/ej2-base/src/draggable-model';
 /**
  * Defines the view type of the FileManager.
+ * ```props
+ * LargeIcons :- Displays the files and folders as large icons.
+ * Details :- Displays the files and folders in a list format.
+ * ```
  */
-export declare type ViewType = 
-/**
-* Displays the files and folders as large icons.
-*/
-'LargeIcons' | 
-/**
-* Displays the files and folders in a list format.
-*/
-'Details';
+export declare type ViewType = 'LargeIcons' | 'Details';
 /**
  * Defines the files sorting order in FileManager.
+ * ```props
+ * Ascending :- Indicates that the folders and files are sorted in the descending order.
+ * Descending :- Indicates that the folders and files are sorted in the ascending order.
+ * None :- Indicates that the folders and files are not sorted.
+ * ```
  */
-export declare type SortOrder = 
-/**
-* Indicates that the folders and files are sorted in the descending order.
-*/
-'Ascending' | 
-/**
-*  Indicates that the folders and files are sorted in the ascending order
-*/
-'Descending' | 
-/**
-* Indicates that the folders and files are not sorted.
-*/
-'None';
+export declare type SortOrder = 'Ascending' | 'Descending' | 'None';
 /**
  * Defines the Toolbar items of the FileManager.
- */
-export declare type ToolBarItems = 
-/**
- * Allows you to quickly create a new folder
- */
-'NewFolder' | 
-/**
- * Allows you to quickly and easily upload files from your local computer.
- */
-'Upload' | 
-/**
- * Allows you to remove a file or folder from its current location and move it to a different location.
- */
-'Cut' | 
-/**
- * Allows you to create a duplicate of a file or folder and place it in a different location.
- */
-'Copy' | 
-/**
- * Allows you to place a previously cut or copied file or folder in a new location.
- */
-'Paste' | 
-/**
- * Allows you to remove a file or folder permanently.
- */
-'Delete' | 
-/**
- * Allows you to quickly and easily download files to your local computer.
- */
-'Download' | 
-/**
- * Allows you to change the name of a file or folder.
- */
-'Rename' | 
-/**
- * Allows you to sort files and folder by different criteria such as name, date, size, etc.
- */
-'SortBy' | 
-/**
- * Allows you to refresh the current folder's content, showing the changes made on the folder.
- */
-'Refresh' | 
-/**
- * Allows you to select one or more files or folders.
- */
-'Selection' | 
-/**
- * Allows you to change the way files and folders are displayed.
- */
-'View' | 
-/**
- * Allows you to see additional information about the files and folders, such as the size and date modified.
- */
-'Details';
-export declare type MenuItems = 
-/**
- * Allows you to quickly create a new folder
- */
-'NewFolder' | 
-/**
- * Allows you to quickly and easily upload files from your local computer.
- */
-'Upload' | 
-/**
- * Allows you to remove a file or folder from its current location and move it to a different location.
- */
-'Cut' | 
-/**
- * Allows you to create a duplicate of a file or folder and place it in a different location.
- */
-'Copy' | 
-/**
- * Allows you to place a previously cut or copied file or folder in a new location.
- */
-'Paste' | 
-/**
- * Allows you to remove a file or folder permanently.
- */
-'Delete' | 
-/**
- * Allows you to quickly and easily download files to your local computer.
- */
-'Download' | 
-/**
- * Allows you to change the name of a file or folder.
- */
-'Rename' | 
-/**
- * Allows you to sort files and folder by different criteria such as name, date, size, etc.
- */
-'SortBy' | 
-/**
- * Allows you to refresh the current folder's content, showing the changes made on the folder.
- */
-'Refresh' | 
-/**
- * Allows you to select all the files and folders in the current folder.
- */
-'SelectAll' | 
-/**
- * Allows you to change the way files and folders are displayed.
- */
-'View' | 
-/**
- * Allows you to see additional information about the files and folders, such as the size and date modified.
- */
-'Details' | 
-/**
- * Allows you to open the selected file or folder.
- */
-'Open';
+ * ```props
+ * NewFolder :- Allows you to quickly create a new folder.
+ * Upload :- Allows you to quickly and easily upload files from your local computer.
+ * Cut :- Allows you to remove a file or folder from its current location and move it to a different location.
+ * Copy :- Allows you to create a duplicate of a file or folder and place it in a different location.
+ * Paste :- Allows you to place a previously cut or copied file or folder in a new location.
+ * Delete :- Allows you to remove a file or folder permanently.
+ * Download :- Allows you to quickly and easily download files to your local computer.
+ * Rename :- Allows you to change the name of a file or folder.
+ * SortBy :- Allows you to sort files and folder by different criteria such as name, date, size, etc.
+ * Refresh :- Allows you to refresh the current folder's content, showing the changes made on the folder.
+ * Selection :- Allows you to select one or more files or folders.
+ * View :- Allows you to change the way files and folders are displayed.
+ * Details :- Allows you to see additional information about the files and folders, such as the size and date modified.
+ * ```
+ */
+export declare type ToolBarItems = 'NewFolder' | 'Upload' | 'Cut' | 'Copy' | 'Paste' | 'Delete' | 'Download' | 'Rename' | 'SortBy' | 'Refresh' | 'Selection' | 'View' | 'Details';
+/**
+ * ```props
+ * NewFolder :- Allows you to quickly create a new folder
+ * Upload :- Allows you to quickly and easily upload files from your local computer.
+ * Cut :- Allows you to remove a file or folder from its current location and move it to a different location.
+ * Copy :- Allows you to create a duplicate of a file or folder and place it in a different location.
+ * Paste :- Allows you to place a previously cut or copied file or folder in a new location.
+ * Delete :- Allows you to remove a file or folder permanently.
+ * Download :- Allows you to quickly and easily download files to your local computer.
+ * Rename :- Allows you to change the name of a file or folder.
+ * SortBy :- Allows you to sort files and folder by different criteria such as name, date, size, etc.
+ * Refresh :- Allows you to refresh the current folder's content, showing the changes made on the folder.
+ * SelectAll :- Allows you to select all the files and folders in the current folder.
+ * View :- Allows you to change the way files and folders are displayed.
+ * Details :- Allows you to see additional information about the files and folders, such as the size and date modified.
+ * Open :- Allows you to open the selected file or folder.
+ * ```
+ */
+export declare type MenuItems = 'NewFolder' | 'Upload' | 'Cut' | 'Copy' | 'Paste' | 'Delete' | 'Download' | 'Rename' | 'SortBy' | 'Refresh' | 'SelectAll' | 'View' | 'Details' | 'Open';
 /**
  * Interfaces for File Manager Toolbar items.
  */
@@ -619,6 +533,7 @@ export interface IFileManager extends Component<HTMLElement> {
     feFiles: Object[];
     ajaxSettings: AjaxSettingsModel;
     toolbarSettings: ToolbarSettingsModel;
+    detailsViewSettings: DetailsViewSettingsModel;
     dialogObj: Dialog;
     viewerObj: Dialog;
     extDialogObj: Dialog;
@@ -639,7 +554,6 @@ export interface IFileManager extends Component<HTMLElement> {
     breadcrumbbarModule: BreadCrumbBar;
     virtualizationModule: Virtualization;
     toolbarSelection: boolean;
-    detailsViewSettings: DetailsViewSettingsModel;
     duplicateItems: string[];
     duplicateRecords: Object[];
     fileAction: string;
@@ -661,6 +575,7 @@ export interface IFileManager extends Component<HTMLElement> {
     isBigger: boolean;
     isFile: boolean;
     allowMultiSelection: boolean;
+    showItemCheckBoxes: boolean;
     selectedItems: string[];
     layoutSelectedItems: string[];
     sortOrder: SortOrder;

package/src/file-manager/common/operations.js

@@ -1,4 +1,4 @@
-import { Ajax, createElement, select, extend } from '@syncfusion/ej2-base';
+import { Ajax, createElement, select, extend, Internationalization } from '@syncfusion/ej2-base';
 import { isNullOrUndefined as isNOU, setValue, getValue } from '@syncfusion/ej2-base';
 import * as events from '../base/constant';
 import { createDialog, createExtDialog } from '../pop-up/dialog';
@@ -156,6 +156,19 @@ export function GetDetails(parent, names, path, operation) {
  * @returns {void}
  * @private
  */
+function getDateFormat(parent) {
+    var columns = parent.detailsViewSettings.columns;
+    var dateFormat;
+    for (var i = 0; i < columns.length; i++) {
+        if (columns[i].field === '_fm_modified') {
+            if (!isNOU(columns[i].format)) {
+                dateFormat = columns[i].format.toString();
+            }
+            break;
+        }
+    }
+    return dateFormat;
+}
 function createAjax(
 // eslint-disable-next-line
 parent, data, fn, event, operation, targetPath) {
@@ -217,8 +230,9 @@ parent, data, fn, event, operation, targetPath) {
                             }
                         }
                     }
+                    var intl = new Internationalization(parent.locale);
                     if (!isNOU(result.files)) {
-                        setDateObject(result.files);
+                        setDateObject(result.files, intl, getDateFormat(parent));
                         for (var i = 0, len = result.files.length; i < len; i++) {
                             // eslint-disable-next-line
                             var item = result.files[i];

package/src/file-manager/common/utility.d.ts

@@ -1,5 +1,5 @@
 import { IFileManager, ReadArgs, SearchArgs } from '../base/interface';
-import { Draggable } from '@syncfusion/ej2-base';
+import { Draggable, Internationalization } from '@syncfusion/ej2-base';
 import { DragEventArgs } from '@syncfusion/ej2-base';
 import { MenuEventArgs } from '@syncfusion/ej2-navigations';
 /**
@@ -258,7 +258,7 @@ export declare function setNodeId(result: ReadArgs, rootId: string): void;
  * @returns {void}
  * @private
  */
-export declare function setDateObject(args: Object[]): void;
+export declare function setDateObject(args: Object[], localeString: Internationalization, dateFormat: string): void;
 /**
  * get the locale text
  *

package/src/file-manager/common/utility.js

@@ -645,10 +645,15 @@ export function setNodeId(result, rootId) {
  * @private
  */
 // eslint-disable-next-line
-export function setDateObject(args) {
+export function setDateObject(args, localeString, dateFormat) {
     for (var i = 0; i < args.length; i++) {
-        setValue('_fm_created', new Date(getValue('dateCreated', args[i])), args[i]);
-        setValue('_fm_modified', new Date(getValue('dateModified', args[i])), args[i]);
+        var createdDate = new Date(getValue('dateCreated', args[i]));
+        var modifiedDate = new Date(getValue('dateModified', args[i]));
+        if (isNOU(dateFormat)) {
+            dateFormat = "MM/dd/yyyy";
+        }
+        setValue('_fm_created', localeString.formatDate(createdDate, { format: dateFormat }), args[i]);
+        setValue('_fm_modified', localeString.formatDate(modifiedDate, { format: dateFormat }), args[i]);
     }
 }
 /**

package/src/file-manager/layout/details-view.js

@@ -1,7 +1,7 @@
 import { Grid, Resize, ContextMenu, Sort, VirtualScroll } from '@syncfusion/ej2-grids';
 import { select, KeyboardEvents, EventHandler, getValue, isNullOrUndefined } from '@syncfusion/ej2-base';
 import { isNullOrUndefined as isNOU, Touch, setValue, addClass, removeClass } from '@syncfusion/ej2-base';
-import { Internationalization, closest, Draggable } from '@syncfusion/ej2-base';
+import { Internationalization, closest, Draggable, initializeCSPTemplate, extend } from '@syncfusion/ej2-base';
 import { DataManager, Query } from '@syncfusion/ej2-data';
 import { hideSpinner, showSpinner } from '@syncfusion/ej2-popups';
 import * as events from '../base/constant';
@@ -192,13 +192,14 @@ var DetailsView = /** @class */ (function () {
             columns = [
                 {
                     field: 'name', headerText: getLocaleText(this.parent, 'Name'), width: 'auto', minWidth: 120, headerTextAlign: 'Left',
-                    template: '<div class="e-fe-text">${name}</div><div class="e-fe-date">${_fm_modified}</div>' +
-                        '<span class="e-fe-size">${size}</span>'
+                    template: initializeCSPTemplate(function (data) {
+                        return "<div class=\"e-fe-text\">" + data.name + "</div><div class=\"e-fe-date\">" + data._fm_modified + "</div>' +\n                        '<span class=\"e-fe-size\">" + data.size + "</span>";
+                    })
                 }
             ];
         }
         else {
-            columns = JSON.parse(JSON.stringify(this.parent.detailsViewSettings.columns));
+            columns = extend([], this.parent.detailsViewSettings.columns, null, true);
             this.adjustWidth(columns, 'name');
             for (var i = 0, len = columns.length; i < len; i++) {
                 columns[i].headerText = getLocaleText(this.parent, columns[i].headerText);
@@ -206,12 +207,16 @@ var DetailsView = /** @class */ (function () {
         }
         var iWidth = ((this.parent.isMobile || this.parent.isBigger) ? '54' : '46');
         var icon = {
-            field: 'type', width: iWidth, minWidth: iWidth, template: '<span class="e-fe-icon ${_fm_iconClass}"></span>',
-            allowResizing: false, allowSorting: true, customAttributes: { class: 'e-fe-grid-icon' },
-            headerTemplate: '<span class="e-fe-icon e-fe-folder"></span>'
+            field: 'type', width: iWidth, minWidth: iWidth,
+            template: initializeCSPTemplate(function (data) {
+                return "<span class=\"e-fe-icon " + data._fm_iconClass + "\"></span>";
+            }), allowResizing: false, allowSorting: true, customAttributes: { class: 'e-fe-grid-icon' },
+            headerTemplate: initializeCSPTemplate(function () {
+                return "<span class=\"e-fe-icon e-fe-folder\"></span>";
+            }),
         };
         columns.unshift(icon);
-        if (this.parent.allowMultiSelection) {
+        if (this.parent.showItemCheckBoxes) {
             var cWidth = (this.parent.isBigger ? '36' : '26');
             var cBox = {
                 type: 'checkbox', width: cWidth, minWidth: cWidth, customAttributes: { class: 'e-fe-checkbox' },
@@ -291,8 +296,6 @@ var DetailsView = /** @class */ (function () {
                     }
                 }
                 var value = intl.formatNumber((sizeValue / 1024), { format: sizeFormat });
-                var num = Number(value.replace(/,/g, ''));
-                value = num.toLocaleString(intl.culture);
                 modifiedSize = value + ' ' + getLocaleText(this.parent, 'KB');
             }
             sizeEle.innerHTML = modifiedSize;
@@ -1356,6 +1359,7 @@ var DetailsView = /** @class */ (function () {
         var lastItem;
         switch (action) {
             case 'altEnter':
+                this.parent.notify(events.detailsInit, {});
                 GetDetails(this.parent, this.parent.selectedItems, this.parent.path, 'details');
                 break;
             case 'esc':

package/src/file-manager/layout/large-icons-view.js

@@ -279,7 +279,7 @@ var LargeIconsView = /** @class */ (function () {
         this.parent.trigger('fileLoad', eventArgs);
     };
     LargeIconsView.prototype.renderCheckbox = function (args) {
-        if (!this.parent.allowMultiSelection) {
+        if (!this.parent.showItemCheckBoxes) {
             return;
         }
         var checkElement = createCheckBox(createElement, false, {
@@ -1342,7 +1342,7 @@ var LargeIconsView = /** @class */ (function () {
         item.focus();
     };
     LargeIconsView.prototype.checkState = function (item, toCheck) {
-        if (!this.parent.allowMultiSelection) {
+        if (!this.parent.showItemCheckBoxes) {
             return;
         }
         var checkEle = select('.' + CLS.FRAME, item);

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

@@ -202,7 +202,7 @@ var NavigationPane = /** @class */ (function () {
                     var selecEventArgs = { action: args.action, fileDetails: nodeData[0], isInteracted: args.isInteracted };
                     this.parent.trigger('fileSelect', selecEventArgs);
                 }
-                if (!this.isRightClick && args.node.getAttribute('data-uid') !== this.parent.pathId[this.parent.pathId.length - 1]) {
+                if (!this.isRightClick) {
                     var eventArgs = { cancel: false, fileDetails: nodeData[0], module: 'NavigationPane' };
                     this.parent.trigger('fileOpen', eventArgs);
                     args.cancel = eventArgs.cancel;

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

@@ -82,15 +82,17 @@ 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;
+    template?: string | Function;
 
     /**
      * 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.

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

@@ -110,14 +110,16 @@ 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;
+    template: string | Function;
     /**
      * 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.

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,27 @@ 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, isPrimaryKey: true,
-        template: '<span class="e-fe-text">${name}</span>', customAttributes: { class: 'e-fe-grid-name' }
+        template: initializeCSPTemplate(function (data) {
+            return "<span class=\"e-fe-text\">" + data.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>', format: 'n2'
+        field: 'size', headerText: 'Size', minWidth: 90, width: '110',
+        template: initializeCSPTemplate(function (data) {
+            return "<span class=\"e-fe-size\">" + data.size + "</span>";
+        }), format: 'n2'
     }
 ];
 /**

package/src/file-manager/models/search-settings.d.ts

@@ -1,20 +1,13 @@
 import { ChildProperty } from '@syncfusion/ej2-base';
 /**
  * Specifies the filter type for Search settings of the File Manager.
+ * ```props
+ * contains :- It will only show files and folders whose names contain the entered word.
+ * startsWith :- It will only show files and folders whose names start with entered word.
+ * endsWith :- It will only show files and folders whose names end with entered word.
+ * ```
  */
-export declare type FilterType = 
-/**
- * It will only show files and folders whose names contain the entered word.
- */
-'contains' | 
-/**
- * It will only show files and folders whose names start with entered word.
- */
-'startsWith' | 
-/**
- * It will only show files and folders whose names end with entered word.
- */
-'endsWith';
+export declare type FilterType = 'contains' | 'startsWith' | 'endsWith';
 /**
  * Specifies the Search settings of the File Manager.
  */

package/src/file-manager/pop-up/context-menu.js

@@ -243,9 +243,11 @@ var ContextMenu = /** @class */ (function () {
         this.menuType = 'folder';
         this.contextMenu.items = this.getItemData(this.parent.contextMenuSettings.folder.map(function (item) { return item.trim(); }));
         this.contextMenu.dataBind();
-        var selectedTreeNode = select('[data-uid="' + this.parent.navigationpaneModule.treeObj.selectedNodes[0] + '"]', this.parent.navigationpaneModule.treeObj.element);
-        if (this.parent.pathNames[this.parent.pathNames.length - 1] === selectedTreeNode.querySelector('.e-list-text').innerHTML && this.parent.activeModule === 'navigationpane') {
-            this.disabledItems.push('Open');
+        if (isTree) {
+            var selectedTreeNode = select('[data-uid="' + this.parent.navigationpaneModule.treeObj.selectedNodes[0] + '"]', this.parent.navigationpaneModule.treeObj.element);
+            if (this.parent.pathNames[this.parent.pathNames.length - 1] === selectedTreeNode.querySelector('.e-list-text').innerHTML && this.parent.activeModule === 'navigationpane') {
+                this.disabledItems.push('Open');
+            }
         }
         else if (this.parent.selectedItems.length !== 1 && this.parent.activeModule !== 'navigationpane') {
             this.disabledItems.push('Rename', 'Paste');

package/src/file-manager/pop-up/dialog.js

@@ -843,6 +843,7 @@ function onReSubmit(parent) {
     var newPath = (parent.activeModule === 'navigationpane') ? getValue('filterPath', parent.itemData[0]).replace(/\\/g, '/') : parent.path;
     parent.renamedId = getValue('id', parent.itemData[0]);
     parent.renamedId = getValue('id', parent.itemData[0]);
+    parent.renamedId = getValue('id', parent.itemData[0]);
     if (parent.isFile) {
         var oldExtension = (oIndex === -1) ? '' : parent.currentItemText.substr(oIndex);
         var nIndex = text.lastIndexOf('.');