Skip to content

Commit fa1d800

Browse files
FarjanaParveenFarjanaParveen
authored
Merge pull request #1 from SyncfusionExamples/887112
MAUI - 887112 - How to change the row height when using the query row height event dynamically in MAUI DataGrid?
2 parents 78ed886 + 55c0a75 commit fa1d800

Some content is hidden

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

41 files changed

+1444
-2
lines changed

‎README.md‎

Lines changed: 78 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,78 @@
1-
# How-to-change-the-row-height-when-using-the-query-row-height-event-dynamically-in-MAUI-DataGrid-
2-
How to change the row height when using the query row height event dynamically in MAUI DataGrid?
1+
# How to change the row height when using the query row height event dynamically in MAUI DataGrid?
2+
3+
The [.NET MAUI DataGrid](https://www.syncfusion.com/maui-controls/maui-datagrid) provides support for setting row height based on the row content using the QueryRowHeight event.
4+
5+
In order to trigger this event at runtime, like resizing the windows or resizing the column, We can use the `InvalidateRowHeight` method to invoke the event at runtime.
6+
7+
#### XAML
8+
```XML
9+
<syncfusion:SfDataGrid x:Name="dataGrid"
10+
AutoGenerateColumnsMode="None"
11+
AllowResizingColumns="True"
12+
ColumnResizing="dataGrid_ColumnResizing"
13+
GridLinesVisibility="Both"
14+
HeaderGridLinesVisibility="Both"
15+
x:DataType="viewModel:EmployeeViewModel"
16+
QueryRowHeight="dataGrid_QueryRowHeight"
17+
PropertyChanged="dataGrid_PropertyChanged"
18+
ItemsSource="{Binding EmployeeInformation}">
19+
<syncfusion:SfDataGrid.Columns>
20+
<syncfusion:DataGridTextColumn HeaderText="Name" MappingName="Name" />
21+
<syncfusion:DataGridTextColumn HeaderText="Employee ID" MappingName="EmployeeID" />
22+
<syncfusion:DataGridTextColumn HeaderText="Telephone" MappingName="Telephone"/>
23+
<syncfusion:DataGridTextColumn HeaderText="About" MappingName="About"/>
24+
</syncfusion:SfDataGrid.Columns>
25+
</syncfusion:SfDataGrid>
26+
27+
```
28+
#### C#
29+
This event will set the row height based on its content.
30+
```C#
31+
private void ordersDataGrid_QueryRowHeight(object sender, Syncfusion.Maui.DataGrid.DataGridQueryRowHeightEventArgs e)
32+
{
33+
if (e.RowIndex > 0)
34+
{
35+
e.Height = e.GetIntrinsicRowHeight(e.RowIndex);
36+
e.Handled = true;
37+
}
38+
}
39+
```
40+
This event will be called when the column is resized. We will get the visible rows in the view and then we will set the row height dynamically when the column is resized.
41+
```C#
42+
private void dataGrid_ColumnResizing(object sender, Syncfusion.Maui.DataGrid.DataGridColumnResizingEventArgs e)
43+
{
44+
var VisibleRowCount = dataGrid.GetVisualContainer().ScrollRows.GetVisibleLines().Count;
45+
for (int i = 0; i < VisibleRowCount; i++)
46+
{
47+
dataGrid.InvalidateRowHeight(i);
48+
}
49+
}
50+
```
51+
This event will be called when the window or datagrid is resized. We will get the visible rows in the view, and then we will set the row height dynamically .
52+
```C#
53+
private void ordersDataGrid_PropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
54+
{
55+
if (e.PropertyName!.Equals("Width"))
56+
{
57+
var VisibleRowCount = dataGrid.GetVisualContainer().ScrollRows.GetVisibleLines().Count;
58+
for (int i = 0; i < VisibleRowCount; i++)
59+
{
60+
dataGrid.InvalidateRowHeight(i);
61+
}
62+
}
63+
}
64+
65+
```
66+
![DataGrid Dynamic Row height](SfDataGrid_Dynamic_RowHeight.gif)
67+
68+
[View sample in GitHub](https://github.com/SyncfusionExamples/How-to-change-the-row-height-when-using-the-query-row-height-event-dynamically-in-MAUI-DataGrid)
69+
70+
Take a moment to pursue this [documentation](https://help.syncfusion.com/maui/datagrid/overview), where you can find more about Syncfusion .NET MAUI DataGrid (SfDataGrid) with code examples.
71+
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).
72+
73+
### Conclusion
74+
I hope you enjoyed learning about how to change the row height when using the query row height event dynamically in MAUI DataGrid.
75+
76+
You can refer to our [.NET MAUI DataGrid's feature tour](https://www.syncfusion.com/maui-controls/maui-datagrid) page to know about its other groundbreaking feature representations. You can also explore our .NET MAUI DataGrid Documentation to understand how to present and manipulate data.
77+
For current customers, you can check out our .NET MAUI components from 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 check out our .NET MAUI DataGrid and other .NET MAUI components.
78+
If you have any queries or require clarifications, please let us know in 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). 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:viewModel="clr-namespace:SfDataGridSample.ViewModel"
6+
x:Class="SfDataGridSample.MainPage">
7+
8+
<ContentPage.BindingContext>
9+
<viewModel:EmployeeViewModel x:Name="viewModel"/>
10+
</ContentPage.BindingContext>
11+
12+
13+
<syncfusion:SfDataGrid x:Name="dataGrid" Margin="20"
14+
AutoGenerateColumnsMode="None"
15+
AllowResizingColumns="True"
16+
ColumnResizing="dataGrid_ColumnResizing"
17+
GridLinesVisibility="Both"
18+
HeaderGridLinesVisibility="Both"
19+
x:DataType="viewModel:EmployeeViewModel"
20+
QueryRowHeight="dataGrid_QueryRowHeight"
21+
PropertyChanged="dataGrid_PropertyChanged"
22+
ItemsSource="{Binding EmployeeInformation}">
23+
<syncfusion:SfDataGrid.Columns>
24+
<syncfusion:DataGridTextColumn HeaderText="Name" MappingName="Name" />
25+
<syncfusion:DataGridTextColumn HeaderText="Employee ID" MappingName="EmployeeID" />
26+
<syncfusion:DataGridTextColumn HeaderText="Telephone" MappingName="Telephone"/>
27+
<syncfusion:DataGridTextColumn HeaderText="About" MappingName="About"/>
28+
</syncfusion:SfDataGrid.Columns>
29+
</syncfusion:SfDataGrid>
30+
31+
</ContentPage>

‎SfDataGridSample/MainPage.xaml.cs‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
using Syncfusion.Maui.DataGrid.Helper;
2+
3+
namespace SfDataGridSample
4+
{
5+
public partial class MainPage : ContentPage
6+
{
7+
public MainPage()
8+
{
9+
InitializeComponent();
10+
}
11+
12+
private void dataGrid_QueryRowHeight(object sender, Syncfusion.Maui.DataGrid.DataGridQueryRowHeightEventArgs e)
13+
{
14+
if (e.RowIndex > 0)
15+
{
16+
e.Height = e.GetIntrinsicRowHeight(e.RowIndex);
17+
e.Handled = true;
18+
}
19+
}
20+
21+
private void dataGrid_PropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
22+
{
23+
if (e.PropertyName!.Equals("Width"))
24+
{
25+
var VisibleRowCount = dataGrid.GetVisualContainer().ScrollRows.GetVisibleLines().Count;
26+
for (int i = 0; i < VisibleRowCount; i++)
27+
{
28+
dataGrid.InvalidateRowHeight(i);
29+
}
30+
}
31+
}
32+
33+
private void dataGrid_ColumnResizing(object sender, Syncfusion.Maui.DataGrid.DataGridColumnResizingEventArgs e)
34+
{
35+
var VisibleRowCount = dataGrid.GetVisualContainer().ScrollRows.GetVisibleLines().Count;
36+
for (int i = 0; i < VisibleRowCount; i++)
37+
{
38+
dataGrid.InvalidateRowHeight(i);
39+
}
40+
}
41+
}
42+
43+
}

‎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.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+
.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+
}

‎SfDataGridSample/Model/Employee.cs‎

Lines changed: 126 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
using System.ComponentModel;
2+
3+
namespace SfDataGridSample.Model
4+
{
5+
public class Employee : INotifyPropertyChanged
6+
{
7+
private int employeeID;
8+
private string? firstName;
9+
private string? designation;
10+
private DateTime birthDate;
11+
private string? city;
12+
private string? country;
13+
private string? telePhone;
14+
private string? about;
15+
16+
public event PropertyChangedEventHandler? PropertyChanged;
17+
18+
19+
public int EmployeeID
20+
{
21+
get
22+
{
23+
return this.employeeID;
24+
}
25+
26+
set
27+
{
28+
this.employeeID = value;
29+
this.RaisePropertyChanged("EmployeeID");
30+
}
31+
}
32+
33+
public string? Designation
34+
{
35+
get
36+
{
37+
return this.designation;
38+
}
39+
40+
set
41+
{
42+
this.designation = value;
43+
this.RaisePropertyChanged("Designation");
44+
}
45+
}
46+
47+
public string? Name
48+
{
49+
get
50+
{
51+
return this.firstName;
52+
}
53+
54+
set
55+
{
56+
this.firstName = value;
57+
this.RaisePropertyChanged("FirstName");
58+
}
59+
}
60+
61+
public DateTime DateOfBirth
62+
{
63+
get
64+
{
65+
return this.birthDate;
66+
}
67+
68+
set
69+
{
70+
this.birthDate = value;
71+
this.RaisePropertyChanged("DateOfBirth");
72+
}
73+
}
74+
75+
public string? Country
76+
{
77+
get
78+
{
79+
return this.country;
80+
}
81+
82+
set
83+
{
84+
this.country = value;
85+
this.RaisePropertyChanged("Country");
86+
}
87+
}
88+
89+
public string? Telephone
90+
{
91+
get
92+
{
93+
return this.telePhone;
94+
}
95+
96+
set
97+
{
98+
this.telePhone = value;
99+
this.RaisePropertyChanged("Telephone");
100+
}
101+
}
102+
103+
public string? About
104+
{
105+
get
106+
{
107+
return this.about;
108+
}
109+
110+
set
111+
{
112+
this.about = value;
113+
this.RaisePropertyChanged("About");
114+
}
115+
}
116+
117+
118+
private void RaisePropertyChanged(string name)
119+
{
120+
if (this.PropertyChanged != null)
121+
{
122+
this.PropertyChanged(this, new PropertyChangedEventArgs(name));
123+
}
124+
}
125+
}
126+
}

‎SfDataGridSample/Platforms/Android/AndroidManifest.xml‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
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">
4+
5+
</application>
6+
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
7+
<uses-permission android:name="android.permission.INTERNET" />
8+
</manifest>

0 commit comments

Comments
 (0)