Skip to content

Commit 1ba2d6f

Browse files
FarjanaParveenFarjanaParveen
authored
Merge pull request #1 from SyncfusionExamples/MultipleSelectionBG
How to set multiple selection background in .NET MAUI DataGrid?
2 parents 5e7e0c5 + f1a09df commit 1ba2d6f

40 files changed

+1640
-2
lines changed

‎README.md‎

Lines changed: 100 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,100 @@
1-
# How-to-set-multiple-selection-background-in-.NET-MAUI-DataGrid
2-
How to set multiple selection background in .NET MAUI DataGrid
1+
# How to set multiple selection background in .NET MAUI DataGrid
2+
3+
In this article, we will show you how to set multiple selection background in [.NET MAUI DataGrid](https://www.syncfusion.com/maui-controls/maui-datagrid).
4+
5+
**XAML**
6+
```
7+
<syncfusion:SfDataGrid x:Name="sfGrid"
8+
ColumnWidthMode="Auto"
9+
GridLinesVisibility="Both"
10+
HeaderGridLinesVisibility="Both"
11+
AutoGenerateColumnsMode="None"
12+
SelectionMode="Multiple"
13+
ItemsSource="{Binding Employees}">
14+
15+
<syncfusion:SfDataGrid.Columns>
16+
<syncfusion:DataGridNumericColumn MappingName="EmployeeID"
17+
HeaderText="Employee ID" />
18+
<syncfusion:DataGridTextColumn MappingName="Name"
19+
HeaderText="Employee Name" />
20+
<syncfusion:DataGridTextColumn MappingName="Title"
21+
HeaderText="Designation" />
22+
<syncfusion:DataGridDateColumn MappingName="HireDate"
23+
HeaderText="Hire Date" />
24+
</syncfusion:SfDataGrid.Columns>
25+
</syncfusion:SfDataGrid>
26+
```
27+
28+
C#
29+
The below code illustrates how to set multiple selection background with custom Cell renderer.
30+
```
31+
public partial class MainPage : ContentPage
32+
{
33+
public MainPage()
34+
{
35+
InitializeComponent();
36+
sfGrid.CellRenderers.Remove("Text");
37+
sfGrid.CellRenderers.Add("Text", new CustomRenderer());
38+
sfGrid.CellRenderers.Remove("Numeric");
39+
sfGrid.CellRenderers.Add("Numeric", new CustomRenderer());
40+
sfGrid.CellRenderers.Remove("CheckBox");
41+
sfGrid.CellRenderers.Add("CheckBox", new CustomRenderer());
42+
sfGrid.CellRenderers.Remove("Template");
43+
sfGrid.CellRenderers.Add("Template", new CustomRenderer());
44+
sfGrid.CellRenderers.Remove("Image");
45+
sfGrid.CellRenderers.Add("Image", new CustomRenderer());
46+
sfGrid.CellRenderers.Remove("DateTime");
47+
sfGrid.CellRenderers.Add("DateTime", new CustomRenderer());
48+
sfGrid.CellRenderers.Remove("ComboBox");
49+
sfGrid.CellRenderers.Add("ComboBox", new CustomRenderer());
50+
}
51+
}
52+
53+
public class CustomRenderer : DataGridCellRenderer<View,View>
54+
{
55+
protected override void OnSetCellStyle(DataColumnBase dataColumn)
56+
{
57+
base.OnSetCellStyle(dataColumn);
58+
59+
if (dataColumn != null)
60+
{
61+
62+
var gridStyle = this.DataGrid?.DefaultStyle;
63+
DataGridCell? gridCell = dataColumn.ColumnElement;
64+
var dataRow = dataColumn.GetType().GetRuntimeProperties().FirstOrDefault(x => x.Name.Equals("DataRow"))!.GetValue(dataColumn);
65+
66+
if (DataGrid!.SelectionController.SelectedRows.Any(row => row.RowData == dataColumn.RowData && (dataRow as DataRow)!.IsSelectedRow))
67+
{
68+
var rowData = (dataRow as DataRow).RowData as Employee;
69+
if(rowData.Title.Equals("Assistant"))
70+
(gridCell as DataGridCell).Background = Color.FromRgba("caf0f8");
71+
else if (rowData.Title.Equals("Engineering"))
72+
(gridCell as DataGridCell).Background = Color.FromRgba("00b4d8");
73+
else if (rowData.Title.Equals("Designer"))
74+
(gridCell as DataGridCell).Background = Color.FromRgba("ff99c8");
75+
else if (rowData.Title.Equals("Manager"))
76+
(gridCell as DataGridCell).Background = Color.FromRgba("fb6f92");
77+
}
78+
79+
gridStyle = null;
80+
gridCell = null;
81+
}
82+
}
83+
}
84+
```
85+
86+
87+
![MultipleSelection.gif](https://support.syncfusion.com/kb/agent/attachment/inline?token=eyJhbGciOiJodHRwOi8vd3d3LnczLm9yZy8yMDAxLzA0L3htbGRzaWctbW9yZSNobWFjLXNoYTI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjI1MDEzIiwib3JnaWQiOiIzIiwiaXNzIjoic3VwcG9ydC5zeW5jZnVzaW9uLmNvbSJ9.bdYMSSL6gTiS4GiH7uL_It73U76jwrG1nXPYB_qW6RI)
88+
89+
[View sample in GitHub](https://github.com/SyncfusionExamples/How-to-set-multiple-selection-background-in-.NET-MAUI-DataGrid)
90+
91+
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).
92+
93+
##### Conclusion
94+
95+
I hope you enjoyed learning about how to set multiple selection background in .NET MAUI DataGrid.
96+
97+
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.
98+
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.
99+
100+
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/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/App.xaml.cs‎

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

‎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="Disabled"
8+
Title="SfDataGridSample">
9+
10+
<ShellContent
11+
Title="Home"
12+
ContentTemplate="{DataTemplate local:MainPage}"
13+
Route="MainPage" />
14+
15+
</Shell>

‎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/MainPage.xaml‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
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+
xmlns:syncfusion="clr-namespace:Syncfusion.Maui.DataGrid;assembly=Syncfusion.Maui.DataGrid"
5+
xmlns:local="clr-namespace:SfDataGridSample"
6+
x:Class="SfDataGridSample.MainPage">
7+
8+
<ContentPage.BindingContext>
9+
<local:EmployeeViewModel x:Name="viewModel"/>
10+
</ContentPage.BindingContext>
11+
12+
<syncfusion:SfDataGrid x:Name="sfGrid"
13+
ColumnWidthMode="Auto"
14+
GridLinesVisibility="Both"
15+
HeaderGridLinesVisibility="Both"
16+
AutoGenerateColumnsMode="None"
17+
SelectionMode="Multiple"
18+
ItemsSource="{Binding Employees}">
19+
20+
<syncfusion:SfDataGrid.Columns>
21+
<syncfusion:DataGridNumericColumn MappingName="EmployeeID"
22+
HeaderText="Employee ID" />
23+
<syncfusion:DataGridTextColumn MappingName="Name"
24+
HeaderText="Employee Name" />
25+
<syncfusion:DataGridTextColumn MappingName="Title"
26+
HeaderText="Designation" />
27+
<syncfusion:DataGridDateColumn MappingName="HireDate"
28+
HeaderText="Hire Date" />
29+
</syncfusion:SfDataGrid.Columns>
30+
</syncfusion:SfDataGrid>
31+
</ContentPage>

‎SfDataGridSample/MainPage.xaml.cs‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
using Syncfusion.Maui.DataGrid;
2+
using Syncfusion.Maui.GridCommon.ScrollAxis;
3+
using Syncfusion.Maui.Inputs;
4+
using System.Collections.Specialized;
5+
using System.Reflection;
6+
7+
namespace SfDataGridSample
8+
{
9+
public partial class MainPage : ContentPage
10+
{
11+
public MainPage()
12+
{
13+
InitializeComponent();
14+
sfGrid.CellRenderers.Remove("Text");
15+
sfGrid.CellRenderers.Add("Text", new CustomRenderer());
16+
sfGrid.CellRenderers.Remove("Numeric");
17+
sfGrid.CellRenderers.Add("Numeric", new CustomRenderer());
18+
sfGrid.CellRenderers.Remove("CheckBox");
19+
sfGrid.CellRenderers.Add("CheckBox", new CustomRenderer());
20+
sfGrid.CellRenderers.Remove("Template");
21+
sfGrid.CellRenderers.Add("Template", new CustomRenderer());
22+
sfGrid.CellRenderers.Remove("Image");
23+
sfGrid.CellRenderers.Add("Image", new CustomRenderer());
24+
sfGrid.CellRenderers.Remove("DateTime");
25+
sfGrid.CellRenderers.Add("DateTime", new CustomRenderer());
26+
sfGrid.CellRenderers.Remove("ComboBox");
27+
sfGrid.CellRenderers.Add("ComboBox", new CustomRenderer());
28+
}
29+
}
30+
31+
public class CustomRenderer : DataGridCellRenderer<View,View>
32+
{
33+
protected override void OnSetCellStyle(DataColumnBase dataColumn)
34+
{
35+
base.OnSetCellStyle(dataColumn);
36+
37+
if (dataColumn != null)
38+
{
39+
40+
var gridStyle = this.DataGrid?.DefaultStyle;
41+
DataGridCell? gridCell = dataColumn.ColumnElement;
42+
var dataRow = dataColumn.GetType().GetRuntimeProperties().FirstOrDefault(x => x.Name.Equals("DataRow"))!.GetValue(dataColumn);
43+
44+
if (DataGrid!.SelectionController.SelectedRows.Any(row => row.RowData == dataColumn.RowData && (dataRow as DataRow)!.IsSelectedRow))
45+
{
46+
var rowData = (dataRow as DataRow).RowData as Employee;
47+
if(rowData.Title.Equals("Assistant"))
48+
(gridCell as DataGridCell).Background = Color.FromRgba("caf0f8");
49+
else if (rowData.Title.Equals("Engineering"))
50+
(gridCell as DataGridCell).Background = Color.FromRgba("00b4d8");
51+
else if (rowData.Title.Equals("Designer"))
52+
(gridCell as DataGridCell).Background = Color.FromRgba("ff99c8");
53+
else if (rowData.Title.Equals("Manager"))
54+
(gridCell as DataGridCell).Background = Color.FromRgba("fb6f92");
55+
}
56+
57+
gridStyle = null;
58+
gridCell = null;
59+
}
60+
}
61+
}
62+
}

‎SfDataGridSample/MauiProgram.cs‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
using Microsoft.Extensions.Logging;
2+
using Syncfusion.Maui.Core;
3+
using Syncfusion.Maui.Core.Hosting;
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>()
13+
.ConfigureSyncfusionCore()
14+
.ConfigureFonts(fonts =>
15+
{
16+
fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
17+
fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
18+
});
19+
20+
#if DEBUG
21+
builder.Logging.AddDebug();
22+
#endif
23+
24+
return builder.Build();
25+
}
26+
}
27+
}

0 commit comments

Comments
 (0)