How to customize sort icon

[KEVIN H]

Hi Syncfusion team,

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

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?

Thanks.

[Hemanthkumar S]

Hi KEVIN H,

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.

[index.css]

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

  display: none;

}

 

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

  position: absolute;

  top: 8px;

}

 

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

  right: 8px;

}

 

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

  margin-top: -2px;

}

 

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

  font-size: 10px;

}

 

.e-grid

  .e-gridheader

  thead

  .e-custom-sort-icons

  .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) {

  color: #b9b9b9;

}

 

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

  content: '\e87a';

}

 

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

  content: '\e70d';

}

 

[index.js]

  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');

    sortIcon.classList.add('e-icons');

    var asc = sortIcon.cloneNode();

    asc.classList.add('e-custom-sort-icon');

    asc.classList.add('e-custom-sort-icon-ascending');

    var desc = sortIcon.cloneNode();

    desc.classList.add('e-custom-sort-icon');

    desc.classList.add('e-custom-sort-icon-descending');

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

    sortIconDiv.classList.add('e-custom-sort-icons');

    sortIconDiv.appendChild(asc);

    sortIconDiv.appendChild(desc);

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

      var sortIconDivTemp = sortIconDiv.cloneNode(true);

      if (

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

      ) {

        sortIconDivTemp.classList.add('e-custom-sort-icons-right');

      }

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

      headerCell[i].appendChild(sortIconDivTemp);

    }

  };

  const enableAndDisableCustomSortIcons = () => {

    var headerContent = gridInstance.getHeaderContent();

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

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

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

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

      var sorted =

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

        sortIcon.classList.contains('e-descending');

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

      if (sorted) {

        var ascCustomSortIcon = customSortIcons.querySelector(

          '.e-custom-sort-icon-ascending'

        );

        var descCustomSortIcon = customSortIcons.querySelector(

          '.e-custom-sort-icon-descending'

        );

        customSortIcons.classList.remove('e-custom-sort-icons-disable');

        if (ascending) {

          ascCustomSortIcon.classList.remove('e-custom-sort-icon-blur');

          descCustomSortIcon.classList.add('e-custom-sort-icon-blur');

        } else {

          descCustomSortIcon.classList.remove('e-custom-sort-icon-blur');

          ascCustomSortIcon.classList.add('e-custom-sort-icon-blur');

        }

      } else {

        customSortIcons.classList.add('e-custom-sort-icons-disable');

      }

    }

  };

  const dataBound = (args) => {

    if (flag) {

      flag = false;

      createCustomSortIcons();

      enableAndDisableCustomSortIcons();

    }

  };

  const actionComplete = (args) => {

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

      enableAndDisableCustomSortIcons();

    }

  };

 

        <GridComponent

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

          dataSource={data}

          allowPaging={true}

          allowSorting={true}

          pageSettings={{ pageCount: 5 }}

          sortSettings={sortingOptions}

          dataBound={dataBound}

          actionComplete={actionComplete}

        >

 

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.

Regards,

Heman