Accessibility in MAUI DataGrid (SfDataGrid)

18 Nov 20188 minutes to read

SfDataGrid and SfDataPager provide built-in AutomationId support for all their inner elements. The AutomationId property enables UI automation frameworks and test scripts to identify and interact with individual grid and pager elements. A unique AutomationId is automatically assigned to each inner element by combining the control’s AutomationId with the element’s identifier (row index, column index, or button name).

DataGrid

The following table illustrates the predefined automation identifier patterns for SfDataGrid elements. The actual AutomationId is generated by combining the grid’s AutomationId with these patterns (e.g., if the grid’s AutomationId is “SfDataGrid”, a header cell would have the full ID “SfDataGrid R 0 C 2 Customer Name”).

Element	AutomationId Pattern	Example
Header Row	"Row" + RowIndex	Row0
Header Cell	"R " + RowIndex + " C " + ColumnIndex + " " + CellValue	R 0 C 2 Customer Name
Data Row	"Row" + RowIndex	Row4
Grid Cell	"R " + RowIndex + " C " + ColumnIndex + " " + CellValue	R 4 C 2 Thomas
Group Header	"Row" + RowIndex	Row5
LoadMore View	"LOAD MORE ITEMS"	LOAD MORE ITEMS

Setting AutomationId on DataGrid

The following code snippet demonstrates how to set the AutomationId property on the DataGrid control:

XAML

<syncfusion:SfDataGrid x:Name="dataGrid"
                       ItemsSource="{Binding Orders}"
                       AutomationId="SfDataGrid"
                       AllowGroupExpandCollapse="True">

    <syncfusion:SfDataGrid.GroupColumnDescriptions>
        <syncfusion:GroupColumnDescription ColumnName="OrderID"/>
    </syncfusion:SfDataGrid.GroupColumnDescriptions>

    <syncfusion:SfDataGrid.CaptionSummaryRow>
        <syncfusion:DataGridSummaryRow Title="Total Count of Order ID:{OrderID}"
                                       ShowSummaryInRow="True">
            <syncfusion:DataGridSummaryRow.SummaryColumns>
                <syncfusion:DataGridSummaryColumn Name="OrderID"
                                                  MappingName="OrderID"
                                                  Format="{}{Count}"
                                                  SummaryType="CountAggregate" />
            </syncfusion:DataGridSummaryRow.SummaryColumns>
        </syncfusion:DataGridSummaryRow>
    </syncfusion:SfDataGrid.CaptionSummaryRow>
</syncfusion:SfDataGrid>

C#

SfDataGrid dataGrid = new SfDataGrid();
OrderInfoViewModel viewModel = new OrderInfoViewModel();
dataGrid.ItemsSource = viewModel.Orders;
dataGrid.AutomationId = "SfDataGrid";
dataGrid.AllowGroupExpandCollapse = true;

dataGrid.GroupColumnDescriptions.Add(new GroupColumnDescription() { ColumnName = "OrderID" });

DataGridSummaryRow summaryRow = new DataGridSummaryRow();
summaryRow.Title = "Total Count of Order ID:{OrderID}";
summaryRow.ShowSummaryInRow = true;
summaryRow.SummaryColumns.Add(new DataGridSummaryColumn()
{
    Name = "OrderID",
    MappingName = "OrderID",
    Format = "{Count}",
    SummaryType = SummaryType.CountAggregate
});
dataGrid.CaptionSummaryRow = summaryRow;
this.Content = dataGrid;

Accessing DataGrid Elements

The following code snippet demonstrates how to access DataGrid elements for UI automation:

C#

[Test]
[Description("SfDataGrid AutomationId Access")]
public void SfDataGrid_AccessElements()
{
    // Double tap cell (Row 4, Column 2)
    var cell = driver.FindElement(MobileBy.AccessibilityId("R 4 C 2 Berglund"));
    // Simulate double tap
    cell.Click();
    Thread.Sleep(200);
    cell.Click();

    // Expand/Collapse group at row 5
    driver.FindElement(MobileBy.AccessibilityId("SfDataGrid Row5")).Click();

    // Sort by clicking header cell
    driver.FindElement(MobileBy.AccessibilityId("R 0 C 2 Customer")).Click();

    // Trigger load more
    driver.FindElement(MobileBy.AccessibilityId("SfDataGrid Load More")).Click();
}

DataPager

DataPager AutomationId Patterns

The following table illustrates the predefined automation identifier patterns for SfDataPager elements. Like DataGrid, the actual AutomationId is generated by combining the pager’s AutomationId with these patterns.

Element	Value
First page button	"FirstPage"
Previous page button	"PreviousPage"
Numeric buttons	"NumericButton" + NumericButtonIndex Example: NumericButton3
Next page button	"NextPage"
Last page button	"LastPage"

Setting AutomationId on DataPager

The following code snippet demonstrates how to set the AutomationId property on the DataPager control and bind it with a DataGrid:

XAML

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <Border Grid.Row="1" Padding="5">
        <pager:SfDataPager x:Name="dataPager"
                           AutomationId="SfDataPager"
                           PageSize="15" 
                           NumericButtonCount="10"
                           Source="{Binding Orders}">
        </pager:SfDataPager>
    </Border>
    <syncfusion:SfDataGrid x:Name="dataGrid"
                           Grid.Row="0"
                           ItemsSource="{Binding Source={x:Reference dataPager}, Path=PagedSource}">
    </syncfusion:SfDataGrid>
</Grid>

C#

SfDataPager dataPager = new SfDataPager();
OrderInfoViewModel viewModel = new OrderInfoViewModel();
dataPager.AutomationId = "SfDataPager";
dataPager.PageSize = 15;
dataPager.NumericButtonCount = 10;
dataPager.Source = viewModel.Orders;

SfDataGrid dataGrid = new SfDataGrid();
dataGrid.ItemsSource = dataPager.PagedSource;

Border border = new Border();
border.Padding = new Thickness(5);
border.Content = dataPager;

Grid grid = new Grid();
grid.RowDefinitions.Add(new RowDefinition() { Height = GridLength.Star });
grid.RowDefinitions.Add(new RowDefinition() { Height = GridLength.Auto });
grid.Children.Add(dataGrid);
grid.Children.Add(border);
grid.SetRow(dataGrid, 0);
grid.SetRow(border, 1);
this.Content = grid;

Accessing DataPager Elements

The following code snippet demonstrates how to access DataPager elements:

C#

[Test]
[Description("SfDataPager AutomationId Access")]
public void SfDataPager_NavigatePages()
{
    // Navigate to First page
    driver.FindElement(MobileBy.AccessibilityId("SfDataPager FirstPage")).Click();

    // Navigate to previous page
    driver.FindElement(MobileBy.AccessibilityId("SfDataPager PreviousPage")).Click();

    // Navigate to next page
    driver.FindElement(MobileBy.AccessibilityId("SfDataPager NextPage")).Click();

    // Navigate to last page
    driver.FindElement(MobileBy.AccessibilityId("SfDataPager LastPage")).Click();

    // Click numeric button for page 5
    driver.FindElement(MobileBy.AccessibilityId("SfDataPager NumericButton5")).Click();
}