Scrolling in MAUI DataGrid (SfDataGrid)

18 Mar 202612 minutes to read

Programmatic scrolling

The SfDataGrid allows scrolling to a particular row and column index programmatically. It also enables and disables the scrolling animation when changing the view. By default, the scrolling will be animated.

You can set position of item in view while scrolling by passing ScrollToPosition to ScrollToRowIndex, ScrollToColumnIndex and ScrollToRowColumnIndex method. Below are four different types of positions:

• MakeVisible: Scrolls a specific item to make visible in the view. If the item is already in view, scrolling will not occur.
• Start: Scrolls a specific item to be positioned at the begin of the view.
• End: Scrolls a specific item to be positioned at the end of the view.
• Center: Scrolls a specific item to be positioned at the center of the view.

Scrolling to the row and column index

You can scroll programmatically to a particular row and column using the SfDataGrid.ScrollToRowColumnIndex method by passing the row and column index.

C#

this.dataGrid.ScrollToRowColumnIndex(15, 4, ScrollToPosition.Start, ScrollToPosition.Start, true);

Scrolling to the row index

You can scroll programmatically to a particular row using the SfDataGrid.ScrollToRowIndex method by passing the row index.

C#

this.dataGrid.ScrollToRowIndex(30, ScrollToPosition.End, true);

Scrolling to the column index

You can scroll programmatically to a particular column using the SfDataGrid.ScrollToColumnIndex method by passing the column index.

C#

this.dataGrid.ScrollToColumnIndex(4, ScrollToPosition.MakeVisible, true);

Scrolling mode

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:

• Pixel
• Line
• PixelLine

Pixel

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.

XAML

<sfgrid:SfDataGrid x:Name="dataGrid"                                       
                       ItemsSource="{Binding OrderInfoCollection}"         
                       ScrollingMode = "Pixel">   
    </sfgrid:SfDataGrid>

C#

this.dataGrid.ScrollingMode = DataGridScrollingMode.Pixel;

Line

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.

XAML

<sfgrid:SfDataGrid x:Name="dataGrid"                                       
                       ItemsSource="{Binding OrderInfoCollection}"         
                       ScrollingMode = "Line">   
    </sfgrid:SfDataGrid>

C#

this.dataGrid.ScrollingMode = DataGridScrollingMode.Line;

PixelLine

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.

XAML

<sfgrid:SfDataGrid x:Name="dataGrid"                                       
                       ItemsSource="{Binding OrderInfoCollection}"         
                       ScrollingMode = "PixelLine">   
    </sfgrid:SfDataGrid>

C#

this.dataGrid.ScrollingMode = DataGridScrollingMode.PixelLine;

Limitations

The ScrollingMode has certain limitations that should be considered:

• Switching between modes at runtime is not supported.
• The DataGridScrollingMode.Line does not support master details view.
• The DataGridScrollingMode.Line will not be worked as expected when row height is customized through SfDataGrid.QueryRowHeight event and width is customized through SfDataGrid.ColumnWidthMode property.

Diagonal scrolling

By default, the SfDataGrid allows both vertical and horizontal scrolling simultaneously (diagonal scrolling). By setting SfDataGrid.AllowDiagonalScrolling to false, you ensure that scrolling happens in only one direction at a time, either horizontally or vertically.

The following code snippets demonstrate how to disable diagonal scrolling:

XAML

<syncfusion:SfDataGrid x:Name="dataGrid"
                           ItemsSource="{Binding OrderInfoCollection}"
                           AllowDiagonalScrolling="False">
  </syncfusion:SfDataGrid>

C#

this.dataGrid.AllowDiagonalScrolling = false;

Scrollbar Visibility

The visibility of the horizontal and vertical scrollbars can be customized using the SfDataGrid.HorizontalScrollBarVisibility and SfDataGrid.VerticalScrollBarVisibility properties. By default, the visibility of both the horizontal and vertical scrollbars is set to ScrollBarVisibility.Default.

The following code snippets demonstrate how to hide the vertical and horizontal scrollbars:

XAML

