We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Event callback for sortByChange or sortColumn on FileManager?

I need a way to trigger a callback function any time a user sorts files. There are 2 ways for users to sort: 1) e.g. Context menu > Sort By > Name, and 2) Click a column header in the File Details grid.

I can detect the first type by using the onMenuClick event. However, I haven't been able to detect event type #2, when a user clicks a header to sort.

I see that there are event constants defined for sortColumn and sortByChange. I've tried grabbing a ViewChild of the component and calling addEventListener(sortColumn, handler) on it (which it inherits from ComponentBase), but this didn't work.

Your guidance please!

4 Replies

IL Indhumathy Loganathan Syncfusion Team March 16, 2023 02:42 PM UTC

Hi Matthew,

We don’t have direct event support for sort icon clicks in the header section of the File Manager component. You can achieve your requirement by following the below steps.

success() {

    //Get the sort icon elements in the header section.

    var elements = document.querySelectorAll('.e-sortfilterdiv.e-icons');

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

      if (elements[i] != null) {

        //Bind click event for the elements.

        elements[i].addEventListener('click', function () {

          console.log('sorting perfomed through header click.');





Sample: https://stackblitz.com/edit/angular-9foip1?file=src%2Fapp.component.html,src%2Fapp.component.ts

Check out the shared details and get back to us if you need any further assistance.


Indhumathy L

MM Matthew Marichiba replied to Indhumathy Loganathan March 21, 2023 09:10 PM UTC

Thanks, I'll give it a try.

MM Matthew Marichiba March 28, 2023 07:12 PM UTC

Your reply got me going on the right path. One correction to your solution:  The DOM selector should be 

.e-headercelldiv (not .e-sortfilterdiv.e-icons) because the whole header is clickable, not just the sort icon.

Other than that, I was able to use your pattern to execute a function any time the user chooses to re-sort. Thanks!

SS Shereen Shajahan Syncfusion Team March 29, 2023 04:59 AM UTC

Hi Matthew,

Thank you for your update; appreciate it. We are marking this forum as solved.



Live Chat Icon For mobile
Up arrow icon