DataGrid and Scrolling

[Deasun]

Does it have the feature to scroll up and down the rows and across the columns?

Cant seem to find an option to turn that on.

.NET MAUI radDataGrid!

Thanks

Deasun

[Lance | Manager Technical Support]

Hello Deasun,

The scrolling functionality in DataGrid happens automatically if there are more rows/column than can fit in the current viewport.

If you are not seeing scrollbars, then double check that you didn't put the DataGrid inside an parent element that breaks scrolling or UI virtualization (ScrollView, StackLayout or RowDefinition with Height=Auto are particularly bad).

To learn more about how certain parent layout element break child controls' UI virtualization, go to the following documentation page and scroll down until you see a big yellow warning section => Getting Started with Xamarin.Forms DataGrid Control (don't be concerned that it's the Xamarin documentation, the concept and fix is the same).

Further Assistance

If you are still having trouble, this is a likely a specific-implementation problem as opposed to a general issue. In either case, we'll need to get hands-on with the problem.

Please take the following steps so we can directly investigate:

1. Open a new Technical Support Ticket instead of replying here in the forums (you have priority support on your account)
   • In the ticket metadata, be sure to select what platform the issue is happening on, your IDE, the version used, etc. These are very important to replicate the issue
   • In the ticket body, describe what is happening and what steps to take to replicate it.
2. Zip up the code you are using and attach it to the ticket
   • If you are going to zip the entire project, please delete the bin and obj folders first (this will reduce the zip size to just a couple MBs instead of hundreds of MBs).

Engineers from the MAUI team will directly investigate and get back to you in the support ticket

Regards,
Lance | Manager Technical Support
Progress Telerik

[Deasun]

Thanks for the response.

I put the control in the mainpage.xaml that I am currently testing with. Looks like:

Doesnt seem to want to go outside the Scrollview tag.

<?xml version="1.0" encoding="utf-8" ?>

<ContentPage xmlns=http://schemas.microsoft.com/dotnet/2021/maui

             xmlns:x=http://schemas.microsoft.com/winfx/2009/xaml

             xmlns:telerik=http://schemas.telerik.com/2022/xaml/maui

             x:Class="MauiApp1.MainPage">

 

    <ScrollView>

        <VerticalStackLayout 

            Spacing="25" 

            Padding="30,0" 

            VerticalOptions="Center">

 

            <Image

                Source="logospectrotel.png"

                SemanticProperties.Description="Welcome to Spectrotel EscalationMgr!"

                HeightRequest="200"

                HorizontalOptions="Center" />

 

            <Label 

                Text="Welcome!"

                SemanticProperties.HeadingLevel="Level1"

                FontSize="32"

                HorizontalOptions="Center" />

 

            <!--<Label

                Text="Welcome to .NET Multi-platform App UI"

                SemanticProperties.HeadingLevel="Level2"

                SemanticProperties.Description="Welcome to dot net Multi platform App U I"

                FontSize="18"

                HorizontalOptions="Center" />-->

 

            <Button 

                x:Name="RefreshBtn"

                Text="Refresh"

                SemanticProperties.Hint="Click me to refresh the Data grid view"

                Clicked="OnRefreshClicked"

                HorizontalOptions="Center" />

 

            <!--<ListView ItemsSource="{Binding Depts}"

                ItemSelected="lvDeptOnItemSelected"

                x:Name="lvDepts"

                SemanticProperties.Hint="All the departments listed">

                <ListView.ItemTemplate>

                    <DataTemplate>

                        <TextCell

                            Text="{Binding Result}"

                            Detail="{Binding Value}"

                        />

                    </DataTemplate>

                </ListView.ItemTemplate>

            </ListView>-->

 

            <Label 

                Text="Depts:"

                SemanticProperties.HeadingLevel="Level2"

                FontSize="32"

                HorizontalOptions="Start" />

            <telerik:RadComboBox ItemsSource="{Binding Depts}"

                                 DisplayMemberPath="Result" 

                                 x:Name="rcbDepts"

                                 SelectionChanged="rcbDeptOnItemSelected"

                                 />

            <Label 

                Text="Products:"

                SemanticProperties.HeadingLevel="Level2"

                FontSize="32"

                HorizontalOptions="Start" />

            <telerik:RadComboBox ItemsSource="{Binding Products}"

                                 DisplayMemberPath="Result" 

                                 x:Name="rcbProducts"

                                 SelectionChanged="rcbProductsOnItemSelected"

                                 />

 

            <!--<ListView ItemsSource="{Binding Products}"

                x:Name="lvProducts"

                SemanticProperties.Hint="All the Products listed">

                <ListView.ItemTemplate>

                    <DataTemplate>

                        <TextCell

                            Text="{Binding Result}"

                            Detail="{Binding Value}"

                        />

                    </DataTemplate>

                </ListView.ItemTemplate>

            </ListView>-->

 

            <StackLayout RadioButtonGroup.GroupName="Views"

                         Orientation="Horizontal">

                <RadioButton Content="Row" Value="Row" IsChecked="true" CheckedChanged="rbgViewsOnBtnCheckedChanged_Row"></RadioButton>

                <RadioButton Content="Contacts"  Value="Contacts" CheckedChanged="rbgViewsOnBtnCheckedChanged_Contacts"></RadioButton>

            </StackLayout>

 

            <Label 

                Text="Details:"

                SemanticProperties.HeadingLevel="Level3"

                FontSize="32"

                HorizontalOptions="Start" />

            <telerik:RadDataGrid x:Name="datagrid">

                <telerik:RadDataGrid.RowBackgroundStyle>

                    <telerik:DataGridBorderStyle BackgroundColor="AliceBlue"

                                                 BorderColor="DarkOrchid"

                                                 BorderThickness="1"/>

                </telerik:RadDataGrid.RowBackgroundStyle>

                <telerik:RadDataGrid.AlternateRowBackgroundStyle>

                    <telerik:DataGridBorderStyle BackgroundColor ="LightBlue"

                                                 BorderThickness="1"

                                                 BorderColor="BlanchedAlmond"/>

                </telerik:RadDataGrid.AlternateRowBackgroundStyle>

                <telerik:RadDataGrid.SelectionStyle>

                    <telerik:DataGridBorderStyle BackgroundColor="SeaGreen"

                                                 BorderColor="Wheat"

                                                 BorderThickness="2"/>

                </telerik:RadDataGrid.SelectionStyle>

            </telerik:RadDataGrid>

 

 

            <!--<CollectionView ItemsSource="{Binding Details}"

                            ItemsLayout="VerticalGrid"

                            x:Name="gvDetails"

                            HorizontalScrollBarVisibility="Always"

                            VerticalScrollBarVisibility="Always">

                <CollectionView.ItemTemplate>

                    <DataTemplate>

                        <Grid Padding="10">

                            <Label Text="{Binding Dept}"

                                   FontAttributes="Bold"

                                   HorizontalTextAlignment="Start"                                    

                                  />

                            <Label Grid.Column="1"

                                   Text="{Binding Product}" />

                            <Label Grid.Column="2"

                                   Text="{Binding EscalLvl}"  />

                            <Label Grid.Column="3"

                                   Text="{Binding Name}" HorizontalTextAlignment="End" />

                        </Grid>

                    </DataTemplate>

                </CollectionView.ItemTemplate>

            </CollectionView>-->

 

        </VerticalStackLayout>

    </ScrollView>

 

