Grial UI Kit - DataGrid Control (2024.4 Update)

Hey everyone! 🎉 We’re thrilled to announce that one of the most requested controls is finally coming to Grial for .NET MAUI: the DataGrid!

Back in the Xamarin.Forms days, we introduced a powerful DataGrid as part of Grial 3, and now, it’s making its way to .NET MAUI! This was the final piece missing from our .NET MAUI suite, but not anymore. If you have a Pro license, you’ll now get access to this advanced control—complete with stunning new templates to make your app shine.

‍

DataGrid

What can I say about DataGrids that hasn't been said already? If your app doesn't need to display tabular data—lucky you! 😅 But for the rest of us, having a ready-made DataGrid is a lifesaver, because let’s face it, building one from scratch is no easy task.

Our DataGrid comes packed with features like row selection, alternating row colors, horizontal scrolling, and sorting. It also supports customizable header templates and is flexible enough to let you define custom templates with complex controls right inside the cells. As you'll see in the examples below.

And of course, if you want to see samples and get to know the API you can go to the docs.

Let’s move to reviewing the new pages now!

‍

Task Flow

Bringing the Task Flow into .NET MAUI was a major relief, as it completes the last missing piece of our MAUI offering. It’s a feature that has been part of Grial since its Xamarin.Forms days, and now, it’s finally here in .NET MAUI!

With the DataGrid now in place, the transition was smooth. But we didn’t stop there! We also upgraded the charts, tapping into the more powerful .NET MAUI charting capabilities that Grial now offers.

The Task Flow consists of three interconnected pages that give you a clear view of summarized and detailed data for employees, tasks, and overall performance. Of course, the employee data is just an example—you can easily swap it out for your own content, thanks to the flexibility of Bindings and the Model-View-ViewModel (MVVM) pattern.

‍

Data Grid Pages

With the DataGrid now available, we couldn’t resist creating some content for it! We’ve added three new pages to showcase tabular data: Social Ranking, Media Ranking, and Shipping Detail. Each one highlights different use cases for the DataGrid in action.

Each page demonstrates a unique use case for the DataGrid. In the Shipping page, we’ve combined the DataGrid with segmented buttons that act as filters. The Media Ranking page uses selection to display detailed movie information above the DataGrid. Lastly, the Social Ranking page keeps things simple, showcasing a DataGrid with a custom header template.

We believe these are excellent examples of how to use a DataGrid in mobile apps, which can be tricky given the limited screen space on phones. But with the right design, it’s absolutely achievable!

‍

More goodies

Lastly, we’ve added two new start pages to our Onboarding template collection. These pages are clean, easy to use. We hope you’ll find them useful in your projects!

‍

Big Fixes & improvements

And last but not least! Here’s a list of fixes included in this release:

• Fixed IconButton, RoundedIconButtonWithBadge and IconTextButton now the command parameter works as expected
• Fixed cards on FoodPlacesMapPage
• Fixed visual glitch on Slider control, in some pages it didn’t display
• Fixed popups’ background, now they display correctly
• Fixed popups shadows on iOS
• Fixed FeaturedMoviePage, now it shows the close button correctly
• Updated to the latest version .NET MAUI version (8.0.82)

Let us know if you have any feedback, and follow us here. See you next month with a new update!

‍