How to Customize Sorting Icons in a Report Viewer

Interactive sorting is a feature that enables dynamic manipulation of data presentation in a report based on your preferences. This functionality enables you to modify the order in which data is displayed, providing a more tailored approach to data analysis.

When interactive sorting is enabled for a specific tablix, chart, or group in a report, you can click on the column headers or designated interactive sorting elements. Upon clicking, the data will be reorganized based on the selected column’s values, either in ascending or descending order, depending on your choice. This real-time sorting capability gives you the freedom to explore data from different angles without the need to create multiple report versions.

Interactive sorting is particularly useful in scenarios where you need to quickly identify trends, outliers, or specific patterns in the data without requiring additional report authoring. This feature significantly enhances the usability of reports by promoting self-service data exploration and analysis.

To customize the sorting icons using CSS in your application, follow these steps:

1. Add the following CSS classes associated with the icons. The relevant classes for sorting icons in the report viewer are as follows:

   • .e-reportviewer-sortingUpDown - This class is used for the combined up and down arrow icon.
   • .e-reportviewer-sortingUp - This class is used for the up arrow icon.
   • .e-reportviewer-sortingDown - This class is used for the down arrow icon.

2. To override the default sorting icon styles with your custom icons, use the following CSS code snippet. Place this code within a <style> tag in the appropriate location within your project:

      .e-reportviewer-sortingUpDown 
      {
           background: url(https://image.shutterstock.com/image-vector/arrow-icon-600w-738467251.jpg) !important;
      }
      
      .e-reportviewer-sortingUp 
      {
           background: url( //Icon url ) !important;
      } 

      .e-reportviewer-sortingDown 
      {
           background: url( // Icon url) !important;
      }

3. Once you have updated the CSS code with your custom icon URLs, the report viewer will display the new sorting icons based on your corporate color scheme. Refer to the following image for a visual representation.
   
   

For more information and related resources, refer to the following:

• Interactive sorting