@syncfusion/ej2-filemanager 24.2.7 → 25.1.37

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 24.2.7
+*  version : 25.1.37
 *  Copyright Syncfusion Inc. 2001 - 2023. 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@24.2.5",
+  "_id": "@syncfusion/ej2-filemanager@25.1.35",
   "_inBundle": false,
-  "_integrity": "sha512-zyDF9WT2RgiRsPQv58YT6i8DMm09kAWaYSYq0lNqU24nQU4rH0YuoUCDgL8l7HzL7NXxS3vS3V9+yni/LfzP6w==",
+  "_integrity": "sha512-fol9PiIpPBAFMKP+iA/DG0Iw5IyqiQvbqbu69lxzxpnZluacXS8A4p22RCJtkYI/UlMzhw6R0Aex8TWl8ljyIg==",
   "_location": "/@syncfusion/ej2-filemanager",
   "_phantomChildren": {},
   "_requested": {
@@ -24,10 +24,10 @@
     "/@syncfusion/ej2-richtexteditor",
     "/@syncfusion/ej2-vue-filemanager"
   ],
-  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-filemanager/-/ej2-filemanager-24.2.5.tgz",
-  "_shasum": "700c84f2f80033aef46aef2b0a5f1ac0b1d31dbf",
+  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-filemanager/-/ej2-filemanager-25.1.35.tgz",
+  "_shasum": "0f8510ce10d04284efa670551e2181a2a48307e7",
   "_spec": "@syncfusion/ej2-filemanager@*",
-  "_where": "/jenkins/workspace/elease-automation_release_24.1.1/packages/included",
+  "_where": "/jenkins/workspace/elease-automation_release_25.1.1/packages/included",
   "author": {
     "name": "Syncfusion Inc."
   },
@@ -36,16 +36,16 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~24.2.7",
-    "@syncfusion/ej2-buttons": "~24.2.7",
-    "@syncfusion/ej2-data": "~24.2.3",
-    "@syncfusion/ej2-grids": "~24.2.7",
-    "@syncfusion/ej2-inputs": "~24.2.7",
-    "@syncfusion/ej2-layouts": "~24.2.4",
-    "@syncfusion/ej2-lists": "~24.2.4",
-    "@syncfusion/ej2-navigations": "~24.2.4",
-    "@syncfusion/ej2-popups": "~24.2.5",
-    "@syncfusion/ej2-splitbuttons": "~24.2.7"
+    "@syncfusion/ej2-base": "~25.1.35",
+    "@syncfusion/ej2-buttons": "~25.1.35",
+    "@syncfusion/ej2-data": "~25.1.35",
+    "@syncfusion/ej2-grids": "~25.1.37",
+    "@syncfusion/ej2-inputs": "~25.1.37",
+    "@syncfusion/ej2-layouts": "~25.1.37",
+    "@syncfusion/ej2-lists": "~25.1.35",
+    "@syncfusion/ej2-navigations": "~25.1.37",
+    "@syncfusion/ej2-popups": "~25.1.35",
+    "@syncfusion/ej2-splitbuttons": "~25.1.37"
   },
   "deprecated": false,
   "description": "Essential JS 2 FileManager Component",
@@ -75,6 +75,6 @@
     "url": "git+https://github.com/syncfusion/ej2-javascript-ui-controls.git"
   },
   "typings": "index.d.ts",
-  "version": "24.2.7",
+  "version": "25.1.37",
   "sideEffects": false
 }

package/src/file-manager/actions/toolbar.js

