Data Grid Control for .NET MAUI (Free plugin to Sort, Filter & Show Data)

Introduction

Welcome to our latest blog post, where we delve into the dynamic world of app development using .NET MAUI! In this comprehensive guide, we explore the intricacies of the "DataGrid Control for .NET MAUI," an exceptional free plugin designed to streamline your data management process. Discover how this plugin empowers developers to effortlessly sort, filter, and display data, enhancing user experiences within cross-platform applications.

In our latest article, we unveil the power of the "DataGrid Control for .NET MAUI," an invaluable plugin that simplifies the complexities of data management in cross-platform app development. As the demand for seamless data visualization and interaction grows, this free plugin emerges as a game-changer for .NET MAUI enthusiasts.

Quick Links:

• Project Setup
• Install Plugin
• Implementation
• Demo
• Full Code
• Download Code

Project Setup:

• Launch Visual Studio 2022, and in the start window click Create a new project to create a new project.
  
• In the Create a new project window, select MAUI in the All project types drop-down, select the .NET MAUI App template, and click the Next button:
  
• In the configure your new project window, name your project, choose a suitable location for it, and click the Next button:
  
• In the Additional information window, click the Create button:
  
• Once the project is created, we can able to see the Android, iOS, Windows and other running options in the toolbar. Press the emulator or run button to build and run the app
  

Install Plugin:

In this steps, we will see the steps to install "akgul.Maui.DataGrid" in Visual Studio 2022:

• Access NuGet Package Manager: In Visual Studio, right-click on your .NET MAUI project in the Solution Explorer. From the context menu, select "Manage NuGet Packages."
• Search for "akgul.Maui.DataGrid": In the NuGet Package Manager, click on the "Browse" tab. In the search bar, type "akgul.Maui.DataGrid" and hit Enter. The package should appear in the search results.
• Select and Install the Package: Once you find "akgul.Maui.DataGrid" in the search results, click on it to select it. Ensure you choose the appropriate version compatible with your .NET MAUI project. Click on the "Install" button to begin the installation process.

• Accept License Agreement: During the installation, you may be prompted to accept the license agreement. Review the terms and conditions and click on the "Accept" button to proceed.
• Wait for Installation to Complete: Visual Studio will download and install the package along with its dependencies. This process may take a few moments, depending on your internet connection speed.
• Verify Installation: After the installation is complete, verify that there are no error messages in the Output window. This indicates a successful installation of the "akgul.Maui.DataGrid" package.

Implementation

Add Namespace in XAML:

In your .NET MAUI XAML files where you intend to use the DataGrid, make sure to add the appropriate XML namespace. For example:

xmlns:dg="clr-namespace:Maui.DataGrid;assembly=Maui.DataGrid"

Adjust the namespace and assembly name based on the specifics of the DataGrid component you installed.

Implement DataGrid in Your XAML:

You can now implement the DataGrid control in your XAML files using the namespace you added. For example:

<dg:DataGrid RefreshingEnabled="True"
             BackgroundColor="White"
                     IsRefreshing="{Binding Refreshing}"
                     PullToRefreshCommand="{Binding OnDataGridRefreshCommand}"
                     SelectionEnabled="True"
                     SelectedItem="{Binding SelectedItem}"
                     RowHeight="70"
                     HeaderHeight="70"
                     ItemsSource="{Binding Items}"
                     HeaderBackground="Red">

    <dg:DataGrid.NoDataView>
        <Label Text="Nothing to see here" HorizontalOptions="Center" VerticalOptions="Center" />
    </dg:DataGrid.NoDataView>
    <dg:DataGrid.Columns>
        <dg:DataGridColumn Title="Image" PropertyName="Image" Width="150" SortingEnabled="False">
            <dg:DataGridColumn.CellTemplate>
                <DataTemplate>
                    <Image Source="{Binding}" HorizontalOptions="Center" VerticalOptions="Center"
                           Aspect="AspectFit" HeightRequest="60" />
                </DataTemplate>
            </dg:DataGridColumn.CellTemplate>
        </dg:DataGridColumn>
        <dg:DataGridColumn Title="Name" PropertyName="Name" Width="100"/>
        <dg:DataGridColumn Title="Location" PropertyName="Location"  Width="100"/>
        <dg:DataGridColumn Title="Population" PropertyName="Population"  Width="100"/>
        <dg:DataGridColumn Title="Latitude" PropertyName="Latitude"  Width="100"/>
        <dg:DataGridColumn Title="Longitude" PropertyName="Longitude"  Width="100"/>
    </dg:DataGrid.Columns>
    <dg:DataGrid.RowsBackgroundColorPalette>
        <dg:PaletteCollection>
            <Color>#e1e1e1</Color>
            <Color>#ffffff</Color>
        </dg:PaletteCollection>
    </dg:DataGrid.RowsBackgroundColorPalette>
</dg:DataGrid>

The above code snippet represents a DataGrid component in .NET MAUI application. Let's break down the properties and their meanings in the context of this DataGrid:

• RefreshingEnabled="True": Indicates that the DataGrid supports pull-to-refresh functionality. Users can pull down to refresh the data displayed in the grid.
• BackgroundColor="White": Sets the background color of the entire DataGrid component to white.
• IsRefreshing="{Binding Refreshing}": Binds the IsRefreshing property of the DataGrid to a boolean property named "Refreshing" in the underlying ViewModel. This property likely controls the visual indication of whether the DataGrid is currently refreshing data.
• PullToRefreshCommand="{Binding OnDataGridRefreshCommand}": Binds the pull-to-refresh action to a command named "OnDataGridRefreshCommand" in the ViewModel. This command is executed when the user performs a pull-to-refresh gesture.
• SelectionEnabled="True": Allows users to select rows in the DataGrid.
• SelectedItem="{Binding SelectedItem}": Binds the selected item in the DataGrid to a property named "SelectedItem" in the ViewModel. This property holds the currently selected item in the grid.
• RowHeight="70": Sets the height of each row in the DataGrid to 70 units.
• HeaderHeight="70": Sets the height of the header row in the DataGrid to 70 units.
• ItemsSource="{Binding Items}": Binds the DataGrid to a collection of items represented by the "Items" property in the ViewModel. Each item in this collection corresponds to a row in the DataGrid.
• HeaderBackground="Red": Sets the background color of the header row to red.
• dg:DataGrid.NoDataView: Defines a custom view to be displayed when there is no data to show in the DataGrid. In this case, a Label with the text "Nothing to see here" is centered both horizontally and vertically.
• dg:DataGrid.Columns: Specifies the columns to be displayed in the DataGrid.
• dg:DataGrid.RowsBackgroundColorPalette: Defines a color palette for alternating row colors in the DataGrid.

This code snippet configures a DataGrid component with specific properties and templates, allowing users to view and interact with data in a visually appealing manner.

The Code Behind or MVVM view model properties are similar to listview control and no specific code required

Full Code:

Demo

Download Code:

You can download the code from GitHub. If you have any doubts, feel free to post a comment. If you liked this article, and it is useful to you, do like, share the article & star the repository on GitHub.

Tweet

References

To learn more about Swipe View