Column header selection style

[Liam Keogh]

Is it possible to change the style of the currently selected header? For instance, if a column is tapped to sort the DataGrid is it possible to change the style of that header? Similar to the SelectedItemTemplate of your ListView control?

[Muthu Kumaran Gnanavinayagam]

Hi Liam, 

 

Sorry for inconvenience. 

 

Currently we are analyzing the feasibility of the reported requirement at our end and we will update further details on or before March 10^th, 2020. We will appreciate your patience until then. 

 

Regards, 

G.Muthu kumaran. 

[Liam Keogh]

Hi Muthu,

It is not an inconvenience at all and your reposonse is very much appreciated.

Look forward to hearing back from you,

Liam

[Muthu Kumaran Gnanavinayagam]

Hi Liam, 

 

Sorry for the delay. 

 

We have analyzed the reported requirement “Need to modify the template of the tapped HeaderCell in SfDataGrid” from our side. We would like to let you know that you can achieve the requirement through SfDataGrid.SortColumnsChanging event. This event gets triggered once the header cell is tapped to process the sorting action. So you can get the sorted column related details and current SortDirection from this event args. Using these values you can change the HeaderTemplate to desired template as like below. 

 

Code example: 

public partial class MainPage : ContentPage 

{ 

  Syncfusion.Data.ListSortDirection sortDirection; 

 

  public MainPage() 

  { 

    InitializeComponent(); 

    dataGrid.SortColumnsChanging += DataGrid_SortColumnsChanging; 

  } 

 

  private void DataGrid_SortColumnsChanging(object sender, DataGridSortColumnsChangingEventArgs e) 

  { 

    sortDirection = e.AddedItems[0].SortDirection; 

    var column = (sender as SfDataGrid).Columns.FirstOrDefault(x => x.MappingName == e.AddedItems[0].ColumnName); 

 

    if (column == null) 

      return; 

 

    if (column.HeaderTemplate != null) 

      column.HeaderTemplate = null; 

 

    if (sortDirection == Syncfusion.Data.ListSortDirection.Ascending) 

    { 

      column.HeaderTemplate = new DataTemplate(() => 

      { 

        var grid = new Grid(); 

        grid.BackgroundColor = Color.Green; 

        var headerTitle = new Label() { Text = column.HeaderText }; 

        grid.Children.Add(headerTitle); 

        return grid; 

       }); 

     } 

     else 

     { 

       column.HeaderTemplate = new DataTemplate(() => 

       { 

         var grid = new Grid(); 

         grid.BackgroundColor = Color.RoyalBlue; 

         var headerTitle = new Label() { Text = column.HeaderText }; 

         grid.Children.Add(headerTitle); 

         return grid; 

       }); 

    }             

  } 

} 

 

For your reference, we have attached the working sample below. 

 

Sample link: https://www.syncfusion.com/downloads/support/forum/152203/ze/DataGrid-1735023 

 

Please let us know if you require further assistance. 

 

Regards, 

G.Muthu kumaran. 

[Liam Keogh]

Hi Muthu,

Your solution is great and solves some of the problem. I am wondering if you are able to detect when there is no sorting being applied? You expose a XAML property to allow for tristate sorting but in the code behind you only expose Ascending and Descending. I would assume there would also be a None option here. I ask because from debugging it seems that the 3rd sorting state, which cancels the sort, gets passed through to the event as Descending. This does not make a lot of sense to me as you're seemingly sorting the list two ways using the same sort direction as far as the code is concerned.

Thanks,

Liam

[Muthu Kumaran Gnanavinayagam]

Hi Liam, 

 

We would like to let you know that you can get notified for the third state i.e., when GridColumnSortDescriptors has been removed, from the Remove Action in SfDataGrid.SortColumnsChanging event as like below. 

 

Code example: 

