Declined
Last Updated: 19 Jul 2022 13:48 by ADMIN
ben
Created on: 16 Jul 2022 13:48
Category: DataGrid
Type: Feature Request
0
Work with https://github.com/CommunityToolkit/Maui.Markup ?

I have been trying to get the DataGrid to work with Maui.Markup and I'm not finding a way to add a DataGrid to my View.

i.e. from GitHub - CommunityToolkit/Maui.Markup: The .NET MAUI Markup Community Toolkit is a community-created library that contains Fluent C# Extension Methods to easily create your User Interface in C#

I would have expected I could add a DataGrid to the Children of Grid...but I'm not finding the right cast to allow that to happen, Grid.Children is expecting an IView.

Is this possible and I'm just missing something simple?  Thanks!

6 comments
ADMIN
Lance | Senior Manager Technical Support
Posted on: 19 Jul 2022 13:48

Hi Ben,

That's great news. Yeah, you were accidentally instantiating the Windows native RadDataGrid and .NET MAUI balked saying it's not a .NET MAUI UI component.

UI Virtualization

Before I close this out, I wanted to explain a little bit about controls that rely on UI virtualization. It's usually better to explain this with a quick drawing:

Because of that critical height measurement, there are special consideration you need to keep in mind when rendering a UI control that leverages UI Virtualization:

  • Never put it in a StackLayout/VerticalStackLayout (the 0-height problem)
  • Never put it in a Auto-sized RowDefinition (same issue as StackLayout)
  • Never put it in a ScrollView (infinite room problem)

The reason for those rules is because UI virtualization requires a measurement of the parent container in order to know how many items to render in its visualized items panel. The first two will result in never seeing any containers (or a crash) because there is no height. The last one will render all the items and no scrollbar because there is infinite height (which usually wrecks your device's RAM and UI responsiveness).

We have a special article in our Xamarin.Forms documentation that explains this a little better and offers some suggestions (like enforcing a static HeightRequest if you must use an offending parent type => Controls Are Not Appearing. Although the article mentions the RadListView, the idea is the same for all UI virtualized controls (ItemsControl, DataGrid, TreeView, anything with canvas like PdfViewer and diagramming). 

Header Issue

Finally, about the headers, I'm not sure if that's due to the ongoing problems with .NET MAUI's WinUI or if 100 pixels is too small.

Try using a Star-sized row instead, or increment by 20px until you find a good balance. If that doesn't help, please open a Support ticket here => https://prgress.co/DevToolsSupport 

I also recommend keeping my test project handy so that you can update it with your code and attach it to any future support cases you might need to open. I know it sounds like we're asking you do extra work, but I can promise you the 10-15 minutes you might spend on updating the test project will end up saving you days in the end.

Another support tip I can give you is to open separate support tickets for different problems. This will allow us to work on issues independently of each other and make sure the right person is helping on any given topic at any given time.

Regards,
Lance | Manager Technical Support
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

ben
Posted on: 19 Jul 2022 13:03

Lance,

Apericate the follow-up both here and on GitHub!  Thank you for the quick test project!

Issue - I had the wrong namespace pulled out for the RadGrid, I was using Telerik.UI.Xaml.Controls.Grid instead of Telerik.Maui.Controls.Compatibility.DataGrid, once I fixed my using statement I was able to compile.

Chaining methods together via the toolkit worked as well:

Content = new Grid
        {
            RowDefinitions = Rows.Define(
                (Row.DirectoryLabel, 100),
                (Row.DirectoryButton, 36),
                (Row.HashButtons, 36)
                ),
            Children =
            {
                dg.Row(Row.DirectoryLabel)
            }
        };

 enum Row { DirectoryLabel, DirectoryButton, HashButtons }

The only 'issue' I ran into is if I didn't give the row enough height in the RowDefinitions the RadGrid would look like it didn't render.  See attached screenshot where the column headers don't show until I hovered over a row

ADMIN
Lance | Senior Manager Technical Support
Posted on: 18 Jul 2022 20:27

Hi Ben,

The good news is that there's no problem. I tested it and it works when defining the RadDataGrid using C#.

More importantly, it appears there is no direct use of the Toolkit at all in your problematic code. That is just how you setup a MAUI view using C#-only approach.

The toolkit only comes into play is when you chain methods together, for example

No toolkit

var entry = new Entry();
// without the toolkit, you set property values separately
entry.WidthRequest = 200;
entry.HeightRequest = 40;

With toolkit

// With the toolkit, they give you a "Size" extension method on any IView element
// So you can set the Width and Height at the same time
new Entry().Size(200, 40);

Further Investigation

The bad news is, without a test project from you, I can't tell you exactly why you're having an issue. This is why I was persistent on asking for one earlier.

In any case, I've attached my project that you can use to compare against. My only advice at this point is to make sure you've followed the getting started steps.

  1. Telerik .NET MAUI - Getting Started.
  2. Finally, the DataGrid's Getting Started article .NET MAUI DataGrid Documentation - Getting Started.

Regards,
Lance | Manager Technical Support
Progress Telerik

The Premier Dev Conference is back! 

Coming to you live from Progress360 in-person or on your own time, DevReach for all. Register Today.


Attached Files:
ADMIN
Lance | Senior Manager Technical Support
Posted on: 18 Jul 2022 19:20

Hi Ben,

The RadDataGrid does use Microsoft.Maui.IView through Maui.Controls.Layout. I have replied to BRandon int he GitHub Conversation. So, what I think Brandon might be saying by "must implement IView" is that the control must be a 100% Handler and not through a Contract.

I will await Brandon's reply and take the next appropriate action based on his answer and then follow up with you again here when I have more to share.

 

Side Notes:

1) You can tell the difference between a Contract control and a Handler control by the namespace they come from

  • Telerik controls that are Handlers live in the Telerik.Maui.Controls namespace
    • DataForm, ItemsControl, Spinners, Pickers, Buttons, ComboBoxes, Numeric/MaskedInputs, etc
  • Telerik controls still using compatibility contract are in the Telerik.Maui.Controls.Compatibility namespace
    • DataGrid, Chart, SkiaSharp-drawn controls (Barcode, BusyINdicator, PdfViewer, etc)

2) The Telerik.UI.Xaml.Controls.Grid.RadDataGrid object you see in the error message is not a MAUI control, it's the final native Windows control. That's a bit too late in the lifecycle to catch the MAUI layer constructs. This is the basis of my suspicion that Brandon is going to say it has to be a Maui Handler control to use it with the fluent expression helper.

