Category / Section
How to change the CheckBoxColumn values based on row selection in WPF DataGrid (SfDataGrid)?
4 mins read
You can able to select multiple rows using SelectionMode property in WPF DataGrid (SfDataGrid). You can process the CheckBoxSelection using GridCheckBoxColumn and a Boolean property called IsSelected in Model. You can also select all the rows in SfDataGrid by defining the CheckBox in header cell of GridCheckBoxColumn using GridColumn.HeaderTemplate.
<Syncfusion:SfDataGrid x:Name="datagrid"
ColumnSizer="Star"
NavigationMode="Row"
AllowEditing="True"
AutoGenerateColumns="False"
SelectionMode="Multiple"
ItemsSource="{Binding OrderInfoCollection}">
<Syncfusion:SfDataGrid.Columns>
<Syncfusion:GridCheckBoxColumn MappingName="IsSelected">
<Syncfusion:GridCheckBoxColumn.HeaderTemplate>
<DataTemplate>
<CheckBox IsChecked="{Binding Path =IsSelectAll, Source={StaticResource viewmodel}, Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}" Command="local:Commands.CheckAndUnCheck" CommandParameter="{Binding ElementName=datagrid}" />
</DataTemplate>
</Syncfusion:GridCheckBoxColumn.HeaderTemplate>
</Syncfusion:GridCheckBoxColumn>
<Syncfusion:GridTextColumn MappingName="OrderID" HeaderText="OrderID"/>
<Syncfusion:GridTextColumn MappingName="CustomerID" HeaderText="CustomerID"/>
<Syncfusion:GridTextColumn MappingName="CustomerName" HeaderText="CustomerName"/>
<Syncfusion:GridTextColumn MappingName="Country" HeaderText="Country"/>
<Syncfusion:GridTextColumn MappingName="ShipCity" HeaderText="ShipCity"/>
</Syncfusion:SfDataGrid.Columns>
</Syncfusion:SfDataGrid>
You have to use IsSelectAll property in ViewModel to update the SelectAll check box value when performing selection in SfDataGrid. By using Command, you can select all the rows in SfDataGrid when the SelectAll CheckBox is checked and also you can clear the selection for all the rows in SfDataGrid when the CheckBox is unchecked.
public static class Commands
{
static Commands()
{
CommandManager.RegisterClassCommandBinding(typeof(CheckBox), new CommandBinding(CheckAndUnCheck, OnCheckUnCheckCommand, OnCanExecuteCheckAndUnCheck));
}
public static RoutedCommand CheckAndUnCheck = new RoutedCommand("CheckAndUnCheck", typeof(CheckBox));
private static void OnCheckUnCheckCommand(object sender, ExecutedRoutedEventArgs args)
{
var sfdatagrid = (args.Parameter as SfDataGrid);
var viewmodel = (sfdatagrid.DataContext as ViewModel);
var checkbox = (sender as CheckBox).IsChecked;
if (viewmodel != null)
{
//SelectAll the Records in SfDataGrid
if (checkbox == true)
{
sfdatagrid.SelectAll();
foreach (var collection in viewmodel.OrderInfoCollection)
{
if (collection.IsSelected == false)
collection.IsSelected = true;
}
}
//Clear the selection for all the Records in SfDataGrid
else if (checkbox == false)
{
sfdatagrid.ClearSelections(false);
foreach (var collection in viewmodel.OrderInfoCollection)
{
if (collection.IsSelected == true)
collection.IsSelected = false;
}
}
}
}
private static void OnCanExecuteCheckAndUnCheck(object sender, CanExecuteRoutedEventArgs args)
{
args.CanExecute = true;
}
}
You have to override ProcessPointerReleased and ProcessKeyDown methods in GridSelectionController to update the IsSelected value of the particular row while selecting or deselecting.
this.datagrid.SelectionController = new RowSelectionController(this.datagrid);
Public class RowSelectionController : GridSelectionController
{
public RowSelectionController(SfDataGrid dataGrid)
: base(dataGrid)
{ }
protected override void ProcessPointerReleased(MouseButtonEventArgs args, RowColumnIndex rowColumnIndex)
{
base.ProcessPointerReleased(args, rowColumnIndex);
CheckBoxSelection(rowColumnIndex);
args.Handled = true;
DataGrid.Focus();
}
protected override void ProcessKeyDown(KeyEventArgs args)
{
base.ProcessKeyDown(args);
if (args.Key == Key.Space)
CheckBoxSelection(this.CurrentCellManager.CurrentRowColumnIndex);
}
private void CheckBoxSelection(RowColumnIndex rowcolumnIndex)
{
//Get the selectedrows
var selectedrow = this.SelectedRows.FindAll(item => item.RowIndex == rowcolumnIndex.RowIndex);
//Change the value for GridCheckBoxColumn based on Selection
if (selectedrow.Count == 0)
{
var row = this.DataGrid.GetRecordAtRowIndex(rowcolumnIndex.RowIndex);
(row as OrderInfo).IsSelected = false;
}
else
(selectedrow[0].RowData as OrderInfo).IsSelected = true;
var collectioncount = (DataGrid.DataContext as ViewModel).OrderInfoCollection.Count;
var selecteditemcount = DataGrid.SelectedItems.Count;
//Change the value for CheckBox in ColumnHeader
if (selecteditemcount == collectioncount)
(this.DataGrid.DataContext as ViewModel).IsSelectAll = true;
else if (selecteditemcount == 0)
(this.DataGrid.DataContext as ViewModel).IsSelectAll = false;
else
(this.DataGrid.DataContext as ViewModel).IsSelectAll = null;
}
}
The following screen shot demonstrate the CheckBoxSelection in SfDataGrid.
