FlexGrid scroll problem within a scrollview (Android)

[enkaradag]

Hi,

I have a strange problem;

For my project, i have to use more than one flexgrid on a page. Also page has more controls than those grids. I have to use a scrollview for that kind of pages.

When flexgrid is used on a page with a scrollview at back, flexgrid locks its vertical scroll for android. (works good for winui and ios)

Here is how it works for winUI (good):

And here is how it works for IOS (good)

And here is how it behaves for Android, grids lock their vertical scroll

I created a simple project focusing on that problem. Below, when user moves from the green area, page should move. When moved on the grid, just the grid should scroll. (works like this for winui and ios, but not for android) At another page i do the same with standart collectionviews, it works for all platforms as expected)

I attached a simple project here.

FlexGrid_Maui_ScrollTest.zip

Hope we can find a solution

Thanks & Regards

Ender

[arivoir]

Hi Ender, I suspect the issue is related to the fact FlexGrid handles dragging internally in the grid, and that requires capturing the input, but firstly let me comment that the double-nested scrolling is a bad UX, especially for touch devices, maybe you can have a better UI by replacing the scroll in the nested FlexGrid with data-pagers

This can be achieved by wrapping the source of FlexGrid with a C1PagedDataCollection

var pagedCollection = new C1PagedDataCollection<object>(theOriginalSource) { PageSize = 10 };
grid.ItemsSource = pagedCollection;

This will cause FlexGrid to show up to PageSize items and then you'd have to add some Next, Prev buttons to change the current page so final users can see all the data. pagedCollection.MoveToPageAsync(i);

With this solution the nested FlexGrid can grow freely to take up as much space as necessary and there will be no vertical scrolling.

What do you think? Can it fit in your scenario?

[enkaradag]

Hi Alvaro,

Thanks for your comment.

For our scenario, paged structure is not suitable.

1st) that structure needs a c1PagedDataCollection, but i have to bind flexgrid to dataviews. Because i dont know which columns will there be there at client side. Server gives me the columns and their properties. (can pass this, i can create my own paging with some buttons and labels below the grid, that moves the grid up and down) I am using flexgrid in a reusable contentview, have lots of bindable properties there. And designed some external popup, edit, sort, multiselect, filter and resposive behaviors. All are designed for scrolling ui

2nd) Our current datagrid can do double scrolled nesting with no problem. We have lots of instances of grid at clientside. Our clients have the habit of using our apps with that scrolling behavior. It's hard for us to move to paging ui at mobile

We will discuss that at our team, but i don't think they will accept that.

This is the only one issue i stuck, for moving our mobile clientside to flexgrid. Do you have any more idea? (some custom android handlers or whatever)

Thanks and Regards

Ender

[enkaradag]

By the way, I noticed something by chance;

when i put another useless scrollview somewhere in the content of outer scrollview and that dummy scrollview is moved by user, grid suddenly starts to scroll

    <Grid x:Name="rootgrid">
        <StackLayout>
            <ScrollView x:Name="scroll" HeightRequest="750" BackgroundColor="MediumSeaGreen" VerticalOptions="Fill">
                <VerticalStackLayout Padding="50" Spacing="30">

                    <!--useless scrollview here-->

                    <ScrollView x:Name="dummyscroll" Orientation="Horizontal" HeightRequest="40" HorizontalOptions="StartAndExpand">
                        <StackLayout Orientation="Horizontal" HorizontalOptions="Start">
                            <Button x:Name="dummybutton1" WidthRequest="200" HeightRequest="20"/>
                            <Button x:Name="dummybutton2" WidthRequest="200" HeightRequest="20"/>
                            <Button x:Name="dummybutton3" WidthRequest="200" HeightRequest="20"/>
                        </StackLayout>
                    </ScrollView>

                    <!--end of useless scrollview-->

                    <c1:FlexGrid x:Name="datagrid1" AutoGenerateColumns="False" SelectionMode="Row" IsReadOnly="True" HeightRequest="500"/>
                    <c1:FlexGrid x:Name="datagrid2" AutoGenerateColumns="False" SelectionMode="Row" IsReadOnly="True" HeightRequest="500"/>
                </VerticalStackLayout>
            </ScrollView>
        </StackLayout>
    </Grid>

But if that dummy scroll is not moved, the scrolls of datagrids doesn't move.

So, (thinking i can move a hidden scroll behind) i tried to move the dummy scroll by code

