1. Home
  2. Forum
  3. Xamarin.Forms
  4. Header style on press

Header style on press

From looking at the documentation there seems to be a clear guide on how to grab the selected row, but not the selected header. I am wondering if achieving something like the attached picture is possible with your control or if it is a current limitation.

Many thanks,
Liam


12 Replies
SS Sivaraman Sivagurunathan Syncfusion Team March 9, 2020 12:35 PM UTC

Hi Liam, 

Thank you for using Syncfusion controls.    

We could not able to understand your query. We suspect that you try to customize the header. you can achieve your requirement by using HeaderTemplate and GridStyle. You can customized the sort icon using GetHeaderSortIndicatorDown and GetHeaderSortIndicatorUp and you can change the foreground color for the label based on SortDirection in SortColumnsChanging event. We have prepared the sample based on your requirement. You can download the same from the below link.  Please revert us in case you query different from this. 


<sfgrid:GridTextColumn MappingName="OrderID" > 
<sfgrid:GridTextColumn.HeaderTemplate> 
    <DataTemplate> 
        <StackLayout> 
            <Label BindingContext="{x:Reference viewModel}" Text="OrderID" TextColor="{Binding HeaderTextColor}" HorizontalOptions="Center" VerticalOptions="Center" HeightRequest="50"/> 
            <BoxView BindingContext="{x:Reference viewModel}" Color="{Binding HeaderIndicatorColor}" HeightRequest="2" /> 
        </StackLayout> 
    </DataTemplate> 
</sfgrid:GridTextColumn.HeaderTemplate> 
 
 
// Code behind 
public MainPage() 
{ 
    InitializeComponent(); 
    dataGrid.SortColumnsChanging += DataGrid_SortColumnsChanging; 
    dataGrid.GridStyle = new CustomStyle(); 
} 
 
private void DataGrid_SortColumnsChanging(object sender, DataGridSortColumnsChangingEventArgs e) 
{ 
    if(e.AddedItems[0].SortDirection == Syncfusion.Data.ListSortDirection.Ascending) 
    { 
        viewModel.HeaderTextColor = Color.Blue; 
        viewModel.HeaderIndicatorColor = Color.Blue; 
    } 
    else 
    { 
        viewModel.HeaderTextColor = Color.Black; 
        viewModel.HeaderIndicatorColor = Color.Transparent; 
    } 
} 

// Custom Style 
public class CustomStyle: DataGridStyle 
{ 
    public CustomStyle() 
    { 
 
    } 
 
    public override ImageSource GetHeaderSortIndicatorDown() 
    { 
        return ImageSource.FromResource("DataGridDemo.BlackTri.png"); 
    } 
 
    public override ImageSource GetHeaderSortIndicatorUp() 
    { 
        return ImageSource.FromResource("DataGridDemo.blueTri.png"); 
    } 
} 
 


Please refer the below UG Links: 



Regards, 
Sivaraman S 
 


LK Liam Keogh March 10, 2020 08:53 AM UTC

Hi Sivaraman,

Thanks for your suggestion. It seems that regardless of what size of image I provide in the GetHeaderSortIndicatorDown and GetHeaderSortDirectionUp methods it does not change the display size. It's showing as a size that is absolutely tiny and hardly noticeable. I have resized my images to be the equal to that of the sample project you provided me. Is there anything that can be done about this? Also, are you able to point the ImageSource to the Android or iOS resource paths rather than having to place the images in the same namespace as the GridStyle class?

Also, wouldn't your above sample cause all rows to change colour if there was only one bindable property in the view model? Does this mean I need a colour property for each column in the view model?

MK Muthu Kumaran Gnanavinayagam Syncfusion Team March 10, 2020 10:24 AM UTC

Hi Liam, 
 
We have analyzed the reported queries at our end. 
 
Please find the query response below. 
 
Query 1: Need to modify the HeaderSortIcon size 
We would like to let you know that you can customize the size of the sort icon through custom SfDataGrid.GridHeaderCellRenderer as like below. 
 
