Skip to content

Commit cfdb5da

Browse files
ashok-kuvarajaashok-kuvaraja
authored
Merge pull request #1 from SyncfusionExamples/checkbox_Column
Maui-[959509]-Added KB sample for implementing Select All checkbox column in .NET MAUI DataGrid.
2 parents 69dd1e7 + 9502fd5 commit cfdb5da

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

42 files changed

+9348
-2
lines changed

‎README.md

Lines changed: 110 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,110 @@
1-
# How-to-implement-select-all-checkbox-column-in-.NET-MAUI-DataGrid-SfDataGrid
2-
This demo shows how to implement a Select All checkbox functionality within a checkbox column in the .NET MAUI DataGrid (SfDataGrid)?
1+
# How to implement select all checkbox column in .NET MAUI DataGrid(SfDataGrid) ?
2+
This sample demonstrates how to implement a **Select All** checkbox column in the Syncfusion [.NET MAUI DataGrid](https://help.syncfusion.com/maui/datagrid/overview) (`SfDataGrid`). It allows users to select or deselect all rows using a single checkbox in the header, while also enabling individual row selection.
3+
4+
## Xaml
5+
```
6+
<ContentPage.BindingContext>
7+
<local:SampleViewModel x:Name="viewModel" />
8+
</ContentPage.BindingContext>
9+
10+
<syncfusion:SfDataGrid x:Name="SampleGrid"
11+
HeaderGridLinesVisibility="Both"
12+
GridLinesVisibility="Both"
13+
ItemsSource="{Binding Items}"
14+
ColumnWidthMode="Auto"
15+
AutoGenerateColumnsMode="None">
16+
<syncfusion:SfDataGrid.Columns>
17+
<syncfusion:DataGridTemplateColumn HeaderText="Select All">
18+
<syncfusion:DataGridTemplateColumn.HeaderTemplate>
19+
<DataTemplate>
20+
<buttons:SfCheckBox x:Name="checkBox"
21+
BindingContext="{Binding Source={x:Reference MyPage},Path=BindingContext}"
22+
IsThreeState="True"
23+
IsChecked="{Binding SelectAllChecked,Mode=TwoWay}"
24+
StateChanged="SfCheckBox_StateChanged_1" />
25+
</DataTemplate>
26+
</syncfusion:DataGridTemplateColumn.HeaderTemplate>
27+
<syncfusion:DataGridTemplateColumn.CellTemplate>
28+
<DataTemplate>
29+
<buttons:SfCheckBox IsChecked="{Binding IsChecked}" StateChanged="SfCheckBox_StateChanged" />
30+
</DataTemplate>
31+
</syncfusion:DataGridTemplateColumn.CellTemplate>
32+
</syncfusion:DataGridTemplateColumn>
33+
<syncfusion:DataGridCheckBoxColumn MappingName="SelectAllChecked"
34+
HeaderText="SelectAll" />
35+
<syncfusion:DataGridTextColumn HeaderText="Name"
36+
MappingName="Name" />
37+
<syncfusion:DataGridTextColumn HeaderText="Description"
38+
MappingName="Description" />
39+
<syncfusion:DataGridTextColumn HeaderText="Category"
40+
MappingName="Category" />
41+
<syncfusion:DataGridTextColumn HeaderText="Price"
42+
MappingName="Price" />
43+
</syncfusion:SfDataGrid.Columns>
44+
</syncfusion:SfDataGrid>
45+
```
46+
47+
## Xaml.cs
48+
```
49+
public partial class MainPage : ContentPage
50+
{
51+
public MainPage()
52+
{
53+
InitializeComponent();
54+
}
55+
56+
private void SfCheckBox_StateChanged(object sender, Syncfusion.Maui.Buttons.StateChangedEventArgs e)
57+
{
58+
var viewModel = BindingContext as SampleViewModel;
59+
60+
if (viewModel != null && !viewModel._isUpdating)
61+
{
62+
viewModel._isUpdating = true;
63+
if (viewModel.Items.All(x => x.IsChecked == true))
64+
{
65+
viewModel.SelectAllChecked = true;
66+
}
67+
else if (viewModel.Items.All(x => x.IsChecked == false))
68+
{
69+
viewModel.SelectAllChecked = false;
70+
}
71+
else
72+
{
73+
viewModel.SelectAllChecked = null;
74+
}
75+
viewModel._isUpdating = false;
76+
}
77+
}
78+
79+
private void SfCheckBox_StateChanged_1(object sender, StateChangedEventArgs e)
80+
{
81+
var viewModel = BindingContext as SampleViewModel;
82+
if (viewModel != null)
83+
{
84+
if (!viewModel._isUpdating)
85+
{
86+
viewModel._isUpdating = true;
87+
foreach (var item in viewModel.Items)
88+
{
89+
item.IsChecked = viewModel.SelectAllChecked;
90+
}
91+
viewModel._isUpdating = false;
92+
}
93+
}
94+
}
95+
}
96+
```
97+
98+
### ScreenShot
99+
<img src="https://support.syncfusion.com/kb/agent/attachment/inline?token=eyJhbGciOiJodHRwOi8vd3d3LnczLm9yZy8yMDAxLzA0L3htbGRzaWctbW9yZSNobWFjLXNoYTI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjQwNjY0Iiwib3JnaWQiOiIzIiwiaXNzIjoic3VwcG9ydC5zeW5jZnVzaW9uLmNvbSJ9._kkYJ5p5hPQUfYUfJ9Tbpuq3TZDI6S2xwqSCG5dzUKs" width=800/>
100+
101+
[View sample in GitHub](https://github.com/SyncfusionExamples/How-to-implement-select-all-checkbox-column-in-.NET-MAUI-DataGrid-SfDataGrid)
102+
103+
Take a moment to explore this [documentation](https://help.syncfusion.com/maui/datagrid/overview), where you can find more information about Syncfusion .NET MAUI DataGrid (SfDataGrid) with code examples. Please refer to this [link](https://www.syncfusion.com/maui-controls/maui-datagrid) to learn about the essential features of Syncfusion .NET MAUI DataGrid (SfDataGrid).
104+
105+
### Conclusion
106+
I hope you enjoyed learning about How to implement select all checkbox column in SfDataGrid.
107+
108+
You can refer to our [.NET MAUI DataGrid’s feature tour](https://www.syncfusion.com/maui-controls/maui-datagrid) page to learn about its other groundbreaking feature representations. You can also explore our [.NET MAUI DataGrid Documentation](https://help.syncfusion.com/maui/datagrid/getting-started) to understand how to present and manipulate data. For current customers, you can check out our .NET MAUI components on the [License and Downloads](https://www.syncfusion.com/sales/teamlicense) page. If you are new to Syncfusion, you can try our 30-day [free trial](https://www.syncfusion.com/downloads/maui) to explore our .NET MAUI DataGrid and other .NET MAUI components.
109+
110+
If you have any queries or require clarifications, please let us know in the comments below. You can also contact us through our [support forums](https://www.syncfusion.com/forums),[Direct-Trac](https://support.syncfusion.com/create) or [feedback portal](https://www.syncfusion.com/feedback/maui?control=sfdatagrid), or the feedback portal. We are always happy to assist you!

‎SfDataGridSample/SfDataGridSample.sln

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
2+
Microsoft Visual Studio Solution File, Format Version 12.00
3+
# Visual Studio Version 17
4+
VisualStudioVersion = 17.13.35931.197 d17.13
5+
MinimumVisualStudioVersion = 10.0.40219.1
6+
Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "SfDataGridSample", "SfDataGridSample\SfDataGridSample.csproj", "{8B0CCADE-31B6-4C6A-B038-B53AE93C5D0F}"
7+
EndProject
8+
Global
9+
GlobalSection(SolutionConfigurationPlatforms) = preSolution
10+
Debug|Any CPU = Debug|Any CPU
11+
Release|Any CPU = Release|Any CPU
12+
EndGlobalSection
13+
GlobalSection(ProjectConfigurationPlatforms) = postSolution
14+
{8B0CCADE-31B6-4C6A-B038-B53AE93C5D0F}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
15+
{8B0CCADE-31B6-4C6A-B038-B53AE93C5D0F}.Debug|Any CPU.Build.0 = Debug|Any CPU
16+
{8B0CCADE-31B6-4C6A-B038-B53AE93C5D0F}.Release|Any CPU.ActiveCfg = Release|Any CPU
17+
{8B0CCADE-31B6-4C6A-B038-B53AE93C5D0F}.Release|Any CPU.Build.0 = Release|Any CPU
18+
EndGlobalSection
19+
GlobalSection(SolutionProperties) = preSolution
20+
HideSolutionNode = FALSE
21+
EndGlobalSection
22+
GlobalSection(ExtensibilityGlobals) = postSolution
23+
SolutionGuid = {1CBF420A-4749-4271-B943-FF96A0038D46}
24+
EndGlobalSection
25+
EndGlobal

‎SfDataGridSample/SfDataGridSample/App.xaml

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<?xml version = "1.0" encoding = "UTF-8" ?>
2+
<Application xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
3+
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
4+
xmlns:local="clr-namespace:SfDataGridSample"
5+
x:Class="SfDataGridSample.App">
6+
<Application.Resources>
7+
<ResourceDictionary>
8+
<ResourceDictionary.MergedDictionaries>
9+
<ResourceDictionary Source="Resources/Styles/Colors.xaml" />
10+
<ResourceDictionary Source="Resources/Styles/Styles.xaml" />
11+
</ResourceDictionary.MergedDictionaries>
12+
</ResourceDictionary>
13+
</Application.Resources>
14+
</Application>

‎SfDataGridSample/SfDataGridSample/App.xaml.cs

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
namespace SfDataGridSample
2+
{
3+
public partial class App : Application
4+
{
5+
public App()
6+
{
7+
InitializeComponent();
8+
}
9+
10+
protected override Window CreateWindow(IActivationState? activationState)
11+
{
12+
return new Window(new AppShell());
13+
}
14+
}
15+
}

‎SfDataGridSample/SfDataGridSample/AppShell.xaml

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<?xml version="1.0" encoding="UTF-8" ?>
2+
<Shell
3+
x:Class="SfDataGridSample.AppShell"
4+
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
5+
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
6+
xmlns:local="clr-namespace:SfDataGridSample"
7+
Shell.FlyoutBehavior="Flyout"
8+
Title="SfDataGridSample">
9+
10+
<ShellContent
11+
Title="Home"
12+
ContentTemplate="{DataTemplate local:MainPage}"
13+
Route="MainPage" />
14+
15+
</Shell>

‎SfDataGridSample/SfDataGridSample/AppShell.xaml.cs

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
namespace SfDataGridSample
2+
{
3+
public partial class AppShell : Shell
4+
{
5+
public AppShell()
6+
{
7+
InitializeComponent();
8+
}
9+
}
10+
}

‎SfDataGridSample/SfDataGridSample/MainPage.xaml

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
<?xml version="1.0" encoding="utf-8" ?>
2+
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
3+
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
4+
x:Name="MyPage"
5+
xmlns:syncfusion="clr-namespace:Syncfusion.Maui.DataGrid;assembly=Syncfusion.Maui.DataGrid"
6+
xmlns:buttons="clr-namespace:Syncfusion.Maui.Buttons;assembly=Syncfusion.Maui.Buttons"
7+
xmlns:listView="clr-namespace:Syncfusion.Maui.ListView;assembly=Syncfusion.Maui.ListView"
8+
xmlns:local="clr-namespace:SfDataGridSample.ViewModel"
9+
x:Class="SfDataGridSample.MainPage">
10+
11+
<ContentPage.BindingContext>
12+
<local:SampleViewModel x:Name="viewModel" />
13+
</ContentPage.BindingContext>
14+
15+
<Grid Padding="10">
16+
<syncfusion:SfDataGrid x:Name="SampleGrid"
17+
HeaderGridLinesVisibility="Both"
18+
GridLinesVisibility="Both"
19+
ItemsSource="{Binding Items}"
20+
ColumnWidthMode="Auto"
21+
AutoGenerateColumnsMode="None">
22+
<syncfusion:SfDataGrid.Columns>
23+
24+
<syncfusion:DataGridTemplateColumn HeaderText="Select All">
25+
<syncfusion:DataGridTemplateColumn.HeaderTemplate>
26+
<DataTemplate>
27+
<buttons:SfCheckBox x:Name="checkBox"
28+
BindingContext="{Binding Source={x:Reference MyPage},Path=BindingContext}"
29+
IsThreeState="True"
30+
IsChecked="{Binding SelectAllChecked,Mode=TwoWay}"
31+
StateChanged="SfCheckBox_StateChanged_1" />
32+
</DataTemplate>
33+
</syncfusion:DataGridTemplateColumn.HeaderTemplate>
34+
<syncfusion:DataGridTemplateColumn.CellTemplate>
35+
<DataTemplate>
36+
<buttons:SfCheckBox IsChecked="{Binding IsChecked}" StateChanged="SfCheckBox_StateChanged" />
37+
</DataTemplate>
38+
</syncfusion:DataGridTemplateColumn.CellTemplate>
39+
</syncfusion:DataGridTemplateColumn>
40+
<syncfusion:DataGridCheckBoxColumn MappingName="SelectAllChecked"
41+
HeaderText="SelectAll" />
42+
<syncfusion:DataGridTextColumn HeaderText="Name"
43+
MappingName="Name" />
44+
<syncfusion:DataGridTextColumn HeaderText="Description"
45+
MappingName="Description" />
46+
<syncfusion:DataGridTextColumn HeaderText="Category"
47+
MappingName="Category" />
48+
<syncfusion:DataGridTextColumn HeaderText="Price"
49+
MappingName="Price" />
50+
</syncfusion:SfDataGrid.Columns>
51+
</syncfusion:SfDataGrid>
52+
</Grid>
53+
</ContentPage>

‎SfDataGridSample/SfDataGridSample/MainPage.xaml.cs

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
using SfDataGridSample.ViewModel;
2+
using Syncfusion.Maui.Buttons;
3+
4+
namespace SfDataGridSample
5+
{
6+
public partial class MainPage : ContentPage
7+
{
8+
public MainPage()
9+
{
10+
InitializeComponent();
11+
}
12+
13+
private void SfCheckBox_StateChanged(object sender, Syncfusion.Maui.Buttons.StateChangedEventArgs e)
14+
{
15+
var viewModel = BindingContext as SampleViewModel;
16+
17+
if (viewModel != null && !viewModel._isUpdating)
18+
{
19+
viewModel._isUpdating = true;
20+
if (viewModel.Items.All(x => x.IsChecked == true))
21+
{
22+
viewModel.SelectAllChecked = true;
23+
}
24+
else if (viewModel.Items.All(x => x.IsChecked == false))
25+
{
26+
viewModel.SelectAllChecked = false;
27+
}
28+
else
29+
{
30+
viewModel.SelectAllChecked = null;
31+
}
32+
viewModel._isUpdating = false;
33+
}
34+
}
35+
36+
private void SfCheckBox_StateChanged_1(object sender, StateChangedEventArgs e)
37+
{
38+
var viewModel = BindingContext as SampleViewModel;
39+
if (viewModel != null)
40+
{
41+
if (!viewModel._isUpdating)
42+
{
43+
viewModel._isUpdating = true;
44+
foreach (var item in viewModel.Items)
45+
{
46+
item.IsChecked = viewModel.SelectAllChecked;
47+
}
48+
viewModel._isUpdating = false;
49+
}
50+
}
51+
}
52+
}
53+
54+
}

‎SfDataGridSample/SfDataGridSample/MauiProgram.cs

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
using Microsoft.Extensions.Logging;
2+
using Syncfusion.Maui.Core.Hosting;
3+
4+
namespace SfDataGridSample
5+
{
6+
public static class MauiProgram
7+
{
8+
public static MauiApp CreateMauiApp()
9+
{
10+
var builder = MauiApp.CreateBuilder();
11+
builder
12+
.UseMauiApp<App>().ConfigureSyncfusionCore()
13+
.ConfigureFonts(fonts =>
14+
{
15+
fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
16+
fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
17+
});
18+
19+
#if DEBUG
20+
builder.Logging.AddDebug();
21+
#endif
22+
23+
return builder.Build();
24+
}
25+
}
26+
}

‎SfDataGridSample/SfDataGridSample/Model/ItemModel.cs

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
using System.ComponentModel;
2+
using System.Runtime.CompilerServices;
3+
4+
namespace SfDataGridSample.Model
5+
{
6+
public class ItemModel : INotifyPropertyChanged
7+
{
8+
private bool? _isChecked;
9+
public string Name { get; set; }
10+
public string Description { get; set; }
11+
public string Category { get; set; }
12+
public double Price { get; set; }
13+
public int Stock { get; set; }
14+
public string SKU { get; set; }
15+
public string Supplier { get; set; }
16+
public string Location { get; set; }
17+
public double Discount { get; set; }
18+
public double Rating { get; set; }
19+
20+
public bool? IsChecked
21+
{
22+
get => _isChecked;
23+
set
24+
{
25+
if (_isChecked != value)
26+
{
27+
_isChecked = value;
28+
OnPropertyChanged();
29+
}
30+
}
31+
}
32+
33+
public event PropertyChangedEventHandler PropertyChanged;
34+
35+
protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
36+
{
37+
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
38+
}
39+
}
40+
}

‎SfDataGridSample/SfDataGridSample/Platforms/Android/AndroidManifest.xml

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<?xml version="1.0" encoding="utf-8"?>
2+
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
3+
<application android:allowBackup="true" android:icon="@mipmap/appicon" android:roundIcon="@mipmap/appicon_round" android:supportsRtl="true"></application>
4+
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
5+
<uses-permission android:name="android.permission.INTERNET" />
6+
</manifest>

‎SfDataGridSample/SfDataGridSample/Platforms/Android/MainActivity.cs

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
using Android.App;
2+
using Android.Content.PM;
3+
using Android.OS;
4+
5+
namespace SfDataGridSample
6+
{
7+
[Activity(Theme = "@style/Maui.SplashTheme", MainLauncher = true, LaunchMode = LaunchMode.SingleTop, ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation | ConfigChanges.UiMode | ConfigChanges.ScreenLayout | ConfigChanges.SmallestScreenSize | ConfigChanges.Density)]
8+
public class MainActivity : MauiAppCompatActivity
9+
{
10+
}
11+
}

0 commit comments

Comments
 (0)