Regards,
Lance | Manager Technical Support
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

ben
Posted on: 18 Jul 2022 16:52

I can create a demo project, but it doesn't look like Telerik implements IView, see attached screenshot when I attempt to try your suggestion.

Additionally from the Maui.Markup GitHub -> https://github.com/CommunityToolkit/Maui.Markup/issues/85#issuecomment-1186512753

The problem is that Telerik's implementation of RadDataGrid didn't implement IView. I recommend reaching out to Telerik for assistance with their library.

Looking at the RadGrid that seems to be a valid assesement, the IView that the RadGrid impelments is not Microsoft.Maui.IView but Telerik.Core.IView which is IElementPresenter

ADMIN
Lance | Senior Manager Technical Support
Posted on: 18 Jul 2022 16:43

Hello Ben,

The object RadDataGrid is a .NET MAUI XAML View-based object and can be instantiated in XAML or C#

For example:

<Grid xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui">
    <telerik:RadDataGrid x:Name="MyDataGrid" />
</Grid>

or in C#

using Telerik.Maui.Controls.Compatibility.DataGrid;

Grid rootGrid = new Grid();

RadDataGrid dg = new RadDataGrid();
rootGrid.Children.Add(dg);

Further Investigation

As to why it doesn't work with the community toolkit's extension methods, I cannot say as that's not an official Microsoft .NET SDK or one of our products. I know that you've opened this as a Feature Request to basically say "include support for Maui.Markup". However, this is more of a support ticket for implementation specifics because the RadDataGrid does implement IView.

So that I could visually convey evidence of this, here's a screenshot of a direct cast on the dg reference.

Next Steps

If you would like us to help you investigate, please prepare and share a runnable project that reproduces the problem.

I do need to decline close this Feature Request, but we can continue this conversation if you open a Support Ticket with your test project attached here => https://prgress.co/DevToolsSupport 

Regards,
Lance | Manager Technical Support
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.