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

How to customize sort icon

Hi Syncfusion team,

I'm using grid  component and I need to customize sort icon.

New icon:

  • The sort icon include an ascending and a descending icon. 
  • When the column is sorted in ascending, the descending icon will be blurred. 
  • When the column is sorted in descending, the ascending icon will be blurred.

Are there the way to reach my requirement?


1 Reply

HS Hemanthkumar S Syncfusion Team April 3, 2023 01:09 PM UTC


Query: “The sort icon include an ascending and a descending icon. When the column is sorted in ascending, the descending icon will be blurred. When the column is sorted in descending, the ascending icon will be blurred.”

Grid dataBound event triggers when a data source is populated in the grid and actionComplete event triggers when Grid actions such as sorting, filtering, paging, grouping, etc. are completed. Based on your update, we have prepared a sample and recommend that to create and enable/disable custom sort icons at the initial rendering of the grid in the dataBound event, and whenever the sort action performs enable/disable custom sort icons in the actionComplete event.

For more information, please see the code example and sample below.


.e-grid .e-custom-sort-icons.e-custom-sort-icons-disable {




.e-grid .e-custom-sort-icons {





.e-grid .e-custom-sort-icons.e-custom-sort-icons-right {




.e-grid .e-custom-sort-icons .e-icons.e-custom-sort-icon-descending {




.e-grid .e-gridheader thead .e-custom-sort-icons .e-icons.e-custom-sort-icon {








  .e-icons.e-custom-sort-icon.e-custom-sort-icon-blur:not(.e-icon-hide):not(.e-check):not(.e-stop):not(.e-icon-reorderuparrow):not(.e-icon-reorderdownarrow) {




.e-grid .e-custom-sort-icons .e-icons.e-custom-sort-icon-ascending::before {




.e-grid .e-custom-sort-icons .e-icons.e-custom-sort-icon-descending::before {





  let gridInstance;

  let flag = true;

  const sortingOptions = {

    columns: [

      { field: 'Freight'direction: 'Ascending' },

      { field: 'CustomerName'direction: 'Descending' },



  const createCustomSortIcons = () => {

    var headerContent = gridInstance.getHeaderContent();

    var headerCell = headerContent.querySelectorAll('.e-headercell');

    var sortIcons = headerContent.querySelectorAll('.e-sortfilterdiv');

    var sortIcon = document.createElement('div');


    var asc = sortIcon.cloneNode();



    var desc = sortIcon.cloneNode();



    var sortIconDiv = document.createElement('div');




    for (var i = 0i < headerCell.lengthi++) {

      var sortIconDivTemp = sortIconDiv.cloneNode(true);

      if (

        headerCell[i].querySelector('.e-headercelldiv').style.textAlign === ''

      ) {



      sortIcons[i].style.display = 'none';




  const enableAndDisableCustomSortIcons = () => {

    var headerContent = gridInstance.getHeaderContent();

    var headerCell = headerContent.querySelectorAll('.e-headercell');

    for (var i = 0i < headerCell.lengthi++) {

      var sortIcon = headerCell[i].querySelector('.e-sortfilterdiv');

      var customSortIcons = headerCell[i].querySelector('.e-custom-sort-icons');

      var sorted =

        sortIcon.classList.contains('e-ascending') ||


      var ascending = sortIcon.classList.contains('e-ascending');

      if (sorted) {

        var ascCustomSortIcon = customSortIcons.querySelector(



        var descCustomSortIcon = customSortIcons.querySelector(




        if (ascending) {



        } else {




      } else {





  const dataBound = (args=> {

    if (flag) {

      flag = false;





  const actionComplete = (args=> {

    if (args.requestType === 'sorting') {






          ref={(g=> (gridInstance = g)}




          pageSettings={pageCount: 5 }}






Sample Link: https://stackblitz.com/edit/react-d8q5hk-usbdzu?file=index.css,index.js

If you require further assistance, please do not hesitate to contact us. We are always here to help you.



Live Chat Icon For mobile
Up arrow icon