Skip to content

Commit c2488e1

Browse files
Merge pull request #3518 from syncfusion-content/MAUI_ScrollingMode
MAUI - UG document for ScrollingMode support in SfDataGrid
2 parents 2eff31d + 393e9a7 commit c2488e1

File tree

4 files changed

+70
-0
lines changed

4 files changed

+70
-0
lines changed
409 KB
Loading
324 KB
Loading
340 KB
Loading

MAUI/DataGrid/scrolling.md

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,76 @@ this.dataGrid.ScrollToColumnIndex(4, ScrollToPosition.MakeVisible, true);
5151
{% endhighlight %}
5252
{% endtabs %}
5353

54+
## Scrolling mode
55+
56+
The `SfDataGrid` allows you to customize three different scrolling modes using the [SfDataGrid.ScrollingMode]() property. By default, the control scrolls content based on pixel values. The `ScrollingMode` property supports both vertical and horizontal scrolling. The available scrolling modes are:
57+
58+
- Pixel
59+
- Line
60+
- PixelLine
61+
62+
### Pixel
63+
In the `DataGridScrollingMode.Pixel` mode, users can scroll through the data based on pixel values. The view updates with each change in the offset, and a row or column may appear cropped when the offset exceeds the origin of the row or column.
64+
65+
{% tabs %}
66+
{% highlight xaml %}
67+
<sfgrid:SfDataGrid x:Name="dataGrid"
68+
ItemsSource="{Binding OrderInfoCollection}"
69+
ScrollingMode = "Pixel">
70+
</sfgrid:SfDataGrid>
71+
{% endhighlight %}
72+
73+
{% highlight C# %}
74+
this.dataGrid.ScrollingMode = DataGridScrollingMode.Pixel;
75+
{% endhighlight %}
76+
{% endtabs %}
77+
78+
<img alt="ScrollingMode-Pixel" src="Images\scrolling\maui-datagrid-ScrollingMode-Pixel.gif" width="404" />
79+
80+
### Line
81+
The `DataGridScrollingMode.Line` mode allows users to scroll the DataGrid's contents by lines. The view updates only when the offset values reach the origin of a row or column in the bound collection.
82+
83+
{% tabs %}
84+
{% highlight xaml %}
85+
<sfgrid:SfDataGrid x:Name="dataGrid"
86+
ItemsSource="{Binding OrderInfoCollection}"
87+
ScrollingMode = "Line">
88+
</sfgrid:SfDataGrid>
89+
{% endhighlight %}
90+
91+
{% highlight C# %}
92+
this.dataGrid.ScrollingMode = DataGridScrollingMode.Line;
93+
{% endhighlight %}
94+
{% endtabs %}
95+
96+
<img alt="ScrollingMode-Pixel" src="Images\scrolling\maui-datagrid-ScrollingMode-Line.gif" width="404"/>
97+
98+
### PixelLine
99+
The `DataGridScrollingMode.PixelLine` mode allows users to scroll the contents like an Excel sheet. If a row or column is clipped at the top, it will automatically scroll to display the entire row or column.
100+
101+
{% tabs %}
102+
{% highlight xaml %}
103+
<sfgrid:SfDataGrid x:Name="dataGrid"
104+
ItemsSource="{Binding OrderInfoCollection}"
105+
ScrollingMode = "PixelLine">
106+
</sfgrid:SfDataGrid>
107+
{% endhighlight %}
108+
109+
{% highlight C# %}
110+
this.dataGrid.ScrollingMode = DataGridScrollingMode.PixelLine;
111+
{% endhighlight %}
112+
{% endtabs %}
113+
114+
<img alt="ScrollingMode-Pixel" src="Images\scrolling\maui-datagrid-ScrollingMode-PixelLine.gif" width="404" />
115+
116+
### Limitations
117+
118+
The `ScrollingMode` has certain limitations that should be considered:
119+
120+
- Switching between modes at runtime is not supported.
121+
- The `DataGridScrollingMode.Line` does not support master details view.
122+
- The `DataGridScrollingMode.Line` will not be worked as expected when row height is customized through [SfDatagrid.QueryRowHeight](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.DataGrid.SfDataGrid.html#Syncfusion_Maui_DataGrid_SfDataGrid_QueryRowHeight) event and width is customized through [SfDatagrid.ColumnWidthMode](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.DataGrid.SfDataGrid.html#Syncfusion_Maui_DataGrid_SfDataGrid_ColumnWidthMode) property.
123+
54124
## Diagonal scrolling
55125

56126
By default, the `SfDataGrid` allows both vertical and horizontal scrolling simultaneously (diagonal scrolling). By setting [SfDataGrid.AllowDiagonalScrolling](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.DataGrid.SfDataGrid.html#Syncfusion_Maui_DataGrid_SfDataGrid_AllowDiagonalScrolling) to false, you ensure that scrolling happens in only one direction at a time, either horizontally or vertically.

0 commit comments

Comments
 (0)