Custom Sort By option

[Tony Comtois]

Hello,

How can I add a new item and functionality to the sort by toolbar drop down?  For example add a new column to display user information (last modified by user) and allow sorting of this information?

Thanks

Tony

[Indhumathy Loganathan]

Hi Tony,

Greetings from Syncfusion support.

We have validated your requirement in File Manager component. Currently we don’t have direct support to add custom item in SortBy menu items and perform operations with it. However, you can achieve it through customization.

We have used the created event of File Manager component to achieve this requirement. Check the below code snippet.

created(args) {

    //sortby item's id will be FileManager's id_Toolbar's id_sortby

    var ddbObj = document.getElementById('overview_file_tb_sortby')

        .ej2_instances[0];

 

    const item = {

        disabled: false,

        iconCss: '',

        id: 'overview_file_ddl_type',

        separator: false,

        text: 'Last modified by user',

    };

 

    ddbObj.items.splice(2, 0, item);

 

    ddbObj.select = function (args) {

        var item;

        var element = document.getElementById('overview_file');

        if (args.item.id == 'overview_file_ddl_type') {

        item = args.item.text;

        } else {

        item = args.item.properties.text;

        }

 

        if (item == 'Ascending' || item == 'Descending' || item == 'None') {

        for (var i = 0; i < ddbObj.items.length; i++) {

            if (ddbObj.items[i].iconCss.includes('e-icons e-fe-tick')) {

            //Removed the icon for all other items

            ddbObj.items[i].iconCss = '';

            }

        }

        //Added icon for current selected item

        args.item.iconCss = 'e-icons e-fe-tick';

        }

 

        if (

        item == 'Name' ||

        item == 'Size' ||

        item == 'Modified' ||

        item == 'Last modified by user'

        ) {

        for (var i = 0; i < ddbObj.items.length; i++) {

            if (ddbObj.items[i].iconCss.includes('e-icons e-fe-dot')) {

            //Removed the icon for all other items

            ddbObj.items[i].iconCss = '';

            }

        }

        //Added icon for current selected item

        args.item.iconCss = 'e-icons e-fe-dot';

        }

 

        if (item == 'Descending') {

        var text = document

            .querySelectorAll('.e-icons.e-fe-dot')[0]

            .closest('.e-item').innerText;

        if (text == 'Name') {

            if (

            element

                .querySelectorAll('.e-headercell')[2]

                .getAttribute('aria-sort') == 'Ascending'

            )

            element.querySelectorAll('.e-headercell')[2].click();

        } else if (text == 'Modified') {

            if (

            element

                .querySelectorAll('.e-headercell')[3]

                .getAttribute('aria-sort') == 'Ascending'

            )

            element.querySelectorAll('.e-headercell')[3].click();

            else {

            element.querySelectorAll('.e-headercell')[3].click();

            element.querySelectorAll('.e-headercell')[3].click();

            }

        } else if (text == 'Size') {

            if (

            element

                .querySelectorAll('.e-headercell')[4]

                .getAttribute('aria-sort') == 'Ascending'

            )

            element.querySelectorAll('.e-headercell')[4].click();

            else {

            element.querySelectorAll('.e-headercell')[4].click();

            element.querySelectorAll('.e-headercell')[4].click();

            }

        } else {

            //Add the actions you want to perform while clicking on the custom tool item.

        }

        }

        if (item == 'Ascending') {

        var text = document

            .querySelectorAll('.e-icons.e-fe-dot')[0]

            .closest('.e-item').innerText;

        if (text == 'Name') {

            element.querySelectorAll('.e-headercell')[2].click();

        } else if (text == 'Modified') {

            element.querySelectorAll('.e-headercell')[3].click();

        } else if (text == 'Size') {

            element.querySelectorAll('.e-headercell')[4].click();

        } else {

            //Add the actions you want to perform while clicking on the custom tool item.

        }

        }

    };

 }

You can find the sample from below link.

https://stackblitz.com/edit/react-fi56e9?file=index.js

Please check the sample and get back to us if you need any further assistance.

Regards,

Indhumathy L