.NET MAUI DataGrid Current Cell

The Telerik UI for .NET MAUI DataGrid provides options for configuring the behavior and style of its current cell.

Setting the Behavior

The DataGrid allows you to use the CurrentCell property of type DataGridCellInfo to programmatically modify the current cell during keyboard navigation, when using the mouse, and so on.

The DataGrid also supports the CurrentCellChanged event which is invoked when the current cell changes as a result of user interaction with the keyboard.

The CurrentCellChanged event handler receives the following parameters:

• The sender argument, which is of type object, but can be cast to the RadDataGrid type.
• A CurrentCellChangedEventArgs object, which provides the following properties:
  • OldCurrentCell—Gets the previous CurrentCell.
  • NewCurrentCell—Gets the new CurrentCell.

Styling the Cell

You can style the current DataGrid cell by using the CurrentCellStyle property (of type DataGridBorderStyle) and applying the BackgroundColor, BorderColor, and BorderThickness properties.

Example

The following example shows the full implementation of the configurations for the current DataGrid cell.

1. Set the ViewModel.

public class ViewModel
{      
    public ViewModel()
    {
        this.People = new ObservableCollection<Person>()
        {
            new Person { Name = "Kiko", Age = 23, Department = "Production" },
            new Person { Name = "Jerry", Age = 23, Department = "Accounting and Finance"},
            new Person { Name = "Ethan", Age = 51, Department = "Marketing" },
            new Person { Name = "Isabella", Age = 25, Department = "Marketing" },
            new Person { Name = "Joshua", Age = 45, Department = "Production" },
            new Person { Name = "Logan", Age = 26, Department = "Production"},
            new Person { Name = "Aaron", Age = 32, Department = "Production" },
            new Person { Name = "Elena", Age = 37, Department = "Accounting and Finance"},
            new Person { Name = "Ross", Age = 30, Department = "Marketing" },
        };
    }

    public ObservableCollection<Person> People { get; set; }
}

2. Set the Business object.

public class Person
{
    public string Name { get; set; }
    public int Age { get; set; }
    public string Department { get; set; }
}

3. Provide the DataGrid definition in XAML.

<Grid RowDefinitions="Auto,*">
    <HorizontalStackLayout Spacing="10" 
                           Margin="5">
        <Label Text="Current cell info:"/>
        <Label x:Name="cellInfo"/>
    </HorizontalStackLayout>
    <telerik:RadDataGrid x:Name="dataGrid" 
                         Grid.Row="1"
                         ItemsSource="{Binding People}"
                         CurrentCellChanged="dataGrid_CurrentCellChanged"
                         CurrentCell="{Binding Cell, Mode=TwoWay}"
                         CurrentCellStyle="{StaticResource CurrentCellStyle}"/>
</Grid>

4. Set the style for the CurrentCellStyle that is defined in the page resources.

<telerik:DataGridBorderStyle x:Key="CurrentCellStyle"
                             BorderColor="Black"
                             BackgroundColor="LightGray"
                             BorderThickness="2"/>

5. Set the CurrentCellChanged event.

private void dataGrid_CurrentCellChanged(object sender, CurrentCellChangedEventArgs e)
{
    var data = e.NewCurrentCell;
    this.cellInfo.Text = data.Value.ToString();
}

The following image shows the end result.

Additional Resources

• .NET MAUI DataGrid Product Page
• .NET MAUI DataGrid Forum Page
• Telerik .NET MAUI Blogs
• Telerik .NET MAUI Roadmap

See Also

• Setting the .NET MAUI DataGrid Columns
• Grouping in the DataGrid
• Using the DataGrid Commands
• Sorting .NET MAUI DataGrid Records
• Filtering .NET MAUI DataGrid Records