How to bind a view model property to header template ?

1 min read

SfDataGrid allows you to bind the view model property to HeaderTemplate by setting the BindingContext of the GridColumn as ViewModel.

The below code example illustrates how to bind the view model property to Header Template.

 
<sfgrid:SfDataGrid x:Name="dataGrid" 
                    ItemsSource="{Binding OrdersInfo}" 
                    AutoGenerateColumns="False"
                    ColumnSizer="Star" 
                    SelectionMode="Single">
      <sfgrid:SfDataGrid.Columns>
        <sfgrid:GridTextColumn MappingName="OrderID">
           <sfgrid:GridColumn.HeaderTemplate>
              <DataTemplate>
               <Label BindingContext="{StaticResource viewModel}" 
                            VerticalTextAlignment ="Center"
                            HorizontalTextAlignment="Center"
                      Text="{Binding Headertext}" TextColor="Blue" IsVisible="{Binding _Visibility}"/>
              </DataTemplate>
            </sfgrid:GridColumn.HeaderTemplate>
        </sfgrid:GridTextColumn>
        <sfgrid:GridTextColumn MappingName="EmployeeID"/>
        <sfgrid:GridTextColumn MappingName="FirstName"/>
        <sfgrid:GridTextColumn MappingName="ShipCity"/>
      </sfgrid:SfDataGrid.Columns>
 </sfgrid:SfDataGrid>

Refer the following screenshot that shows the outcome upon execution of the above code.