Syncfusion AI Assistant

How can I help you?

Perform custom sorting in EJ2 JavaScript File Manager component

31 Jan 20264 minutes to read

The File Manager component provides a way to customize the default sort action for the LargeIconsView by defining the sortComparer property and for sorting individual columns in the DetailsView by defining the sortComparer property in the columns property.

Note: To achieve natural sorting like Windows Explorer, you can import the SortComparer function from '@syncfusion/ej2-javascript-filemanager'. If you want to perform your own custom sorting, you can define your own SortComparer function.

The following example demonstrates how to define a custom sort comparer function to achieve natural sorting behavior for the LargeIconsView and name column in DetailsView.

var hostUrl = 'https://ej2-aspcore-service.azurewebsites.net/';
// inject feature modules of the File Manager
ej.filemanager.FileManager.Inject(ej.filemanager.DetailsView, ej.filemanager.Toolbar, ej.filemanager.NavigationPane);
// initialize File Manager control
var filemanagerInstance = new ej.filemanager.FileManager({
    ajaxSettings: {
        url: hostUrl + 'api/NaturalSorting/FileOperations',
        getImageUrl: hostUrl + 'api/NaturalSorting/GetImage',
        uploadUrl: hostUrl + 'api/NaturalSorting/Upload',
        downloadUrl: hostUrl + 'api/NaturalSorting/Download'
    },
    sortComparer: ej.filemanager.sortComparer,
    detailsViewSettings: {
        columns: [
            { field: 'name', headerText: 'File Name', minWidth: 120, width: 'auto', customAttributes: { class: 'e-fe-grid-name' }, template: '${name}', sortComparer: ej.filemanager.sortComparer },
            { field: 'size', headerText: 'File Size', minWidth: 50, width: '110', template: '${size}' },
            { field: '_fm_modified', headerText: 'Date Modified', minWidth: 50, width: '190' }
        ]
    },
    height: '380px'
});
// render initialized File Manager
filemanagerInstance.appendTo('#filemanager');
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Essential JS 2 File Manager</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Essential JS 2 File Manager Control">
  <meta name="author" content="Syncfusion">
  <link href="index.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-base/styles/bootstrap5.3.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-inputs/styles/bootstrap5.3.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-popups/styles/bootstrap5.3.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-buttons/styles/bootstrap5.3.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-splitbuttons/styles/bootstrap5.3.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-layouts/styles/bootstrap5.3.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-navigations/styles/bootstrap5.3.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-grids/styles/bootstrap5.3.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-filemanager/styles/bootstrap5.3.css" rel="stylesheet">
  <script src="https://cdn.syncfusion.com/ej2/33.2.3/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
  <div id="filemanager"></div>

  <script>
    var ele = document.getElementById('container');
    if (ele) {
      ele.style.visibility = "visible";
    }   
  </script>
  <script src="index.js" type="text/javascript"></script>
</body>

</html>
#container {
    visibility: hidden;
}

#loader {
    color: #008cff;
    height: 40px;
    width: 30%;
    position: absolute;
    top: 45%;
    left: 45%;
}