.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 Style with target type DataGridCurrentCellAppearance) 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.

• C#

public class ViewModel : NotifyPropertyChangedBase
{
    private DataGridCellInfo cell;

    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 DataGridCellInfo Cell
    {
        get => this.cell;
        set
        {
            if (this.cell != value)
            {
                this.cell = value;
                this.OnPropertyChanged();
            }
        }
    }

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

2. Set the Person object.

• C#

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.

• 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'a resources.

• XAML

<Style TargetType="telerik:DataGridCurrentCellAppearance" x:Key="CurrentCellStyle">
    <Setter Property="BackgroundColor" Value="LightGray" />
    <Setter Property="BorderColor" Value="Black" />
    <Setter Property="BorderThickness" Value="2" />
</Style>

5. Set the CurrentCellChanged event.

• C#

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