MainThread.BeginInvokeOnMainThread(() => dummyscroll.ScrollToAsync(dummybutton3,ScrollToPosition.End, true));

but noway, moving it with code doesnt make the flexgrid move. As a reminder, i have that problem only for Android.

I will appreciate whatever u advise

Thank you

Ender

[enkaradag]

I tried to implement paging structure for android. But i have autoheight rows at some pages. If grid is used with autohieght rows, scrolling is needed. One row itself may exceed the height of whole grid here

[arivoir]

Hi Ender,

I will arrange some time to look into the scrolling issue in Android.

Regarding auto-height. Notice you can remove the RequestedHeight of FlexGrid and let it to lay out the rows according to its size (The height of FlexGrid will be as tall as the sum of the rows). Since the paged-datacollection ensures the grid will never have many items it is safe to avoid the height and there won't be vertical scrollbar nor performance issues.

There is no conflict between DataView and C1PagedDataCollection, notice you can wrap any other data-collection, you can use it with C1BindingListDataCollection without problem.

On the other hand, You said you're pulling data from the server, and also you're filling a DataView, so it will require all the data to be fetched from server at once. I wonder how many items you're showing in FlexGrid. You could have scalability issues if the data to show is big. I mention this because there are other data-collection's like C1VirtualDataCollection that helps in those scenarios.

[enkaradag]

Hi Alvaro,

Regarding your advice about "Paging+ RequestedHeight=-1 + row auto height enabled", grid total height changes for each page. If i set grid height to a constant, than i cant scroll vertical. Stuck at the same thing

---

Yes, i tried C1PagedDataCollection, noticed that i can still use a DataView bind to it. It works good+

---

Regarding big amount of data, at my stress tests i tested grid over 80 columns and 50.000 rows with random generated data. Using a dataview and binded to flexgrid, with the help of internal tresholding, it works extremely good at performance (both for assigning data, scrolling and even cell customization with CellFactory)

But i can make some tests with C1VirtualDataCollection, i may switch using it if it has better results

---

Regarding scrolling issue in Android -I don't know if it helps- for my scenario, grid still scrolls up and down onMouseWheelChange when using android with a mouse as expected (preferably it should scroll up and down only, on mouse wheel. but it moves to right at first then downwards. But it works+)

I'm looking forward for your help about the scrolling issue in Android

Thank you so much

[arivoir]

@enkaradag If the grid total height changing is a problem I'm afraid the only thing to try could be setting a MinHeight to a reasonable amount to minimize the number of times the size of the grid's parent grows and shrinks, but it could eventually grow farther than MinHeight and if the parent of the grid has a fixed size it will need scrolling. The only solution to avoid the vertical scrolling and have auto-height rows is let the parent of grid to grow as needed.

Regarding amount of data, You'll have no problem with FlexGrid performance, it's designed to support any number of items, but if you're bringing 50.000 items through the network, that will consume network bandwidth and take time to load, especially if the clients are requesting the data through internet. The good news is you can continue as you're doing now and if in a future you want to optimize your network usage and load time you can easily change the data-collection to C1VirtualDataCollection and continue having the same features as today.

I haven't seen Android issue yet.

[enkaradag]

Hi,

Is there any update planned for fixing "vertical scroll when flexgrid is in a scrollview" issue? I want to use flexgrid in a vertical scrollable content page.

As a reminder, i had that problem only for android.

Regards

[arivoir]

Hi @enkaradag the issue was fixed and will be released in next hotfix release (Mid January), provided QA don't find any issue

https://github.com/GrapeCity/ComponentOne-MAUI-Samples/assets/17496741/e4e10f4c-9c3b-4613-8b59-5fb338698b32

Sorry for the delay

[enkaradag]

Theres a new release for C1.Maui.Grid (8.0.20233.697) at nuget.org. I think android scrolling issue is fixed here. But i cannot install it. It requires some dependencies that dont exist there in nuget.org.

Am i missing something here?

[IrinaPykhova]

Sorry for inconvenience, we missed them at publishing. I just pushed missing stuff. Please check whether everything works for you now.

[enkaradag]

Thank you, now outer scrolling works for android. That looks really good

But i have another problem now; https://github.com/GrapeCity/ComponentOne-MAUI-Samples/issues/8 Can you please take a look

Ender

[enkaradag]

FlexGrid in a scrollview works for android now at 8.0.20233.697

Thanks for the update