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 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!
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.
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:
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).
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/.
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
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);
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.
Regards,
Lance | Manager Technical Support
Progress Telerik
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
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.
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
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);
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.
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.