Articles in this section
Category / Section

How to Customize Sorting Icons in a Report Viewer

Published:
Updated:

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;
      }

Note: Replace the Icon URLs in the code snippet above with the actual URLs of your custom icons. Ensure that the icons are accessible from the specified URLs. The above URLs are just examples used online. You can also modify the local image URLs.

  1. 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.
    Output.png

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

Was this article useful?
Like
Dislike
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied