How to bind a property of the ViewModel in the HeaderTemplate?

1 min read

SfDataGrid allows you to load HeaderTemplate for a GridColumn to load a customized view of choice. You can bind a property in the ViewModel to a view inside the HeaderTemplate and set its BindingContext to be the reference of ViewModel to get it working.

Refer the below code example in which a property in ViewModel is bind to the Label and its BindingContext is set as ViewModel.

<sfgrid:SfDataGrid.Columns>
  <sfgrid:GridTextColumn MappingName="OrderID">
    <sfgrid:GridColumn.HeaderTemplate>
      <DataTemplate>
        <Label BindingContext="{StaticResource viewModel}" 
             Text="{Binding HeaderText}"
             TextColor="Black" 
             XAlign="Center"
             YAlign="Center"
             />                
       </DataTemplate>
     </sfgrid:GridColumn.HeaderTemplate>
  </sfgrid:GridTextColumn>
</sfgrid:SfDataGrid.Columns>

On executing the above code, the below output will be obtained.

$C:\Users\suhasini.suresh\AppData\Local\Microsoft\Windows\INetCacheContent.Word\Screenshot_2017-01-27-09-42-59_SfDataGrid_Sample.Droid.png$