Skip to content

Commit 4552a8f

Browse files
ashok-kuvarajaashok-kuvaraja
authored
Merge pull request #1 from SyncfusionExamples/860610
MAUI-860610-How to load custom views in .NET MAUI DataGrid (SfDataGrid) cells.
2 parents cd0d58b + 1bd58c3 commit 4552a8f

41 files changed

Lines changed: 1395 additions & 2 deletions

Some content is hidden

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

‎README.md‎

Lines changed: 37 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,37 @@
1-
# How-to-load-custom-views-in-.NET-MAUI-DataGrid-SfDataGrid-cells-
2-
This demo shows how to load custom views in .NET MAUI DataGrid (SfDataGrid) cells?
1+
# How to load custom views in .NET MAUI DataGrid SfDataGrid cells.
2+
[SfDataGrid](https://www.syncfusion.com/maui-controls/maui-datagrid) provides the capability to host one or more views within a cell by configuring the [DataGridTemplateColumn.CellTemplate](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.DataGrid.DataGridTemplateColumn.html#Syncfusion_Maui_DataGrid_DataGridTemplateColumn_CellTemplate) property of [DataGridTemplateColumn](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.DataGrid.DataGridTemplateColumn.html).
3+
4+
Please refer to the code example below, where both an Image and a Label are loaded inside the CellTemplate of `DataGridTemplateColumn`. It's important to note that the underlying data object serves as the binding context for both the Image and Label within the CellTemplate.
5+
6+
##### Xaml:
7+
```XML
8+
<syncfusion:sfdatagrid columnwidthmode="Auto" sortingmode="Single" itemssource="{Binding Employees}">
9+
<syncfusion:sfdatagrid.columns>
10+
<syncfusion:datagridtemplatecolumn mappingname="EmployeeID" width="150" headertext="Employee ID">
11+
<syncfusion:datagridtemplatecolumn.celltemplate>
12+
<datatemplate>
13+
<stacklayout orientation="Horizontal">
14+
<img source="dotnet_bot.png">
15+
<label text="{Binding EmployeeID}" verticaltextalignment="Center">
16+
</label></stacklayout>
17+
</datatemplate>
18+
</syncfusion:datagridtemplatecolumn.celltemplate>
19+
</syncfusion:datagridtemplatecolumn>
20+
</syncfusion:sfdatagrid.columns>
21+
</syncfusion:sfdatagrid>
22+
```
23+
24+
25+
Executing the code example above yields the following output.
26+
27+
<img src="customView.png" width="360">
28+
29+
[View sample in GitHub](https://github.com/SyncfusionExamples/How-to-load-custom-views-in-.NET-MAUI-DataGrid-SfDataGrid-cells/tree/master)
30+
31+
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).
32+
33+
##### Conclusion
34+
35+
I hope you enjoyed learning about how to load custom views in .NET MAUI DataGrid (SfDataGrid) cells.
36+
37+
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 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/account/downloads) page. If you are new to Syncfusion, you can try our 30-day free trial to explore our .NET MAUI DataGrid and other .NET MAUI components. 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/account/login?ReturnUrl=%2Faccount%2Fconnect%2Fauthorize%2Fcallback%3Fclient_id%3Dc54e52f3eb3cde0c3f20474f1bc179ed%26redirect_uri%3Dhttps%253A%252F%252Fsupport.syncfusion.com%252Fagent%252Flogincallback%26response_type%3Dcode%26scope%3Dopenid%2520profile%2520agent.api%2520integration.api%2520offline_access%2520kb.api%26state%3D8db41f98953a4d9ba40407b150ad4cf2%26code_challenge%3DvwHoT64z2h21eP_A9g7JWtr3vp3iPrvSjfh5hN5C7IE%26code_challenge_method%3DS256%26response_mode%3Dquery) or [feedback portal](https://www.syncfusion.com/feedback/maui?control=sfdatagrid), or the feedback portal. We are always happy to assist you!

‎SfDataGridSample.sln‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
2+
Microsoft Visual Studio Solution File, Format Version 12.00
3+
# Visual Studio Version 17
4+
VisualStudioVersion = 17.8.34309.116
5+
MinimumVisualStudioVersion = 10.0.40219.1
6+
Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "SfDataGridSample", "SfDataGridSample\SfDataGridSample.csproj", "{B98BD67C-738A-4295-9C50-C99E9AF5C281}"
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+
{B98BD67C-738A-4295-9C50-C99E9AF5C281}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
15+
{B98BD67C-738A-4295-9C50-C99E9AF5C281}.Debug|Any CPU.Build.0 = Debug|Any CPU
16+
{B98BD67C-738A-4295-9C50-C99E9AF5C281}.Debug|Any CPU.Deploy.0 = Debug|Any CPU
17+
{B98BD67C-738A-4295-9C50-C99E9AF5C281}.Release|Any CPU.ActiveCfg = Release|Any CPU
18+
{B98BD67C-738A-4295-9C50-C99E9AF5C281}.Release|Any CPU.Build.0 = Release|Any CPU
19+
{B98BD67C-738A-4295-9C50-C99E9AF5C281}.Release|Any CPU.Deploy.0 = Release|Any CPU
20+
EndGlobalSection
21+
GlobalSection(SolutionProperties) = preSolution
22+
HideSolutionNode = FALSE
23+
EndGlobalSection
24+
GlobalSection(ExtensibilityGlobals) = postSolution
25+
SolutionGuid = {B0D9A0CE-D9C3-4CC3-9746-DDFB2608D4B2}
26+
EndGlobalSection
27+
EndGlobal

‎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: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
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 />
10+
</ContentPage.BindingContext>
11+
12+
<syncfusion:SfDataGrid ColumnWidthMode="Auto"
13+
SortingMode="Single"
14+
ItemsSource="{Binding Employees}">
15+
<syncfusion:SfDataGrid.Columns>
16+
<syncfusion:DataGridTemplateColumn MappingName="EmployeeID"
17+
Width="150"
18+
HeaderText="Employee ID">
19+
<syncfusion:DataGridTemplateColumn.CellTemplate>
20+
<DataTemplate>
21+
<StackLayout Orientation="Horizontal">
22+
<Image Source="dotnet_bot.png" />
23+
<Label Text="{Binding EmployeeID}" VerticalTextAlignment="Center"/>
24+
</StackLayout>
25+
</DataTemplate>
26+
</syncfusion:DataGridTemplateColumn.CellTemplate>
27+
</syncfusion:DataGridTemplateColumn>
28+
</syncfusion:SfDataGrid.Columns>
29+
</syncfusion:SfDataGrid>
30+
31+
32+
</ContentPage>

‎SfDataGridSample/MainPage.xaml.cs‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
using Microsoft.Maui;
2+
using Syncfusion.Maui.Data;
3+
using Syncfusion.Maui.DataGrid;
4+
using Syncfusion.Maui.DataGrid.Helper;
5+
6+
namespace SfDataGridSample
7+
{
8+
public partial class MainPage : ContentPage
9+
{
10+
public MainPage()
11+
{
12+
InitializeComponent();
13+
}
14+
}
15+
}

‎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>()
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+
builder.ConfigureSyncfusionCore();
23+
return builder.Build();
24+
}
25+
}
26+
}

‎SfDataGridSample/Model/Employee.cs‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
using System.ComponentModel;
2+
3+
namespace SfDataGridSample
4+
{
5+
public class Employee
6+
{
7+
public string EmployeeID { get; set; }
8+
public string Name { get; set; }
9+
public long IDNumber { get; set; }
10+
public string Title { get; set; }
11+
public int ContactID { get; set; }
12+
public DateTime BirthDate { get; set; }
13+
public string MaritalStatus { get; set; }
14+
public string Gender { get; set; }
15+
public DateTime HireDate { get; set; }
16+
public int SickLeaveHours { get; set; }
17+
public double Salary { get; set; }
18+
public string LoginID { get; set; }
19+
public int ManagerID { get; set; }
20+
public bool EmployeeStatus { get; set; }
21+
public int Rating { get; set; }
22+
}
23+
24+
}

0 commit comments

Comments
 (0)