Grid custom sort icon

[Sandip Mane]

Hello,

SfGrid component has 3 column sort actions as ascending, descending, none. I wanted to show custom icons for these column sort. I could achieve this for  ascending and descending by using css style. But, not able to add icon when column is not sorted. Please help. Thanks.

[Sanjay Kumar Suresh]

Hi Sandip Mane,

Upon reviewing your query, it appears that you want to apply custom sort icons during sorting. We have a specific example in our documentation to help you achieve this. We recommend taking a look at the sample provided below.

https://blazor.syncfusion.com/documentation/datagrid/sorting#how-to-customize-sort-icon

For Additional References

https://blazor.syncfusion.com/documentation/datagrid/sorting

Regards,

Sanjay Kumar Suresh

[Sandip Mane]

Hello Sanjay,

Thanks for your reply. But, I believe my query is not answered yet. The documentation link shared by you provides how to customize icon for ascending and descending. But, I wanted to apply icon for an unsorted column for which there is no documentation that I could find. SfGrid column has 3 states - unsorted, sorted ascending, sorted descending. Out of these, icons can be added for ascending and descending states. But for unsorted column, SfGrid by default shows no icon, which I want to show. For clarity, please refer below image. Thanks.

[Sanjay Kumar Suresh]

Hi Sandip Mane,

 

Upon reviewing your query , To address your issue, you can use the provided CSS solution. It ensures that a custom icon appears when a column is not sorted, solving the problem of missing icons for unsorted columns.

<style>

        .e-grid .e-headercell[aria-sort] .e-sortfilterdiv:not(.e-ascending):not(.e-descending)::before {

            content: "\e824"; /* Default icon indicating column */

        }

    </style>

For your reference, we have attached a sample.

 

Sample:https://blazorplayground.syncfusion.com/embed/BXBetMhLJxLvmtlX?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

Regards,
Sanjay Kumar Suresh

[Sandip Mane]

Hi Sanjay,

Thanks. It worked. Appreciate you helping with not just code snippet but with sample as well.

[Prathap Senthil]

Thanks for the update. We are happy to hear that the provided information was helpful.

Please get back to us if you face any issues with the provided solution.