Having trouble getting help?
Contact Support
Contact Support
Perform custom sorting in EJ2 TypeScript File Manager control
3 Mar 20254 minutes to read
The File Manager control 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 ownSortComparer
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.
import { FileManager, Toolbar, NavigationPane, DetailsView, sortComparer, SortComparer } from '@syncfusion/ej2-filemanager';
FileManager.Inject(Toolbar, NavigationPane, DetailsView)
let hostUrl: string = 'https://ej2-aspcore-service.azurewebsites.net/';
// initialize File Manager control
let filemanagerInstance: FileManager = new FileManager({
ajaxSettings: {
url: hostUrl + 'api/NaturalSorting/FileOperations',
getImageUrl: hostUrl + 'api/NaturalSorting/GetImage',
uploadUrl: hostUrl + 'api/NaturalSorting/Upload',
downloadUrl: hostUrl + 'api/NaturalSorting/Download'
},
sortComparer: sortComparer as SortComparer,
detailsViewSettings: {
columns: [
{ field: 'name', headerText: 'File Name', minWidth: 120, width: 'auto', customAttributes: { class: 'e-fe-grid-name' }, template: '${name}', sortComparer: sortComparer as 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/29.1.33/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-layouts/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-grids/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-filemanager/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id="container">
<div id="filemanager"></div>
</div>
</body>
</html>
#container {
visibility: hidden;
}
#loader {
color: #008cff;
height: 40px;
width: 30%;
position: absolute;
top: 45%;
left: 45%;
}