</ContentPage>

[Lance | Manager Technical Support]

Hi,

How much experience do you have with XAML in general? I want to make sure I am providing you with the correct information that you can use. If you're not familiar with the different layout types like Grid, etc, I highly recommend taking this great starting course Build mobile and desktop apps with .NET MAUI - Learn | Microsoft Docs.

Okay, onto the issue at hand.

You cannot put two children in the root of some thing that can only have one child.  In the case of ContentPage, you can only have one child... so you cant put both a DataGrid AND a ScrollView. It has to be only the DataGrid or some other child that allows for multiple children... a Grid is the best option for the root element.

However, you do not want to even use ScrollView or StackLayout for that root element when you are using UI virtualization. So a Grid is the best option for the root element in this case.

You can do something like this instead. The root element is a Grid, which lets you put things into rows. Most importantly you can put the DataGrid into the star-sized row, and keep the other stuff inside the VerticalStackLayout.

 

 

[Deasun]

Thanks.

Will resturcture that.

And yes very new to this.

Old windows desktop dev trying this stuff out.

[Lance | Manager Technical Support]

Welcome to MAUI! I am also a long time Windows desktop dev myself, here are some off-the-top-of-my-head tips.

• If you're coming from WPF, your XAML experience does apply a little bit, but things don't always behave like you'd expect. For example, you would expect a MAUI StackLayout to work like a WPF StackPanel, but there are many things that do not provide "outward pressure" to expand the StackLayout. I recommend avoiding StackLayout unless you're explicitly intending to squeeze all those children together. Otherwise, use Grid with row definitions, they're more dynamic and work better across multiple form factors.
• If you're coming from WinForms, your C# and .NET experience will help. Many things in .NET 6 are the same as you had in .NET Framework, they're just faster and easier to use now. I recommend taking advantage of async/await, it's super-easy multi-threading.
• If you're coming from MFC/win32, etc. There isn't much to compare in terms of GUI or .NET comparison. However, your general understanding of being careful with system resources and not over allocating objects will be very handy when you run your app on mobile.

Finally, that Microsoft Learn path I linked to is a really good one to become familiar with everything you need to get started. It's a nice 5 hours of content in total, but you can complete the modules at your own pace.

For now, my best recommendation for you is to use temporary background colors on things you put on the screen. This is the most intuitive way to really understand where/why things get rendered. For example StackLayout BackgroundColor=Red will show you exactly where it starts and ends.

[Deasun]

thanks