Skip to content

Commit 7341d14

Browse files
FarjanaParveenFarjanaParveen
authored
Merge pull request #1 from SyncfusionExamples/bottomSheet
How to dynamically adjust the height of the SfDataGrid based on SfBottomSheet Size Changes ?
2 parents 092fcc3 + d9eef61 commit 7341d14

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

+9726
-2
lines changed

‎README.md‎

Lines changed: 131 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,131 @@
1-
# How-to-dynamically-adjust-the-height-of-the-SfDataGrid-based-on-SfBottomSheet-Size-Changes
2-
This demo shows how to dynamically adjust the height of the SfDataGrid based on SfBottomSheet Size Changes ?
1+
# How to dynamically adjust the height of the SfDataGrid based on SfBottomSheet Size Changes ?
2+
In this article, we will show you how to dynamically adjust the height of the [.NET MAUI DataGrid](https://www.syncfusion.com/maui-controls/maui-datagrid) based on SfBottomSheet Size Changes.
3+
4+
## Xaml
5+
```
6+
<ContentPage.BindingContext>
7+
<local:EmployeeViewModel x:Name="viewModel" />
8+
</ContentPage.BindingContext>
9+
10+
<Grid>
11+
<Grid>
12+
<Button Text="ShowBottomSheet" HorizontalOptions="Center" VerticalOptions="Center"
13+
Clicked="Button_Clicked" />
14+
</Grid>
15+
<!-- Bottom Sheet Section -->
16+
<bottomSheet:SfBottomSheet x:Name="bottomSheet"
17+
HalfExpandedRatio="0.55"
18+
CollapsedHeight="100"
19+
AllowedState="All"
20+
CornerRadius="15, 15, 0, 0">
21+
<bottomSheet:SfBottomSheet.BottomSheetContent>
22+
<!--Add your content here-->
23+
<Grid RowDefinitions="*,48" x:Name="gridLayout"
24+
ColumnDefinitions="*"
25+
Margin="10,-5,10,10" >
26+
27+
<StackLayout x:Name="hslDataGrid" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"
28+
Grid.Row="0">
29+
<datagrid:SfDataGrid AutoGenerateColumnsMode="None"
30+
GridLinesVisibility="Both"
31+
HeaderGridLinesVisibility="Both"
32+
x:Name="dataGrid"
33+
Margin="0,0,0,0"
34+
ItemsSource="{Binding Employees}"
35+
MinimumHeightRequest="0"
36+
SelectionMode="Single"
37+
NavigationMode="Cell"
38+
ColumnWidthMode="Auto"
39+
HeaderRowHeight="42"
40+
VerticalOptions="FillAndExpand"
41+
HorizontalOptions="FillAndExpand"
42+
RowHeight="42">
43+
<datagrid:SfDataGrid.Columns>
44+
<datagrid:DataGridTextColumn HeaderText="Employee Name"
45+
MappingName="Name" />
46+
<datagrid:DataGridNumericColumn HeaderText="Employee ID"
47+
Format="#"
48+
MappingName="EmployeeID" />
49+
<datagrid:DataGridTextColumn HeaderText="Designation"
50+
MappingName="Title" />
51+
<datagrid:DataGridTextColumn HeaderText="Gender"
52+
MappingName="Gender" />
53+
<datagrid:DataGridTextColumn HeaderText="Marital Status"
54+
MappingName="MaritalStatus" />
55+
56+
</datagrid:SfDataGrid.Columns>
57+
</datagrid:SfDataGrid>
58+
</StackLayout>
59+
<StackLayout Grid.Row="1">
60+
<buttons:SfButton x:Name="btnSelCon"
61+
Text="Click Me"
62+
Clicked="BtnSelCon_OnClicked"
63+
HorizontalTextAlignment="Center"
64+
Margin="0,15,0,0"
65+
Padding="1"
66+
HeightRequest="30"
67+
WidthRequest="85" />
68+
</StackLayout>
69+
</Grid>
70+
</bottomSheet:SfBottomSheet.BottomSheetContent>
71+
</bottomSheet:SfBottomSheet>
72+
<!-- Bottom Sheet Section -->
73+
</Grid>
74+
```
75+
76+
## Xaml.cs
77+
The code below demonstrates how to dynamically adjust the height of the `SfDataGrid` based on `SfBottomSheet` size changes.
78+
```
79+
private void Button_Clicked(object sender, EventArgs e)
80+
{
81+
double screenHeight = DeviceDisplay.MainDisplayInfo.Height / DeviceDisplay.MainDisplayInfo.Density;
82+
83+
double ratio = CalculateExpandRatio(bottomSheet.BottomSheetContent, screenHeight);
84+
85+
bottomSheet.HalfExpandedRatio = ratio;
86+
87+
bottomSheet.Show();
88+
}
89+
90+
public double CalculateExpandRatio(View bottomSheetContent, double screenHeight)
91+
{
92+
93+
double contentHeight = 0;
94+
95+
contentHeight = bottomSheetContent.Measure(double.PositiveInfinity, double.PositiveInfinity).Height;
96+
97+
// Define minimum and maximum ratios
98+
99+
double minRatio = 0.4;
100+
101+
double maxRatio = 0.9;
102+
103+
104+
// Calculate the ratio based on content height relative to screen height
105+
106+
double calculatedRatio = contentHeight / screenHeight;
107+
108+
109+
// Ensure ratio stays within platform-specific bounds
110+
111+
double finalRatio = Math.Clamp(calculatedRatio, minRatio, maxRatio);
112+
113+
return finalRatio;
114+
115+
}
116+
```
117+
118+
<img src="https://support.syncfusion.com/kb/agent/attachment/inline?token=eyJhbGciOiJodHRwOi8vd3d3LnczLm9yZy8yMDAxLzA0L3htbGRzaWctbW9yZSNobWFjLXNoYTI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjM1OTA1Iiwib3JnaWQiOiIzIiwiaXNzIjoic3VwcG9ydC5zeW5jZnVzaW9uLmNvbSJ9.tDdkNyWb5kOmFdJ3Ek2jdo12AJV6OkAc-vPgYBDFaec" width=800/>
119+
120+
[View sample in GitHub](https://github.com/SyncfusionExamples/How-to-dynamically-adjust-the-height-of-the-SfDataGrid-based-on-SfBottomSheet-Size-Changes)
121+
122+
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).
123+
124+
##### Conclusion
125+
126+
I hope you enjoyed learning about how to dynamically adjust the height of the `SfDataGrid` based on `SfBottomSheet` size changes.
127+
128+
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.
129+
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.
130+
131+
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: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
2+
Microsoft Visual Studio Solution File, Format Version 12.00
3+
# Visual Studio Version 17
4+
VisualStudioVersion = 17.12.35506.116 d17.12
5+
MinimumVisualStudioVersion = 10.0.40219.1
6+
Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "SfDataGridSample", "SfDataGridSample\SfDataGridSample.csproj", "{EEB0310E-49AF-4663-87C2-E585EEFE9E5E}"
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+
{EEB0310E-49AF-4663-87C2-E585EEFE9E5E}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
15+
{EEB0310E-49AF-4663-87C2-E585EEFE9E5E}.Debug|Any CPU.Build.0 = Debug|Any CPU
16+
{EEB0310E-49AF-4663-87C2-E585EEFE9E5E}.Release|Any CPU.ActiveCfg = Release|Any CPU
17+
{EEB0310E-49AF-4663-87C2-E585EEFE9E5E}.Release|Any CPU.Build.0 = Release|Any CPU
18+
EndGlobalSection
19+
GlobalSection(SolutionProperties) = preSolution
20+
HideSolutionNode = FALSE
21+
EndGlobalSection
22+
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: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
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:datagrid="clr-namespace:Syncfusion.Maui.DataGrid;assembly=Syncfusion.Maui.DataGrid"
5+
xmlns:bottomSheet="clr-namespace:Syncfusion.Maui.Toolkit.BottomSheet;assembly=Syncfusion.Maui.Toolkit"
6+
xmlns:buttons="clr-namespace:Syncfusion.Maui.Toolkit.Buttons;assembly=Syncfusion.Maui.Toolkit"
7+
xmlns:local="clr-namespace:SfDataGridSample"
8+
x:Class="SfDataGridSample.MainPage">
9+
10+
<ContentPage.BindingContext>
11+
<local:EmployeeViewModel x:Name="viewModel" />
12+
</ContentPage.BindingContext>
13+
14+
<Grid>
15+
<Grid>
16+
<Button Text="ShowBottomSheet" HorizontalOptions="Center" VerticalOptions="Center"
17+
Clicked="Button_Clicked" />
18+
</Grid>
19+
<!-- Bottom Sheet Section -->
20+
<bottomSheet:SfBottomSheet x:Name="bottomSheet"
21+
HalfExpandedRatio="0.55"
22+
CollapsedHeight="100"
23+
AllowedState="All"
24+
CornerRadius="15, 15, 0, 0">
25+
<bottomSheet:SfBottomSheet.BottomSheetContent>
26+
<!--Add your content here-->
27+
<Grid RowDefinitions="*,48" x:Name="gridLayout"
28+
ColumnDefinitions="*"
29+
Margin="10,-5,10,10" >
30+
31+
<StackLayout x:Name="hslDataGrid" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"
32+
Grid.Row="0">
33+
<datagrid:SfDataGrid AutoGenerateColumnsMode="None"
34+
GridLinesVisibility="Both"
35+
HeaderGridLinesVisibility="Both"
36+
x:Name="dataGrid"
37+
Margin="0,0,0,0"
38+
ItemsSource="{Binding Employees}"
39+
MinimumHeightRequest="0"
40+
SelectionMode="Single"
41+
NavigationMode="Cell"
42+
ColumnWidthMode="Auto"
43+
HeaderRowHeight="42"
44+
VerticalOptions="FillAndExpand"
45+
HorizontalOptions="FillAndExpand"
46+
RowHeight="42">
47+
<datagrid:SfDataGrid.Columns>
48+
<datagrid:DataGridTextColumn HeaderText="Employee Name"
49+
MappingName="Name" />
50+
<datagrid:DataGridNumericColumn HeaderText="Employee ID"
51+
Format="#"
52+
MappingName="EmployeeID" />
53+
<datagrid:DataGridTextColumn HeaderText="Designation"
54+
MappingName="Title" />
55+
<datagrid:DataGridTextColumn HeaderText="Gender"
56+
MappingName="Gender" />
57+
<datagrid:DataGridTextColumn HeaderText="Marital Status"
58+
MappingName="MaritalStatus" />
59+
60+
</datagrid:SfDataGrid.Columns>
61+
</datagrid:SfDataGrid>
62+
</StackLayout>
63+
<StackLayout Grid.Row="1">
64+
<buttons:SfButton x:Name="btnSelCon"
65+
Text="Click Me"
66+
Clicked="BtnSelCon_OnClicked"
67+
HorizontalTextAlignment="Center"
68+
Margin="0,15,0,0"
69+
Padding="1"
70+
HeightRequest="30"
71+
WidthRequest="85" />
72+
</StackLayout>
73+
</Grid>
74+
</bottomSheet:SfBottomSheet.BottomSheetContent>
75+
</bottomSheet:SfBottomSheet>
76+
<!-- Bottom Sheet Section -->
77+
</Grid>
78+
79+
</ContentPage>

‎SfDataGridSample/SfDataGridSample/MainPage.xaml.cs‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
namespace SfDataGridSample
2+
{
3+
public partial class MainPage : ContentPage
4+
{
5+
public MainPage()
6+
{
7+
InitializeComponent();
8+
}
9+
10+
11+
private void BtnSelCon_OnClicked(object sender, EventArgs e)
12+
{
13+
14+
}
15+
16+
17+
private void Button_Clicked(object sender, EventArgs e)
18+
{
19+
double screenHeight = DeviceDisplay.MainDisplayInfo.Height / DeviceDisplay.MainDisplayInfo.Density;
20+
21+
double ratio = CalculateExpandRatio(bottomSheet.BottomSheetContent, screenHeight);
22+
23+
bottomSheet.HalfExpandedRatio = ratio;
24+
25+
bottomSheet.Show();
26+
}
27+
28+
public double CalculateExpandRatio(View bottomSheetContent, double screenHeight)
29+
{
30+
31+
double contentHeight = 0;
32+
33+
contentHeight = bottomSheetContent.Measure(double.PositiveInfinity, double.PositiveInfinity).Height;
34+
35+
// Define minimum and maximum ratios
36+
37+
double minRatio = 0.4;
38+
39+
double maxRatio = 0.9;
40+
41+
42+
// Calculate the ratio based on content height relative to screen height
43+
44+
double calculatedRatio = contentHeight / screenHeight;
45+
46+
47+
// Ensure ratio stays within platform-specific bounds
48+
49+
double finalRatio = Math.Clamp(calculatedRatio, minRatio, maxRatio);
50+
51+
return finalRatio;
52+
53+
}
54+
}
55+
}

‎SfDataGridSample/SfDataGridSample/MauiProgram.cs‎

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

0 commit comments

Comments
 (0)