CODEWITHSUNDEEP
datagridmaui
zn_Sourav
zn_Sourav

Reputation: 23

DataGrid in .NET MAUI

I am working on a .NET MAUI project to create a desktop application and I need to create a DataGrid. I read the documentation but I could not find "DataGrid" there. I only found "Grid" which is used to divide the form in rows and columns.

In Winforms we have a DataGrid class. Is there any "DataGrid" or anything like this "DataGrid" in .NET MAUI?

Upvotes: 2

Views: 4764

Answers (2)

Monsalma
Monsalma

Reputation: 21

There is no data grid in .NET MAUI. There are only some third party tools (Telerik, Syncfusion etc.).

There are similar components (TableView, ListView and CollectionView) which could be used. I played with those, but found it hard/impossible to achieve some data grid features so I gave up.

Then I played with the Grid control, event though the official MS article (https://learn.microsoft.com/en-us/dotnet/maui/user-interface/layouts/grid?view=net-maui-8.0) said to avoid that:

The Grid should not be confused with tables, and is not intended to present tabular data. Unlike HTML tables, a Grid is intended for laying out content. For displaying tabular data, consider using a ListView or CollectionView.

I was able to achieve basic data grid look and feel, but started having problems when I wanted to have cell borders. I was able to achieve that through extra coding (adding vertical and horizontal Line controls), but performance was terrible even for reasonably small number of rows, like 100. So I gave up on that approach as well.

In the end I created a data grid control from scratch. It's still in its early phase, but feel free to try it and please share your feedback.

Here's how the XAML definition would look like:

<controls:DataGrid
    Margin="5"
    Items="{Binding DemoData}"
    SelectionMode="Single"
    SelectedItem="{Binding SelectedDemoData, Mode=TwoWay}"
    HeaderRowStyle="{StaticResource Key=HeaderRowStyle}"
    RegularOddRowStyle="{StaticResource Key=RegularOddRowStyle}"
    RegularEvenRowStyle="{StaticResource Key=RegularEvenRowStyle}"
    SelectedRowStyle="{StaticResource Key=SelectedRowStyle}"
    ShowHeaderRow="False"
    VirtualizationEnabled="True"
    VirtualizationInitialRowsToLoad="50"
    VirtualizationRowsBeforeActing="20"
    VirtualizationRowsToLoad="30"
    VirtualizationMinRowsToUnload="100">

    <controls:DataGrid.Columns>

        <controls:DataGridColumnText
            Width="*"
            MinWidth="100"
            DataBinding="RowNumber"
            HeaderText="#" />

        <controls:DataGridColumnText
            Width="*"
            MinWidth="100"
            DataBinding="ColumnA"
            HeaderText="Column A" />

        <controls:DataGridColumnText
            Width="*"
            DataBinding="ColumnB"
            HeaderText="Column B" />

    </controls:DataGrid.Columns>

</controls:DataGrid>

The control supports 4 column width types: fixed, fixed percentage, star (*) and Auto (fit content). It is possible to create templated columns with regular (read-only) and edit template. Rows can be styled differently (header, odd, even, selected). Single and multiple selection mode are supported. Virtualization is enabled by default and there are some virtualization related bindable properties to tweak the behavior (how many rows to load initially, when to load more rows, how many rows to load when needed, how many rows to unload when they go too far from visible rows).

Of course, I plan to add more features, like events (cell focused/clicked and similar), more basic column types (text, image, button etc.), improve styling options etc. More detailed documentation is needed as well, but I hope GitHub samples will be helpful for now.

Find more info via the links below:

Upvotes: -1

Alexandar May - MSFT
Alexandar May - MSFT

Reputation: 10148

The DataGrid control hasn't been available or approachable in .NET MAUI. However, you can follow up this feature request: [Enhancement] DataGrid Control on Github.

As an alternative solution, you can use this package Syncfusion.Maui.DataGrid. For more details, you can refer to Getting Started with .NET MAUI DataGrid on how to use it.

Upvotes: 3

Related Questions