How to load DataTemplate in HeaderCell ?
GridDataControl allows you to load DataTemplate in the HeaderCell. You can load the DataTemplate in HeaderCell of GridDataControl by using HeaderCellTemplate property present in the GridDataControl’s VisibleColumns. You can load any control(s) within the DataTemplate.
The following code sample demonstrates how CheckBox is loaded inside HeaderCellsControl using DataTemplate.
XAML
<syncfusion:GridDataCheckBoxVisibleColumn MappingName="status">
<syncfusion:GridDataCheckBoxVisibleColumn.HeaderCellTemplate>
<DataTemplate>
<CheckBox Name="checkbox"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Content="IsChecked"
Foreground=" Black"
IsChecked="{Binding CellBoundValue, Mode=TwoWay}"
IsThreeState="True">
<interact:Interaction.Behaviors>
<local:CheckBoxClickBehavior />
</interact:Interaction.Behaviors>
</CheckBox>
</DataTemplate>
</syncfusion:GridDataCheckBoxVisibleColumn.HeaderCellTemplate>
</syncfusion:GridDataCheckBoxVisibleColumn>
CheckBoxClickBehavior
GridDataControl allows you to control the behavior of the checkBox column. Here the behavior of what should be done when clicking on the checkBox in the header cell is written using the click event of the checkBox in the CheckBoxClickBehavior class. The following code example illustrates how the checkBox column is designed to behave when clicked.
C#
// CheckBoxClickBehavior
void AssociatedObject_Click(object sender, System.Windows.RoutedEventArgs e)
{
var checkBox = e.Source as CheckBox;
var gridDataControl = this.AssociatedObject.FindParentElementOfType<GridDataControl>();
if (gridDataControl != null)
{
bool? state = checkBox.IsChecked;
if (state == null)
{
state = false;
this.AssociatedObject.IsChecked = false;
}
if ((bool)state)
{
//Checks all rows in the IsChecked column when the check box in the header cell is checked
for (int i = 0; i < gridDataControl.Model.View.Records.Count; i++)
((Employee)gridDataControl.Model.View.Records[i].Data).status = true;
}
if (((bool)state) == false)
{
//UnChecks all rows in the IsChecked column when the check box in the header cell is Unchecked
for (int i = 0; i < gridDataControl.Model.View.Records.Count; i++)
((Employee)gridDataControl.Model.View.Records[i].Data).status = false;
}
gridDataControl.Model.InvalidateCell(GridRangeInfo.Col(0));
}
}
In this example when the checkBox loaded inside the header cell is checked, then all the rows in that column will be automatically checked and vice versa. Whereas when you uncheck some of the rows in the IsChecked column by editing them, the checkBox in the header cell will go to intermediate state. This is achieved by handling the CurrentCellChanged event in GridDataControl. The following code sample shows how the state of the checkBox in the header cell is changed by handling the CurrentCellChanged event.
C#
void AssociatedObject_CurrentCellChanged(object sender, Syncfusion.Windows.ComponentModel.SyncfusionRoutedEventArgs args)
{
int Checkedcount = 0;
int UnCheckedcount = 0;
var currentcell = this.AssociatedObject.Model.CurrencyManager.CurrentCell;
if (currentcell != null)
{
if (currentcell.RowIndex == 0 && currentcell.ColumnIndex == 0)
return;
foreach (var record in this.AssociatedObject.Model.View.Records)
{
var row = record.Data as Employee;
if (row.status == true)
Checkedcount++;
else
UnCheckedcount++;
}
}
if (Checkedcount >= 1 && UnCheckedcount >= 1)
{
//Setting intermediate state when some rows are checked and some are not
this.AssociatedObject.Model[0, 0].CellValue = null;
}
else if (Checkedcount >= 1 && UnCheckedcount == 0)
{
//Setting checked state when all the rows are checked
this.AssociatedObject.Model[0, 0].CellValue = true;
}
else if (Checkedcount == 0 && UnCheckedcount >= 1)
{
//Setting unchecked state when all the rows are unchecked
this.AssociatedObject.Model[0, 0].CellValue = false;
}
this.AssociatedObject.Model.Grid.InvalidateCell(GridRangeInfo.Cell(0, 0));
}
The following screenshot shows the output for the above code in GridDataControl.
