Perform custom sorting in Angular File Manager component

11 Jan 20253 minutes to read

The File Manager component provides a way to customize the default sort action for the LargeIconsView by defining thesortComparer property. For sorting individual columns in the DetailsView, the sortComparer property can be defined in the columns property.

Note: To achieve natural sorting like Windows Explorer, you can import the SortComparer function from the '@syncfusion/ej2-angular-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 the name column in DetailsView.

import { BrowserModule } from '@angular/platform-browser'
import { NgModule } from '@angular/core'
import { FileManagerModule, NavigationPaneService, ToolbarService, DetailsViewService } from '@syncfusion/ej2-angular-filemanager'
import { Component } from '@angular/core';
import { sortComparer } from '@syncfusion/ej2-angular-filemanager';

@Component({
    imports: [FileManagerModule,],
    providers: [NavigationPaneService, ToolbarService, DetailsViewService],
    standalone: true,
    selector: 'app-root',
    styleUrls: ['./app.component.css'],
    template: `<ejs-filemanager id='overview' [ajaxSettings]='ajaxSettings' [sortComparer]='sortComparer' [detailsViewSettings]='detailsViewSettings' height="375px"></ejs-filemanager>`
})
export class AppComponent {
    public ajaxSettings?: object;
    public sortComparer?: object;
    public detailsViewSettings?: object;
    public hostUrl: string = 'https://ej2-aspcore-service.azurewebsites.net/';
    public ngOnInit(): void {
        this.ajaxSettings = {
            url: this.hostUrl + 'api/NaturalSorting/FileOperations',
            getImageUrl: this.hostUrl + 'api/NaturalSorting/GetImage',
            uploadUrl: this.hostUrl + 'api/NaturalSorting/Upload',
            downloadUrl: this.hostUrl + 'api/NaturalSorting/Download'
        };
        this.sortComparer = sortComparer;
        this.detailsViewSettings = {
            columns: [
                { field: 'name', headerText: 'File Name', minWidth: 120, width: 'auto', customAttributes: { class: 'e-fe-grid-name' }, template: '${name}', sortComparer: sortComparer },
                { field: 'size', headerText: 'File Size', minWidth: 50, width: '110', template: '${size}' },
                { field: '_fm_modified', headerText: 'Date Modified', minWidth: 50, width: '190' }
            ]
        };
    }
}
@import 'node_modules/@syncfusion/ej2-base/styles/material.css';
@import 'node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import 'node_modules/@syncfusion/ej2-popups/styles/material.css';
@import 'node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import 'node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
@import 'node_modules/@syncfusion/ej2-navigations/styles/material.css';
@import 'node_modules/@syncfusion/ej2-layouts/styles/material.css';
@import 'node_modules/@syncfusion/ej2-grids/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-base/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-filemanager/styles/material.css';
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));