.NET MAUI DataGrid Render Mode

The .NET MAUI DataGrid is rendered differently depending on the target platform—on Android and Windows it uses the SkiaSharp library and on iOS and MacCatalyst by default it uses native elements.

With the RenderMode property you can enable SkiaSharp rendering on iOS and MacCatalyst:

• RenderMode(DataGridRenderMode)—Defines how the content of the DataGrid is rendered: using the defaults or via SkiaSharp. The available options are:
  • Default—Sets the rendering mode of the DataGrid content to the default. The default rendering mode is determined by the platform. On Android and WinUI, the DataGrid is rendered with SkiaSharp. On iOS and MacCatalyst, the DataGrid is rendered with the iOS UILabel and UIView primitives.
  • SkiaSharp—SkiaSharp is used for rendering on all platforms.

Check below how you can enable the SkiaSharp render mode of the DataGrid:

<telerik:RadDataGrid x:Name="dataGrid"
                     ItemsSource="{Binding Clubs}"
                     RenderMode="SkiaSharp"
                     UserEditMode="Cell"
                     AutoGenerateColumns="False">
    <telerik:RadDataGrid.BindingContext>
        <local:ViewModel />
    </telerik:RadDataGrid.BindingContext>
    <telerik:RadDataGrid.Columns>
        <telerik:DataGridTextColumn PropertyName="Name" 
                                    HeaderText="Name" />
        <telerik:DataGridNumericalColumn PropertyName="StadiumCapacity" 
                                         HeaderText="Stadium Capacity"/>
        <telerik:DataGridBooleanColumn PropertyName="IsChampion" 
                                       HeaderText="Champion?" />
        <telerik:DataGridDateColumn PropertyName="Established" 
                                    HeaderText="Date Established"/>
        <telerik:DataGridComboBoxColumn PropertyName="Championship"
                                        HeaderText="Championship"
                                        ItemsSourcePath="Championships"/>
    </telerik:RadDataGrid.Columns>
</telerik:RadDataGrid>

When using the SkiaSharp render mode, you can completely customize how each column is rendered through the DataGridTextColumn's CellRenderer property. See SkiaSharp Cell Renderer for more details.

See Also

• SkiaSharp Cell Renderer
• SkiaSharp GitHub
• SkiaSharp SKCanvas