<sfgrid:SfDataGrid x:Name="dataGrid"                                       
                       ItemsSource="{Binding OrderInfoCollection}"         
                       HorizontalScrollBarVisibility="Never"
                       VerticalScrollBarVisibility="Never">   
    </sfgrid:SfDataGrid>

C#

namespace DataGridSample
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
            ViewModel viewModel = new ViewModel();
            SfDataGrid dataGrid = new SfDataGrid();
            dataGrid.ItemsSource = viewModel.OrdersInfo;   
            dataGrid.HorizontalScrollBarVisibility = ScrollBarVisibility.Never;
            dataGrid.VerticalScrollBarVisibility = ScrollBarVisibility.Never;
            this.Content = dataGrid;
        }
    }
}

NOTE

These properties do not have any effect when the datagrid has no scrollable content in its respective direction. In such cases, the scroll bar will not be displayed.

Over Scroll Mode

The SfDataGrid supports over-scroll behavior that controls the bounce effect when the user scrolls past the edges of its content. Use the VerticalOverScrollMode and HorizontalOverScrollMode properties to enable or disable bounce effects independently for each axis.

Vertical Over Scroll Mode

The SfDataGrid.VerticalOverScrollMode property customizes the vertical scrolling behavior in the data grid by controlling the bouncing effect when the user scrolls beyond the grid’s boundaries. This property defines whether users experience a smooth, elastic pull effect or a strict stop when reaching the start or end of the scrollable content.

The VerticalOverScrollMode property is of the type DataGridVerticalScrollMode and offers the following two modes:

• Bounce: This mode enables the grid to apply a bounce effect when the user scrolls beyond the boundaries. It is the default value for the iOS platform.
• None: This mode prevents the grid from applying the bounce effect. It is the default value for the Android platform.

To customize the bouncing effect in the data grid, follow the code example:

XAML

<sfgrid:SfDataGrid x:Name="dataGrid"                                       
                       ItemsSource="{Binding OrderInfoCollection}"         
                       VerticalOverScrollMode="Bounce">   
    </sfgrid:SfDataGrid>

C#

dataGrid.VerticalOverScrollMode = DataGridVerticalOverScrollMode.Bounce;

Horizontal Over Scroll Mode

The SfDataGrid.HorizontalOverScrollMode property customizes the horizontal scrolling behavior of the data grid by controlling the bounce effect when users scroll past the left or right edges of the grid. This setting determines whether the grid provides an elastic over‑scroll experience or stops strictly at the content boundary.

The HorizontalOverScrollMode property is of type DataGridHorizontalScrollMode and includes the following modes:

• Bounce: Enables a bounce‑back animation when the user scrolls beyond the horizontal limits of the grid. This is the default mode on the iOS platform.
• None: Disables the bounce effect, causing scrolling to stop immediately at the content edges. This is the default mode on the Android platform.

To customize the bouncing effect in the data grid, follow the code example:

XAML

<sfgrid:SfDataGrid x:Name="dataGrid"                                       
                       ItemsSource="{Binding OrderInfoCollection}"         
                       HorizontalOverScrollMode="Bounce">   
    </sfgrid:SfDataGrid>

C#

dataGrid.HorizontalOverScrollMode = DataGridHorizontalOverScrollMode.Bounce;

Identifying scroll state changes

The SfDataGrid raises the ScrollStateChanged event whenever its scrolling state is changed.

The following current states are indicated by the ScrollState property in the event argument.

• Dragging: Indicates that DataGrid is being dragged in the view right now.
• Fling: Indicates that fling action is performed on the DataGrid.
• Idle: Indicates that DataGrid is not currently scrolling.
• Programmatic: Indicates that the ScrollToColumnIndex or ScrollToRowIndex methods are used for scrolling.

C#

dataGrid.ScrollStateChanged += DataGrid_ScrollStateChanged;

private void DataGrid_ScrollStateChanged(object? sender, DataGridScrollStateChangedEventArgs e)
{
    if (e.ScrollState == DataGridScrollState.Idle)
    {
        DisplayAlert("ScrollState", "Scrolling has stopped", "OK");
    }
}