Code Example: 
    public partial class MainPage : ContentPage, INotifyPropertyChanged 
    { 
        public MainPage() 
        { 
            InitializeComponent(); 
            dataGrid.CellRenderers.Remove("HeaderView"); 
            dataGrid.CellRenderers.Add("HeaderView", new HeaderCellRenderer()); 
        } 
    } 
 
    public class HeaderCellRenderer: GridHeaderCellRenderer 
    { 
        public override void OnInitializeDisplayView(DataColumnBase dataColumn, ContentView view) 
        { 
            base.OnInitializeDisplayView(dataColumn, view); 
            ((view as BorderView).Content as Grid).ColumnDefinitions[1].Width = new GridLength(20, GridUnitType.Absolute); 
        } 
    } 
 
Query 2: Point the ImageSource from renderer projects: 
Please refer the below UG documentation to know more details about loading the image file from local paths. 
 
 
Query 3: Need for individual property for each HeaderTemplate: 
If your requirement is to modify the template values for each HeaderCells, we suggest you to use code behind template creation instead of binding the values. We have modified our sample to achieve the reported requirement and you can download it from the below link. 
 
 
Please let us know if you require further assistance. 
 
Regards, 
G.Muthu kumaran. 


LK Liam Keogh March 10, 2020 04:02 PM UTC

Hi Muthu,

I've followed your example and my DataTemplates do not seem to update when it reaches the 'e.Action == System.Collections.Specialized.NotifyCollectionChangedAction.Remove' section of the if/else statement. I have attached the code behind that mirrors your sample but with some of my own styling and object mappings applied. Am I missing something here? From debugging I can see that the third sort state DataTemplate does get applied but it does not display on the UI.

        private void DataGridOnSortColumnsChanging(object sender, DataGridSortColumnsChangingEventArgs e)
        {
            if (e.Action == System.Collections.Specialized.NotifyCollectionChangedAction.Add || e.Action == System.Collections.Specialized.NotifyCollectionChangedAction.Replace)
            {
                var sortDirection = e.AddedItems[0].SortDirection;
                var column = (sender as SfDataGrid)?.Columns.FirstOrDefault(x => x.MappingName == e.AddedItems[0].ColumnName);

                if (column == null)
                {
                    return;
                }

                if (sortDirection == Syncfusion.Data.ListSortDirection.Ascending || sortDirection == Syncfusion.Data.ListSortDirection.Descending)
                {
                    switch (column.HeaderText)
                    {
                        case "FruitIdNumber":
                            column.HeaderTemplate = new DataTemplate(() =>
                            {
                                var stack = new StackLayout();
                                var headerTitle = new Label() { Text = "Fruit No.", HeightRequest = 50, HorizontalOptions = LayoutOptions.Center, VerticalOptions = LayoutOptions.Center };
                                headerTitle.TextColor = (Color)Application.Current.Resources["Primary-1000"];
                                var boxView = new BoxView() { HeightRequest = 2 };
                                boxView.Color = (Color)Application.Current.Resources["Primary-1000"];
                                stack.Children.Add(headerTitle);
                                stack.Children.Add(boxView);
                                return stack;
                            });
                            break;

                        case "ItemNumber":
                            column.HeaderTemplate = new DataTemplate(() =>
                            {
                                var stack = new StackLayout();
                                var headerTitle = new Label() { Text = "Item No.", HeightRequest = 50, HorizontalOptions = LayoutOptions.Center, VerticalOptions = LayoutOptions.Center };
                                headerTitle.TextColor = (Color)Application.Current.Resources["Primary-1000"];
                                var boxView = new BoxView() { HeightRequest = 2 };
                                boxView.Color = (Color)Application.Current.Resources["Primary-1000"];
                                stack.Children.Add(headerTitle);
                                stack.Children.Add(boxView);
                                return stack;
                            });
                            break;

                        case "CreationTimestamp":
                            column.HeaderTemplate = new DataTemplate(() =>
                            {
                                var stack = new StackLayout();
                                var headerTitle = new Label() { Text = "Created", HeightRequest = 50, HorizontalOptions = LayoutOptions.Center, VerticalOptions = LayoutOptions.Center };
                                headerTitle.TextColor = (Color)Application.Current.Resources["Primary-1000"];
                                var boxView = new BoxView() { HeightRequest = 2 };
                                boxView.Color = (Color)Application.Current.Resources["Primary-1000"];
                                stack.Children.Add(headerTitle);
                                stack.Children.Add(boxView);
                                return stack;
                            });
                            break;

                        case "HandlerName":
                            column.HeaderTemplate = new DataTemplate(() =>
                            {
                                var stack = new StackLayout();
                                var headerTitle = new Label() { Text = "Owner", HeightRequest = 50, HorizontalOptions = LayoutOptions.Center, VerticalOptions = LayoutOptions.Center };
                                headerTitle.TextColor = (Color)Application.Current.Resources["Primary-1000"];
                                var boxView = new BoxView() { HeightRequest = 2 };
                                boxView.Color = (Color)Application.Current.Resources["Primary-1000"];
                                stack.Children.Add(headerTitle);
                                stack.Children.Add(boxView);
                                return stack;
                            });
                            break;
                    }
                }
            }
            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;
                });
            }
        }