private void DataGrid_SortColumnsChanging(object sender, DataGridSortColumnsChangingEventArgs e) 

        { 

            if (e.Action == System.Collections.Specialized.NotifyCollectionChangedAction.Add || e.Action == System.Collections.Specialized.NotifyCollectionChangedAction.Replace) 

            { 

                sortDirection = e.AddedItems[0].SortDirection; 

                var column = (sender as SfDataGrid).Columns.FirstOrDefault(x => x.MappingName == e.AddedItems[0].ColumnName); 

 

                if (column == null) 

                    return; 

 

                foreach(var allColumn in (sender as SfDataGrid).Columns) 

                { 

                    if(allColumn != column) 

                        allColumn.HeaderTemplate = column.HeaderTemplate = new DataTemplate(() => 

                        { 

                            var stack = new StackLayout(); 

                            var headerTitle = new Label() { Text = allColumn.HeaderText, HeightRequest = 50, HorizontalOptions = LayoutOptions.Center, VerticalOptions = LayoutOptions.Center }; 

                            headerTitle.TextColor = Color.Black; 

                            var boxView = new BoxView() { HeightRequest = 2 }; 

                            boxView.Color = Color.Transparent; 

                            stack.Children.Add(headerTitle); 

                            stack.Children.Add(boxView); 

                            return stack; 

                        }); 

                    else 

                    { 

                        if (column.HeaderTemplate != null) 

                            column.HeaderTemplate = null; 

                    } 

                } 

                

                if (sortDirection == Syncfusion.Data.ListSortDirection.Ascending) 

                { 

                    column.HeaderTemplate = new DataTemplate(() => 

                    { 

                        var stack = new StackLayout(); 

                        var headerTitle = new Label() { Text = column.HeaderText, HeightRequest = 50, HorizontalOptions = LayoutOptions.Center, VerticalOptions = LayoutOptions.Center }; 

                        headerTitle.TextColor = Color.Blue; 

                        var boxView = new BoxView() { HeightRequest = 2 }; 

                        boxView.Color = Color.Blue; 

                        stack.Children.Add(headerTitle); 

                        stack.Children.Add(boxView); 

                        return stack; 

                    }); 

                } 

                else 

                { 

                    column.HeaderTemplate = new DataTemplate(() => 

                    { 

                        var stack = new StackLayout(); 

                        var headerTitle = new Label() { Text = column.HeaderText, HeightRequest = 50, HorizontalOptions = LayoutOptions.Center, VerticalOptions = LayoutOptions.Center }; 

                        headerTitle.TextColor = Color.Green; 

                        var boxView = new BoxView() { HeightRequest = 2 }; 

                        boxView.Color = Color.Green; 

                        stack.Children.Add(headerTitle); 

                        stack.Children.Add(boxView); 

                        return stack; 

                    }); 

                } 

            } 

            else if (e.Action == System.Collections.Specialized.NotifyCollectionChangedAction.Remove) 

            { 

                var column = (sender as SfDataGrid).Columns.FirstOrDefault(x => x.MappingName == e.RemovedItems[0].ColumnName); 

 

                if (column == null) 

                    return; 

 

                if (column.HeaderTemplate != null) 

                    column.HeaderTemplate = null; 

 

                column.HeaderTemplate = new DataTemplate(() => 

                { 

                    var stack = new StackLayout(); 

                    var headerTitle = new Label() { Text = column.HeaderText, HeightRequest = 50, HorizontalOptions = LayoutOptions.Center, VerticalOptions = LayoutOptions.Center }; 

                    headerTitle.TextColor = Color.Black; 

                    var boxView = new BoxView() { HeightRequest = 2 }; 

                    boxView.Color = Color.Transparent; 

                    stack.Children.Add(headerTitle); 

                    stack.Children.Add(boxView); 

                    return stack; 

                }); 

            } 

        } 

 

For your reference, we have attached the working sample and you can download it from the below link. 

 

Sample link: https://www.syncfusion.com/downloads/support/forum/152203/ze/DataGridSample-583495809 

 

Please let us know if you require further assistance. 

 

Regards, 

G.Muthu kumaran. 

[Liam Keogh]

Hi Muthu,

Unfortuneately this does not seem to work. I have pasted your code sample into my project and it does not redraw the column header data template when the sorting option has been removed. I have a similar open ticket here so it would be alot easier to close this and carry on our conversation there.

Thanks,

Liam

[Muthu Kumaran Gnanavinayagam]

Hi Liam, 

 

Thanks for the update. 

 

We will update further details on your another ticket. 

 

Regards, 

G.Muthu kumaran.