Visual sort indicator without actually sorting

[Phil]

I would like to see the sort indicator appear on the column headers but without the control actually sorting the rows. When the sorting changes because the user clicks on a header, I programmatically make a new call to the server backend and get back the new results in the correct sort order and assign the new results to the grid. This means I do not want the grid control to sort the current results into a new order whilst waiting for the results to come back. Is there some way to keep the sort indicator working but without the grid actually performing sorting of the rows?

[Lance | Senior Manager Technical Support]

Hello Phil,

To achieve this you're going to need to make a custom header where you permanently hide the built-in indicator and use your own instead. This is because the visibility of that button is tied to the value of SortDirection enum provided by the DataGrid when sorting is performed.

Walkthrough

The button is outside of the content area of the Header (where the text is), you're going to need to customize the ControlTemplate of the DataGridHeaderStyle.

You can find this in the DataGrid's ResourceDictionaries installed on your machine.

1 - Go to C:\Program Files (x86)\Progress\Telerik UI for UWP R1 2018\Binaries\Telerik.UI.Xaml.Grid.UWP\Themes 
2 - Open Resources.xaml (and for brush values open ThemeResourcesLight.xaml)
3 - Search "DataGridColumnHeader" in Resources.xaml and you should end up on line 1015




That is the style for the header.

As you can see, the Sort indicator is a TextBlock that sits to the right of the header content in a horizontal StackPanel:





The value of SortDirection comes from the DataGrid, and the converter returns a glyph (string.empty up or down arrows. this means you have a couple primary options on how to move forward.


Option 1 
Hide the button permanently by adding this and then you could manually change the column's Header value after you sort. In this approach you're essentiall appending the sort character to the header name.

<TextBlock Text="{Binding SortDirection, Converter={StaticResource SortDirectionConverter}}"
    FontFamily="{ThemeResource SymbolThemeFontFamily}"
    FontSize="10"
    Margin="2,0,4,2"
    VerticalAlignment="Center"
    Visibility="Collapsed"/>

Option 2 
Change the bound property so that it points at your own sort property instead!

If you look at the SortDirectionToGlyphConverter source code, you'll see that it uses a glyph. You only need to pass it a SortDirection enum value and it will update the TextBlock accordingly. We can leverage that and just bind the Text value to your own property:

<Page x:Name="Page" ...>

....

<TextBlock Text="{Binding ElementName=Page, Path=DataContext.MySortDirection, Converter={StaticResource SortDirectionConverter}}"
           FontFamily="{ThemeResource SymbolThemeFontFamily}"
           FontSize="10"
           Margin="2,0,4,2"
           VerticalAlignment="Center"/>

...

</Page/>

Demo

I've gone ahead and created a runnable demo to show you the approach for the second option. Find it attached, go to App.xaml and see line 115.

Here is an animated GIF of the result at runtime:




Wrapping Up

I hope this was helpful information, as you can see it's not a simple approach, but it is possible. Note that in my Template I needed to also copy in some connected resources from the same Resources.xaml file (InlinebuttonStyle and ResizeThumb). Hopefully my demo gives you a head start.

If you have any further difficulty, you can open a support ticket here and the DataGrid engineering team can assist further.

Regards,
Lance | Tech Support Engineer, Sr.
Progress Telerik

[Phil]

Thanks for the detailed answer. I have adopted your approach and it works very nicely. Thanks again for great quality and fast support!