Quickly Filter your Infragistics XamDataGrid Data Using a XamDateTimeRangeSlider

All too often, the XamDataGrids you use are bound to thousands of records. In order to allow your users to get actionable insights based on this data, you allow them to manipulate it – filter, sort, group, compute summaries, and so on. Even though filtering is one of the most often used operations on grids, it could be made more accessible to your users. In the most general case, you would use the so-called Excel-style filtering, which although familiar, flexible and powerful is not immediately reachable by the end-user, and requires setting up custom filtering expressions to specify a range of values, for example.

When you know which column a user will use most often to filter the data, and the values are ordered (such as with Date values), you can provide a much richer filtering experience using a XamDateTimeRangeSlider, which controls the XamDataGrid data filtering.

Using the slider to filter the XamDataGrid

Use the XamDateTimeRangeSlider at the bottom to drag the thumbs, to modify the value of the selected thumb using the mouse wheel, and to drag the entire range along the slider. Using this filtering scheme, you can quickly narrow down your search in an intuitive fashion. This approach can also be applied for filtering numeric values, using the XamNumericRangeSlider in a similar fashion.

Filtering Approach Implementation

The XamDataGrid is bound to an ListCollectionView instance, which is initialized with the whole data set of more than 5800 records. The ListCollectionView filters the data based on the value of its Filter member. As we will be filtering date values, we’re using the XamDateTimeRangeSlider with two thumbs, and re-templated DateTimeSliderTickMarks, showing year tick mark values, enabling mouse wheel thumb movement, and range selection. The XamDateTimeRangeSlider has been styled to display the thumb values above the thumbs themselves, allowing the users to quickly see and adjust the boundaries of their filtering. You can see how these are implemented in the styles file.

When the sample is launched, and data is bound to the XamDataGrid, we set the minimum, maximum and thumb values of the XamDateTimeRangeSlider according to the minimum and maximum dates in the data, so as to show the entire dataset in the XamDataGrid. When any of the location of any of the XamDateTimeRangeSlider thumbs changes, the instance of the ListCollectionView is refreshed, applying the filtering logic and displaying in the XamDataGrid records matching the filter criteria.

Summary

This sample showed how you can allow your users to quickly and intuitively filter values in a XamDataGrid using a XamDateTimeRangeSlider. Using a richly-styled XamDateTimeRangeSlider, we enable users to easily see and modify the current filtering values. This approach can readily be applied when you know which dimensions users will most often filter on. As a first step, examine your data and find out how your application users filter it. Then follow the guidance above and in the sample project to enable your users to rapidly get to actionable insights in their data, making them more productive, and ultimately increase the value of your application.