@syncfusion/ej2-filemanager 24.2.5 → 25.1.35

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 24.2.5
+*  version : 25.1.35
 *  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.3",
+  "_id": "@syncfusion/ej2-filemanager@18.28.1",
   "_inBundle": false,
-  "_integrity": "sha512-3ULzfV6nFNZlnDP2eb1aPBhV1Ks10YJqDVpX2+0sFATj1WxrlwKtRCXHTzjCurDWweS19iHAUUrMV0NCFXO5cQ==",
+  "_integrity": "sha512-B8/VpoTx0Zn9OJqF8kMo1V03pTl95W+z2HV6FmfelRbRMEKS6X3XoDJmDnWPhS3u7rS2gJqNNMsTPIjsZQ5mDg==",
   "_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.3.tgz",
-  "_shasum": "2d49d07e111e6512f1e22dca41426273b505e1ce",
+  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-release/@syncfusion/ej2-filemanager/-/ej2-filemanager-18.28.1.tgz",
+  "_shasum": "bc5a292c9165ab8617cefdd4eeddeba55db040fc",
   "_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.5",
-    "@syncfusion/ej2-buttons": "~24.2.5",
-    "@syncfusion/ej2-data": "~24.2.3",
-    "@syncfusion/ej2-grids": "~24.2.5",
-    "@syncfusion/ej2-inputs": "~24.2.5",
-    "@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.5"
+    "@syncfusion/ej2-base": "~25.1.35",
+    "@syncfusion/ej2-buttons": "~25.1.35",
+    "@syncfusion/ej2-data": "~25.1.35",
+    "@syncfusion/ej2-grids": "~25.1.35",
+    "@syncfusion/ej2-inputs": "~25.1.35",
+    "@syncfusion/ej2-layouts": "~25.1.35",
+    "@syncfusion/ej2-lists": "~25.1.35",
+    "@syncfusion/ej2-navigations": "~25.1.35",
+    "@syncfusion/ej2-popups": "~25.1.35",
+    "@syncfusion/ej2-splitbuttons": "~25.1.35"
   },
   "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.5",
+  "version": "25.1.35",
   "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.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';
@@ -203,12 +203,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 +218,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)) {
+                    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 +385,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 () {

package/src/file-manager/layout/large-icons-view.d.ts

@@ -37,6 +37,7 @@ export declare class LargeIconsView {
      */
     constructor(parent?: IFileManager);
     private render;
+    private comparer;
     private preventImgDrag;
     private createDragObj;
     dragHelper(args: {

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

@@ -2,7 +2,7 @@ import { ListBase } from '@syncfusion/ej2-lists';
 import { createElement, select, selectAll, EventHandler, KeyboardEvents, closest, Draggable } from '@syncfusion/ej2-base';
 import { isNullOrUndefined as isNOU, addClass, removeClass, Touch, isVisible } from '@syncfusion/ej2-base';
 import { getValue, setValue, remove } from '@syncfusion/ej2-base';
-import { DataManager, Query } from '@syncfusion/ej2-data';
+import { DataManager, Query, DataUtil } from '@syncfusion/ej2-data';
 import { hideSpinner, showSpinner } from '@syncfusion/ej2-popups';
 import * as events from '../base/constant';
 import * as CLS from '../base/classes';
@@ -112,7 +112,12 @@ var LargeIconsView = /** @class */ (function () {
             };
             this.items = [];
             this.items = this.renderList(args);
-            this.items = this.allItems = getSortedData(this.parent, this.items);
+            if (this.parent.sortComparer && this.parent.sortBy !== 'None') {
+                this.items = this.allItems = DataUtil.sort(this.items, this.parent.sortBy, this.comparer.bind(this));
+            }
+            else {
+                this.items = this.allItems = getSortedData(this.parent, this.items);
+            }
             iconsView.classList.remove(CLS.DISPLAY_NONE);
             if (this.parent.enableVirtualization && this.allItems.length > 0) {
                 if (!this.element.style.height) {
@@ -172,6 +177,15 @@ var LargeIconsView = /** @class */ (function () {
             }
         }
     };
+    LargeIconsView.prototype.comparer = function (x, y, xObj, yObj) {
+        if (this.parent.sortOrder === 'Descending') {
+            var z = x;
+            x = y;
+            y = z;
+        }
+        return this.parent.sortComparer(x, y);
+    };
+    ;
     LargeIconsView.prototype.preventImgDrag = function () {
         var i = 0;
         while (i < this.itemList.length) {

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

@@ -263,7 +263,6 @@ var NavigationPane = /** @class */ (function () {
         this.parent.selectedItems = [];
         this.parent.itemData = nodeData;
         var previousPath = this.parent.path;
-        var sNode = select('[data-uid="' + this.treeObj.selectedNodes[0] + '"]', this.treeObj.element);
         if (!this.isRightClick && this.isSameNodeClicked) {
             updatePath(args.node, this.parent.itemData[0], this.parent);
         }

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";
 
 /**
@@ -86,6 +86,16 @@ export interface ColumnModel {
      */
     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
+     */
+    sortComparer?: SortComparer | string;
+
     /**
      * Defines the column template as string or HTML element ID which is used to add customized element in the column header.
      *

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
@@ -113,6 +114,15 @@ export declare class Column extends ChildProperty<Column> {
      * @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
+     */
+    sortComparer: SortComparer | string;
     /**
      * Defines the column template as string or HTML element ID which is used to add customized element in the column header.
      *

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);

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

@@ -24,9 +24,7 @@ import { Property, ChildProperty, initializeCSPTemplate } from '@syncfusion/ej2-
 export var columnArray = [
     {
         field: 'name', headerText: 'Name', minWidth: 120, isPrimaryKey: true,
-        template: initializeCSPTemplate(function (data) {
-            return "<span class=\"e-fe-text\">" + data.name + "</span>";
-        }),
+        template: '<span class=\"e-fe-text\">${name}</span>',
         customAttributes: { class: 'e-fe-grid-name' }
     },
     {