MK Muthu Kumaran Gnanavinayagam Syncfusion Team March 11, 2020 09:36 AM UTC

Hi Liam, 
 
We have analyzed the attached code snippets and we have tried to replicate the reported issue at our end. But we couldn’t replicate the issue from our side. We have tested in all the platforms and found that the third sorting is applied as expected. 
 
For your reference, we have attached the working sample link with the screencast below. 
 
 
Can you please check whether the issue occurs in our sample also from your side? If yes, please share the details of the tested device and the version of SfDataGrid, Xamarin.Forms used in your application to analyze the issue further at our end. Also please share a videocast to showcase the noted behavior in your application. 
 
Regards, 
G.Muthu kumaran. 


LK Liam Keogh March 11, 2020 10:23 AM UTC

Hi Muthu,

I appear to have found a bug in your control. The DataTemplate will not be redrawn to the UI on the third state of sorting if the 'SelectionMode = Single' propery is set on the SfDataGrid. This seems like a seriously critical bug to fix.

Note - I verified the existence of this by placing the property in your provided sample and it also appeared there.

Liam

MK Muthu Kumaran Gnanavinayagam Syncfusion Team March 12, 2020 01:44 PM UTC

Hi Jorge,   
   
Sorry for the inconvenience. We confirmed that the issue with “HeaderTemplate doesn't update at runtime in SelectionMode other than 'None'” is a defect and we have logged a defect report. The fix for this issue is estimated to be available on 19th March, 2020.   
   
You can track the status of the bug from the below feedback link.   
   
G.Muthu kumaran.   


MK Muthu Kumaran Gnanavinayagam Syncfusion Team March 12, 2020 01:46 PM UTC

Hi Liam,   
 
Please ignore the previous update. 
 
Sorry for the inconvenience. We confirmed that the issue with “HeaderTemplate doesn't update at runtime in SelectionMode other than 'None'” is a defect and we have logged a defect report. The fix for this issue is estimated to be available on 19th March, 2020.   
   
You can track the status of the bug from the below feedback link.   
   
G.Muthu kumaran.   


LK Liam Keogh March 16, 2020 12:24 PM UTC

That's excellent to hear Muthu, thank you.

MK Muthu Kumaran Gnanavinayagam Syncfusion Team March 17, 2020 05:15 AM UTC

Hi Liam, 
 
Thanks for the update. We will let you know once the issue has been fixed. 
 
Regards, 
G.Muthu kumaran. 


MK Muthu Kumaran Gnanavinayagam Syncfusion Team March 20, 2020 01:09 PM UTC

Hi Liam, 
 
We are glad to let you know that the reported issue has been resolved. The fix for this issue will be included in our upcoming 2020 Volume 1 main release which is scheduled to be rolled out by the end of this month. We will appreciate your patience until then. 
 
Regards, 
G.Muthu kumaran. 


KK Karthikraja Kalaimani Syncfusion Team April 3, 2020 05:22 AM UTC

Hi Liam, 
  
We are glad to announce that our Essential Studio 2020 Volume 1 main Release version 18.1.0.42 is rolled out with the reported bug fix “HeaderTemplate doesn't update at runtime in SelectionMode other than 'None'” and is available for download under the following link. 
  
We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance. 
  
Regards, 
Karthik Raja 


Loader.
Up arrow icon