Bind same HeaderTemplate to multiple columns

[Liam Keogh]

From the documentation I can see that custom styling of headers is possible through a DataTemplate within a GridColumn.HeaderTemplate. I was wondering if I would be able to declare a shared HeaderTemplate that I could apply to each of the Columns in my data grid without having to copy and paste the code multiple times.

[Muthu Kumaran Gnanavinayagam]

Hi Liam, 

 

Thank you for contacting Syncfusion support. 

 

We have analyzed the reported query “Need for shared HeaderTemplate for GridColumns in SfDataGrid” from our side. We would like to let you know that if you want to show static header in all the columns you can use ResourceDictionary to create a Template and reuse the same template for all the columns to achieve your requirement as like below. 

 

Code example: 

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 

             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 

             xmlns:local="clr-namespace:DataGridDemo" 

             xmlns:sfgrid="clr-namespace:Syncfusion.SfDataGrid.XForms;assembly=Syncfusion.SfDataGrid.XForms" 

             xmlns:sfPager="clr-namespace:Syncfusion.SfDataGrid.XForms.DataPager;assembly=Syncfusion.SfDataGrid.XForms" 

             x:Class="DataGridDemo.MainPage"> 

 

    <ContentPage.Resources> 

        <ResourceDictionary> 

            <DataTemplate x:Name="HeaderTemplate" x:Key="HeaderTemplate"> 

                    <Label LineBreakMode="NoWrap" 

                 Margin="10,0,0,0" Text="Header" FontAttributes="Bold" 

                 FontSize="18" TextColor="White" HorizontalOptions="Center" VerticalOptions="Center"/> 

            </DataTemplate> 

        </ResourceDictionary> 

    </ContentPage.Resources> 

    <ContentPage.BindingContext> 

        <local:ViewModel /> 

    </ContentPage.BindingContext> 

        <sfgrid:SfDataGrid AllowGroupExpandCollapse="True" 

            AllowResizingColumn="True"  

            AllowSorting="True" ColumnSizer="Star" 

            AutoGenerateColumns="False"  

            ItemsSource="{Binding OrdersInfo}"> 

        <sfgrid:SfDataGrid.Columns> 

            <sfgrid:GridTextColumn MappingName="OrderID" HeaderTemplate="{StaticResource HeaderTemplate}"/> 

            <sfgrid:GridTextColumn MappingName="CustomerID" HeaderTemplate="{StaticResource HeaderTemplate}"/> 

            <sfgrid:GridTextColumn MappingName="FirstName" HeaderTemplate="{StaticResource HeaderTemplate}"/> 

        </sfgrid:SfDataGrid.Columns> 

        </sfgrid:SfDataGrid> 

</ContentPage> 

 

Note: If you want to show different values for different columns in header, you cannot share the template as like above. You need to have an HeaderTemplate individually for all the columns. 

 

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/152188/ze/DataGrid-1210249567 

 

Please let us know if you require further assistance. 

 

Regards, 

G.Muthu kumaran.