@@ -167,6 +167,7 @@ var Toolbar = /** @class */ (function () {
         });
     };
     Toolbar.prototype.toolbarCreateHandler = function () {
+        var _this = this;
         if (!isNOU(select('#' + this.getId('SortBy'), this.parent.element))) {
             var items = [
                 { id: this.getPupupId('name'), text: getLocaleText(this.parent, 'Name'),
@@ -193,15 +194,15 @@ var Toolbar = /** @class */ (function () {
             this.buttonObj.appendTo('#' + this.getId('SortBy'));
         }
         if (!isNOU(select('#' + this.getId('View'), this.parent.element))) {
-            var gridSpan = '<span class="' + CLS.ICON_GRID + ' ' + CLS.MENU_ICON + '"></span>';
-            var largeIconSpan = '<span class="' + CLS.ICON_LARGE + ' ' + CLS.MENU_ICON + '"></span>';
+            var gridSpan_1 = '<span class="' + CLS.ICON_GRID + ' ' + CLS.MENU_ICON + '"></span>';
+            var largeIconSpan_1 = '<span class="' + CLS.ICON_LARGE + ' ' + CLS.MENU_ICON + '"></span>';
             var layoutItems = [
                 {
-                    id: this.getPupupId('large'), text: largeIconSpan + getLocaleText(this.parent, 'View-LargeIcons'),
+                    id: this.getPupupId('large'), text: getLocaleText(this.parent, 'View-LargeIcons'),
                     iconCss: this.parent.view === 'Details' ? '' : CLS.TB_OPTION_TICK
                 },
                 {
-                    id: this.getPupupId('details'), text: gridSpan + getLocaleText(this.parent, 'View-Details'),
+                    id: this.getPupupId('details'), text: getLocaleText(this.parent, 'View-Details'),
                     iconCss: this.parent.view === 'Details' ? CLS.TB_OPTION_TICK : ''
                 }
             ];
@@ -210,7 +211,17 @@ var Toolbar = /** @class */ (function () {
                 cssClass: getCssClass(this.parent, 'e-caret-hide ' + CLS.ROOT_POPUP),
                 items: layoutItems, select: this.layoutChange.bind(this),
                 enableRtl: this.parent.enableRtl,
-                content: '<span class="e-tbar-btn-text">' + getLocaleText(this.parent, 'View') + '</span>'
+                content: '<span class="e-tbar-btn-text">' + getLocaleText(this.parent, 'View') + '</span>',
+                beforeItemRender: function (args) {
+                    var tickIcon = args.item.iconCss;
+                    var viewText = args.item.text === getLocaleText(_this.parent, 'View-LargeIcons');
+                    var iconClass = tickIcon ? ' e-menu-icon ' + tickIcon : '';
+                    args.element.innerHTML = '<span class="' + iconClass + '"></span>' + (viewText ? largeIconSpan_1 : gridSpan_1) + args.item.text;
+                    var span = args.element.firstChild;
+                    if (span && span.className === '') {
+                        args.element.removeChild(span);
+                    }
+                }
             });
             this.layoutBtnObj.isStringTemplate = true;
             this.layoutBtnObj.appendTo('#' + this.getId('View'));

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

@@ -1,4 +1,4 @@
-import { Component, EmitType, ModuleDeclaration, isNullOrUndefined, L10n, closest, Collection } from '@syncfusion/ej2-base';import { Property, INotifyPropertyChanged, NotifyPropertyChanges, Complex, select } from '@syncfusion/ej2-base';import { createElement, addClass, removeClass, setStyleAttribute as setAttr, getUniqueID } from '@syncfusion/ej2-base';import { isNullOrUndefined as isNOU, formatUnit, Browser, KeyboardEvents, KeyboardEventArgs } from '@syncfusion/ej2-base';import { Event, EventHandler, getValue, setValue } from '@syncfusion/ej2-base';import { Splitter, PanePropertiesModel } from '@syncfusion/ej2-layouts';import { Dialog, createSpinner, hideSpinner, showSpinner, BeforeOpenEventArgs, BeforeCloseEventArgs } from '@syncfusion/ej2-popups';import { createDialog, createExtDialog } from '../pop-up/dialog';import { ToolbarSettings, ToolbarSettingsModel, AjaxSettings, NavigationPaneSettings, DetailsViewSettings } from '../models/index';import { ToolbarItem, ToolbarItemModel } from'../models/index' ;import { NavigationPaneSettingsModel, DetailsViewSettingsModel } from '../models/index';import { AjaxSettingsModel, SearchSettings, SearchSettingsModel } from '../models/index';import { Toolbar } from '../actions/toolbar';import { DetailsView } from '../layout/details-view';import { LargeIconsView } from '../layout/large-icons-view';import { Uploader, UploadingEventArgs, SelectedEventArgs, FileInfo, CancelEventArgs } from '@syncfusion/ej2-inputs';import { UploadSettingsModel } from '../models/upload-settings-model';import { UploadSettings } from '../models/upload-settings';import * as events from './constant';import * as CLS from './classes';import { read, filter, createFolder } from '../common/operations';import { ITreeView, IContextMenu, ViewType, SortOrder, FileDragEventArgs, RetryArgs, ReadArgs, FileSelectionEventArgs } from './interface';import { BeforeSendEventArgs, SuccessEventArgs, FailureEventArgs, FileLoadEventArgs } from './interface';import { FileOpenEventArgs, FileSelectEventArgs, MenuClickEventArgs, MenuOpenEventArgs } from './interface';import { ToolbarClickEventArgs, ToolbarCreateEventArgs, UploadListCreateArgs } from './interface';import { PopupOpenCloseEventArgs, BeforePopupOpenCloseEventArgs, BeforeDownloadEventArgs, BeforeImageLoadEventArgs } from './interface';import { refresh, getPathObject, getLocaleText, setNextPath, createDeniedDialog, getCssClass } from '../common/utility';import { hasContentAccess, hasUploadAccess, updateLayout, createNewFolder, uploadItem } from '../common/utility';import { TreeView as BaseTreeView } from '@syncfusion/ej2-navigations';import { ContextMenuSettingsModel } from '../models/contextMenu-settings-model';import { ContextMenuSettings } from '../models/contextMenu-settings';import { BreadCrumbBar } from '../actions/breadcrumb-bar';import { ContextMenu } from '../pop-up/context-menu';import { defaultLocale } from '../models/default-locale';import { PositionModel } from '@syncfusion/ej2-base/src/draggable-model';import { Virtualization } from '../actions/virtualization';
+import { Component, EmitType, ModuleDeclaration, isNullOrUndefined, L10n, closest, Collection } from '@syncfusion/ej2-base';import { Property, INotifyPropertyChanged, NotifyPropertyChanges, Complex, select } from '@syncfusion/ej2-base';import { createElement, addClass, removeClass, setStyleAttribute as setAttr, getUniqueID } from '@syncfusion/ej2-base';import { isNullOrUndefined as isNOU, formatUnit, Browser, KeyboardEvents, KeyboardEventArgs } from '@syncfusion/ej2-base';import { Event, EventHandler, getValue, setValue } from '@syncfusion/ej2-base';import { Splitter, PanePropertiesModel } from '@syncfusion/ej2-layouts';import { Dialog, createSpinner, hideSpinner, showSpinner, BeforeOpenEventArgs, BeforeCloseEventArgs } from '@syncfusion/ej2-popups';import { createDialog, createExtDialog } from '../pop-up/dialog';import { ToolbarSettings, ToolbarSettingsModel, AjaxSettings, NavigationPaneSettings, DetailsViewSettings } from '../models/index';import { ToolbarItem, ToolbarItemModel } from'../models/index' ;import { NavigationPaneSettingsModel, DetailsViewSettingsModel } from '../models/index';import { AjaxSettingsModel, SearchSettings, SearchSettingsModel } from '../models/index';import { Toolbar } from '../actions/toolbar';import { DetailsView } from '../layout/details-view';import { LargeIconsView } from '../layout/large-icons-view';import { Uploader, UploadingEventArgs, SelectedEventArgs, FileInfo, CancelEventArgs } from '@syncfusion/ej2-inputs';import { UploadSettingsModel } from '../models/upload-settings-model';import { UploadSettings } from '../models/upload-settings';import * as events from './constant';import * as CLS from './classes';import { read, filter, createFolder } from '../common/operations';import { ITreeView, IContextMenu, ViewType, SortOrder, FileDragEventArgs, RetryArgs, ReadArgs, FileSelectionEventArgs } from './interface';import { BeforeSendEventArgs, SuccessEventArgs, FailureEventArgs, FileLoadEventArgs } from './interface';import { FileOpenEventArgs, FileSelectEventArgs, MenuClickEventArgs, MenuOpenEventArgs } from './interface';import { ToolbarClickEventArgs, ToolbarCreateEventArgs, UploadListCreateArgs } from './interface';import { PopupOpenCloseEventArgs, BeforePopupOpenCloseEventArgs, BeforeDownloadEventArgs, BeforeImageLoadEventArgs } from './interface';import { refresh, getPathObject, getLocaleText, setNextPath, createDeniedDialog, getCssClass } from '../common/utility';import { hasContentAccess, hasUploadAccess, updateLayout, createNewFolder, uploadItem } from '../common/utility';import { TreeView as BaseTreeView } from '@syncfusion/ej2-navigations';import { ContextMenuSettingsModel } from '../models/contextMenu-settings-model';import { ContextMenuSettings } from '../models/contextMenu-settings';import { BreadCrumbBar } from '../actions/breadcrumb-bar';import { ContextMenu } from '../pop-up/context-menu';import { defaultLocale } from '../models/default-locale';import { PositionModel } from '@syncfusion/ej2-base/src/draggable-model';import { Virtualization } from '../actions/virtualization';import { SortComparer } from './interface';
 import {ComponentModel} from '@syncfusion/ej2-base';
 
 /**
@@ -206,6 +206,17 @@ export interface FileManagerModel extends ComponentModel{
      */
     sortBy?: string;
 
+    /**
+     * Defines the custom sorting 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.
+     * This can be used to customize the default sorting functionalities with required comparison values.
+     * 
+     * @default null
+     * @aspType string
+     */
+    sortComparer?: SortComparer | string;
+
     /**
      * Specifies the group of items aligned horizontally in the toolbar.
      *

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

@@ -22,6 +22,7 @@ import { ContextMenuSettingsModel } from '../models/contextMenu-settings-model';
 import { BreadCrumbBar } from '../actions/breadcrumb-bar';
 import { PositionModel } from '@syncfusion/ej2-base/src/draggable-model';
 import { Virtualization } from '../actions/virtualization';
+import { SortComparer } from './interface';
 /**
  * The FileManager component allows users to access and manage the file system through the web  browser. It can performs the
  * functionalities like add, rename, search, sort, upload and delete files or folders. And also it
@@ -325,6 +326,16 @@ export declare class FileManager extends Component<HTMLElement> implements INoti
      * @default 'name'
      */
     sortBy: string;
+    /**
+     * Defines the custom sorting 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.
+     * This can be used to customize the default sorting functionalities with required comparison values.
+     *
+     * @default null
+     * @aspType string
+     */
+    sortComparer: SortComparer | string;
     /**
      * Specifies the group of items aligned horizontally in the toolbar.
      *

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

@@ -179,31 +179,36 @@ var FileManager = /** @class */ (function (_super) {
         if (this.toolbarSettings.visible) {
             modules.push({
                 member: 'toolbar',
-                args: [this]
+                args: [this],
+                name: 'Toolbar'
             });
         }
         if (this.navigationPaneSettings.visible) {
             modules.push({
                 member: 'navigationpane',
-                args: [this]
+                args: [this],
+                name: 'NavigationPane'
             });
         }
         if (this.view) {
             modules.push({
                 member: 'detailsview',
-                args: [this]
+                args: [this],
+                name: 'DetailsView'
             });
         }
         if (this.contextMenuSettings.visible && !this.isDevice) {
             modules.push({
                 member: 'contextmenu',
-                args: [this]
+                args: [this],
+                name: 'ContextMenu'
             });
         }
         if (this.enableVirtualization) {
             modules.push({
                 member: 'virtualization',
-                args: [this]
+                args: [this],
+                name: 'Virtualization'
             });
         }
         return modules;
@@ -1216,6 +1221,9 @@ var FileManager = /** @class */ (function (_super) {
     __decorate([
         Property('name')
     ], FileManager.prototype, "sortBy", void 0);
+    __decorate([
+        Property(null)
+    ], FileManager.prototype, "sortComparer", void 0);
     __decorate([
         Complex({}, ToolbarSettings)
     ], FileManager.prototype, "toolbarSettings", void 0);

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

@@ -14,6 +14,15 @@ import { NavigationPaneSettingsModel } from '../models/navigation-pane-settings-
 import { Uploader } from '@syncfusion/ej2-inputs';
 import { BreadCrumbBar, Virtualization } from '../actions';
 import { PositionModel } from '@syncfusion/ej2-base/src/draggable-model';
+/**
+ * ValueType is a type that can be a number, string, Date, or boolean.
+ */
+export declare type ValueType = number | string | Date | boolean;
+/**
+ * SortComparer is a function type that takes two ValueType arguments and returns a number.
+ * The function is used for comparing two values for sorting purposes.
+ */
+export declare type SortComparer = (x: ValueType, y: ValueType) => number;
 /**
  * Defines the view type of the FileManager.
  * ```props
@@ -212,6 +221,14 @@ export interface BeforeDownloadEventArgs {
      * If you want to cancel this event then, set cancel to true. Otherwise, false.
      */
     cancel?: boolean;
+    /**
+    * Return the AJAX details, which are send to server.
+    */
+    ajaxSettings?: Object;
+    /**
+     * Specifies whether the download is performed through the form submit method or using an HTTP client instance.
+     */
+    useFormPost?: boolean;
 }
 /**
  * Interface for BeforeImageLoad event arguments.
@@ -581,6 +598,7 @@ export interface IFileManager extends Component<HTMLElement> {
     layoutSelectedItems: string[];
     sortOrder: SortOrder;
     sortBy: string;
+    sortComparer: SortComparer | string;
     actionRecords: Object[];
     activeRecords: Object[];
     pasteNodes: string[];

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

@@ -1,4 +1,4 @@
-import { Ajax, createElement, select, extend, Internationalization } from '@syncfusion/ej2-base';
+import { Ajax, Fetch, 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';
@@ -625,21 +625,77 @@ export function Download(parent, path, items) {
     var downloadUrl = parent.ajaxSettings.downloadUrl ? parent.ajaxSettings.downloadUrl : parent.ajaxSettings.url;
     // eslint-disable-next-line
     var data = { 'action': 'download', 'path': path, 'names': items, 'data': parent.itemData };
-    var eventArgs = { data: data, cancel: false };
+    var ajaxSettings = {
+        url: downloadUrl,
+        type: 'POST',
+        contentType: 'application/json',
+        responseType: 'blob',
+        data: JSON.stringify(data),
+        onSuccess: null,
+        onFailure: null,
+        beforeSend: null
+    };
+    var eventArgs = { data: data, cancel: false, useFormPost: true, ajaxSettings: ajaxSettings };
     parent.trigger('beforeDownload', eventArgs, function (downloadArgs) {
         if (!downloadArgs.cancel) {
-            var form = createElement('form', {
-                id: parent.element.id + '_downloadForm',
-                attrs: { action: downloadUrl, method: 'post', name: 'downloadForm', 'download': '' }
-            });
-            var input = createElement('input', {
-                id: parent.element.id + '_hiddenForm',
-                attrs: { name: 'downloadInput', value: JSON.stringify(downloadArgs.data), type: 'hidden' }
-            });
-            form.appendChild(input);
-            parent.element.appendChild(form);
-            document.forms.namedItem('downloadForm').submit();
-            parent.element.removeChild(form);
+            if (downloadArgs.useFormPost) {
+                var form = createElement('form', {
+                    id: parent.element.id + '_downloadForm',
+                    attrs: { action: downloadUrl, method: 'post', name: 'downloadForm', 'download': '' }
+                });
+                var input = createElement('input', {
+                    id: parent.element.id + '_hiddenForm',
+                    attrs: { name: 'downloadInput', value: JSON.stringify(downloadArgs.data), type: 'hidden' }
+                });
+                form.appendChild(input);
+                parent.element.appendChild(form);
+                document.forms.namedItem('downloadForm').submit();
+                parent.element.removeChild(form);
+            }
+            else {
+                var contentDisposition_1;
+                var fileName_1;
+                var fetch_1 = new Fetch({
+                    url: getValue('url', downloadArgs.ajaxSettings),
+                    type: getValue('type', downloadArgs.ajaxSettings),
+                    contentType: getValue('contentType', downloadArgs.ajaxSettings),
+                    responseType: getValue('responseType', downloadArgs.ajaxSettings),
+                    beforeSend: getValue('beforeSend', downloadArgs.ajaxSettings),
+                    onLoad: function (e) {
+                        contentDisposition_1 = e.headers.get('Content-Disposition');
+                        if (contentDisposition_1) {
+                            var filenameMatch = contentDisposition_1.match(/filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/);
+                            var extractedFilename = filenameMatch && filenameMatch[1];
+                            fileName_1 = extractedFilename ? extractedFilename.replace(/['"]/g, '') : fileName_1;
+                        }
+                        else {
+                            fileName_1 = parent.itemData.length > 1 ? 'files.zip' : getValue('isFile', parent.itemData[0]) ? getValue('name', parent.itemData[0]) : getValue('name', parent.itemData[0]) + '.zip';
+                        }
+                    },
+                    onSuccess: function (e) {
+                        parent.trigger('success', downloadArgs);
+                        var blob = e;
+                        var blobUrl = URL.createObjectURL(blob);
+                        var link = document.createElement('a');
+                        link.href = blobUrl;
+                        link.download = fileName_1;
+                        document.body.appendChild(link);
+                        link.click();
+                        document.body.removeChild(link);
+                    },
+                    onFailure: function (e) {
+                        var result = {
+                            error: {
+                                code: e.status.toString(),
+                                message: getLocaleText(parent, 'Network-Error') + ' ' + parent.ajaxSettings.downloadUrl,
+                            },
+                        };
+                        createDialog(parent, 'Error', result);
+                        parent.trigger('failure', downloadArgs);
+                    },
+                });
+                fetch_1.send(JSON.stringify(downloadArgs.data));
+            }
         }
     });
 }

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

@@ -2,6 +2,15 @@ import { IFileManager, ReadArgs, SearchArgs } from '../base/interface';
 import { Draggable, Internationalization } from '@syncfusion/ej2-base';
 import { DragEventArgs } from '@syncfusion/ej2-base';
 import { MenuEventArgs } from '@syncfusion/ej2-navigations';
+/**
+ * Utility function to compare two strings in a way similar to Windows Explorer.
+ * Files and folders are sorted separately, with folders coming before files.
+ *
+ * @param {string} reference - The first string to compare. This could be a file or folder name.
+ * @param {string} comparer - The second string to compare. This could be a file or folder name.
+ * @returns {number} - A negative number if `reference` should come before `comparer`, a positive number if `comparer` should come before `reference`, and 0 if they are considered equal.
+ */
+export declare function sortComparer(reference: string, comparer: string): number;
 /**
  * Utility file for common actions
  *

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

@@ -5,6 +5,38 @@ import { getValue, setValue, isNullOrUndefined as isNOU, matches, select, create
 import { closest, detach } from '@syncfusion/ej2-base';
 import { DataManager, Query } from '@syncfusion/ej2-data';
 import { createDialog } from '../pop-up/dialog';
+/**
+ * Utility function to compare two strings in a way similar to Windows Explorer.
+ * Files and folders are sorted separately, with folders coming before files.
+ *
+ * @param {string} reference - The first string to compare. This could be a file or folder name.
+ * @param {string} comparer - The second string to compare. This could be a file or folder name.
+ * @returns {number} - A negative number if `reference` should come before `comparer`, a positive number if `comparer` should come before `reference`, and 0 if they are considered equal.
+ */
+export function sortComparer(reference, comparer) {
+    // Check if reference and comparer are files or folders
+    var referenceIsFile = /\.\S+/.test(reference);
+    var comparerIsFile = /\.\S+/.test(comparer);
+    // If one is a file and the other is a folder, the folder should come first
+    if (referenceIsFile && !comparerIsFile)
+        return 1;
+    if (!referenceIsFile && comparerIsFile)
+        return -1;
+    var referenceParts = [];
+    var comparerParts = [];
+    (reference + '').replace(/(\d+)|(\D+)/g, function (_, $1, $2) { referenceParts.push([$1 || Infinity, $2 || ""]); return ""; });
+    (comparer + '').replace(/(\d+)|(\D+)/g, function (_, $1, $2) { comparerParts.push([$1 || Infinity, $2 || ""]); return ""; });
+    // Compare each part of reference and comparer
+    while (referenceParts.length && comparerParts.length) {
+        var referencePart = referenceParts.shift();
+        var comparerPart = comparerParts.shift();
+        var comparisonResult = referencePart[0] - comparerPart[0] ||
+            referencePart[1].localeCompare(comparerPart[1]);
+        if (comparisonResult)
+            return comparisonResult;
+    }
+    return referenceParts.length - comparerParts.length;
+}
 /**
  * Utility file for common actions
  *

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

@@ -6,3 +6,4 @@ export * from './base';
 export * from './actions';
 export * from './layout';
 export * from './pop-up';
+export * from './common';

package/src/file-manager/index.js

@@ -6,3 +6,4 @@ export * from './base';
 export * from './actions';
 export * from './layout';
 export * from './pop-up';
+export * from './common';

package/src/file-manager/layout/details-view.d.ts

@@ -121,9 +121,9 @@ export declare class DetailsView {
     private wireClickEvent;
     private removeSelection;
     private removeFocus;
+    private onBlur;
     private getFocusedItemIndex;
     private keydownHandler;
-    actionDivert: boolean;
     private keyupHandler;
     gridSelectNodes(): Object[];
     private doDownload;

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, initializeCSPTemplate, extend } from '@syncfusion/ej2-base';
+import { Internationalization, closest, Draggable, initializeCSPTemplate, extend, SanitizeHtmlHelper } from '@syncfusion/ej2-base';
 import { DataManager, Query } from '@syncfusion/ej2-data';
 import { hideSpinner, showSpinner } from '@syncfusion/ej2-popups';
 import * as events from '../base/constant';
@@ -40,9 +40,6 @@ var DetailsView = /** @class */ (function () {
         this.isNameWidth = false;
         this.pasteOperation = false;
         this.uploadOperation = false;
-        /* istanbul ignore next */
-        // eslint:disable-next-line
-        this.actionDivert = false;
         Grid.Inject(Resize, ContextMenu, Sort, VirtualScroll);
         this.parent = parent;
         this.element = select('#' + this.parent.element.id + CLS.GRID_ID, this.parent.element);
@@ -203,12 +200,14 @@ var DetailsView = /** @class */ (function () {
     };
     DetailsView.prototype.getColumns = function () {
         var columns;
+        var enableHtmlSanitizer = this.parent.enableHtmlSanitizer;
         if (this.parent.isMobile) {
             columns = [
                 {
                     field: 'name', headerText: getLocaleText(this.parent, 'Name'), width: 'auto', minWidth: 120, headerTextAlign: 'Left',
                     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>";
+                        var name = enableHtmlSanitizer ? SanitizeHtmlHelper.sanitize(data.name) : data.name;
+                        return "<div class=\"e-fe-text\">" + name + "</div><div class=\"e-fe-date\">" + data._fm_modified + "</div>' +\n                        '<span class=\"e-fe-size\">" + data.size + "</span>";
                     })
                 }
             ];
@@ -216,8 +215,19 @@ var DetailsView = /** @class */ (function () {
         else {
             columns = extend([], this.parent.detailsViewSettings.columns, null, true);
             this.adjustWidth(columns, 'name');
+            var _loop_1 = function (i, len) {
+                columns[i].headerText = getLocaleText(this_1.parent, columns[i].headerText);
+                if (columns[i].field === 'name' && !isNOU(columns[i].template) && !(typeof columns[i].template === 'function')) {
+                    var template_1 = columns[i].template;
+                    columns[i].template = initializeCSPTemplate(function (data) {
+                        var name = enableHtmlSanitizer ? SanitizeHtmlHelper.sanitize(data.name) : data.name;
+                        return template_1.replace(/\${name}/g, name);
+                    });
+                }
+            };
+            var this_1 = this;
             for (var i = 0, len = columns.length; i < len; i++) {
-                columns[i].headerText = getLocaleText(this.parent, columns[i].headerText);
+                _loop_1(i, len);
             }
         }
         var iWidth = ((this.parent.isMobile || this.parent.isBigger) ? '54' : '46');
@@ -372,10 +382,14 @@ var DetailsView = /** @class */ (function () {
         }
     };
     DetailsView.prototype.onBeforeDataBound = function (args) {
+        var _this = this;
         showSpinner(this.parent.element);
-        // eslint-disable-next-line
-        var items = getSortedData(this.parent, (this.parent.enableVirtualization) ? args.result : this.gridObj.dataSource);
-        args.result = items;
+        var nameColumn = this.parent.detailsViewSettings.columns.find(function (column) { return column.field === _this.parent.sortBy; });
+        if (nameColumn && !('sortComparer' in nameColumn)) {
+            // eslint-disable-next-line
+            var items = getSortedData(this.parent, (this.parent.enableVirtualization) ? args.result : this.gridObj.dataSource);
+            args.result = items;
+        }
     };
     /* istanbul ignore next */
     DetailsView.prototype.onDataBound = function () {
@@ -1254,12 +1268,14 @@ var DetailsView = /** @class */ (function () {
             eventName: 'keydown'
         });
         EventHandler.add(this.gridObj.element, 'blur', this.removeFocus, this);
+        EventHandler.add(this.parent.element, 'focusout', this.onBlur, this);
     };
     DetailsView.prototype.unWireEvents = function () {
         this.wireClickEvent(false);
         this.keyboardModule.destroy();
         this.keyboardDownModule.destroy();
         EventHandler.remove(this.gridObj.element, 'blur', this.removeFocus);
+        EventHandler.remove(this.parent.element, 'focusout', this.onBlur);
     };
     DetailsView.prototype.wireClickEvent = function (toBind) {
         if (toBind) {
@@ -1309,6 +1325,19 @@ var DetailsView = /** @class */ (function () {
     DetailsView.prototype.removeFocus = function () {
         this.addFocus(null);
     };
+    DetailsView.prototype.onBlur = function (e) {
+        if ((e.relatedTarget !== null && closest(e.relatedTarget, '.e-grid') !== e.relatedTarget)) {
+            return;
+        }
+        if (!isNOU(this.gridObj.element)) {
+            var thElements = this.gridObj.element.querySelectorAll('th');
+            for (var i = 0; i < thElements.length; i++) {
+                if (thElements[i].classList.contains('e-focus')) {
+                    this.addFocus(null);
+                }
+            }
+        }
+    };
     DetailsView.prototype.getFocusedItemIndex = function () {
         return (!isNOU(this.getFocusedItem())) ?
             parseInt(this.getFocusedItem().getAttribute('data-rowindex'), 10) : null;
@@ -1357,6 +1386,8 @@ var DetailsView = /** @class */ (function () {
                 break;
         }
     };
+    /* istanbul ignore next */
+    // eslint:disable-next-line
     DetailsView.prototype.keyupHandler = function (e) {
         if (!this.isRendered) {
             return;
@@ -1387,7 +1418,15 @@ var DetailsView = /** @class */ (function () {
                 this.performDelete();
                 break;
             case 'enter':
-                if (this.gridObj.selectedRowIndex === -1) {
+                if (this.gridObj.selectedRowIndex === -1 && this.gridObj.allowSorting === true) {
+                    if (!e.target.classList.contains('e-fe-grid-icon')) {
+                        var direction = !e.target.getElementsByClassName('e-ascending').length ? 'Ascending' : 'Descending';
+                        var currentField = this.gridObj.getColumnByUid(e.target.querySelector('.e-headercelldiv').getAttribute('e-mappinguid')).field;
+                        this.gridObj.sortColumn(currentField, direction);
+                        if (!isNOU(this.getFocusedItem().nextSibling)) {
+                            this.getFocusedItem().nextSibling.setAttribute('tabindex', '0');
+                        }
+                    }
                     break;
                 }
                 rowData = this.gridObj.getRowsObject()[this.gridObj.selectedRowIndex].data;
@@ -1434,13 +1473,8 @@ var DetailsView = /** @class */ (function () {
                     else if (this.gridObj.selectedRowIndex !== -1 && e.action === 'tab') {
                         return;
                     }
-                    else if (!this.actionDivert) {
-                        this.addHeaderFocus();
-                        this.actionDivert = true;
-                    }
                     else {
-                        this.addFocus(0);
-                        this.actionDivert = false;
+                        this.addHeaderFocus(e);
                     }
                 }
                 break;
@@ -1727,16 +1761,29 @@ var DetailsView = /** @class */ (function () {
             addClass([itemElement], [CLS.FOCUS, CLS.FOCUSED]);
         }
     };
-    DetailsView.prototype.addHeaderFocus = function () {
+    DetailsView.prototype.addHeaderFocus = function (e) {
         var treeFocus = select('.e-row', this.element);
         this.gridObj.element.setAttribute('tabindex', '-1');
-        var nameFocus = select('th.e-fe-grid-name', this.element);
-        nameFocus.setAttribute('tabindex', '0');
-        nameFocus.focus();
-        addClass([nameFocus], [CLS.FOCUS, CLS.FOCUSED]);
-        treeFocus.setAttribute('tabindex', '0');
-        if (treeFocus.tabIndex === 0 && nameFocus.tabIndex === 0) {
-            removeClass([treeFocus], [CLS.FOCUS, CLS.FOCUSED]);
+        var nameFocus;
+        if (!isNOU(e.target) && e.target.classList.contains('e-defaultcursor')) {
+            this.addFocus(0);
+            nameFocus = e.target.nextElementSibling;
+        }
+        else if (!isNOU(this.gridObj.element.querySelector('.e-focus')) && (this.gridObj.element.querySelector('.e-focus').tagName === 'TH')) {
+            nameFocus = this.gridObj.element.querySelector('.e-focus').nextElementSibling;
+            this.addFocus(0);
+        }
+        else {
+            nameFocus = select('th.e-fe-grid-icon', this.element);
+        }
+        if (!isNOU(nameFocus)) {
+            nameFocus.setAttribute('tabindex', '0');
+            nameFocus.focus();
+            addClass([nameFocus], [CLS.FOCUS, CLS.FOCUSED]);
+            treeFocus.setAttribute('tabindex', '0');
+            if (treeFocus.tabIndex === 0 && nameFocus.tabIndex === 0) {
+                removeClass([treeFocus], [CLS.FOCUS, CLS.FOCUSED]);
+            }
         }
     };
     DetailsView.prototype.getFocusedItem = function () {