switch RadListView view between ListViewLinearLayout and ListViewGridLayout

[Laura]

I have a RadListView and I would like to switch view between ListViewLinearLayout and ListViewGridLayout .

On my code I create the component with this code:

            productsList = new RadListView
            {
                VerticalOptions = LayoutOptions.FillAndExpand,
                HorizontalOptions = LayoutOptions.FillAndExpand,
                SelectionGesture = SelectionGesture.Tap,
                SelectionMode = SelectionMode.Single,
            };

 

then I switch between ListViewLinearLayout and ListViewGridLayout

                    productsList.LayoutDefinition = new ListViewLinearLayout{Orientation = Orientation.Vertical, ItemLength=110 };

                    productsList.LayoutDefinition = new ListViewGridLayout { SpanCount = 3, ItemLength = 150 };

 

When I switch layoutdefinitio the result is an horrible graphic mess.

 

[Nikolay]

Hello Alessandro,

Unfortunately we have been unable to reproduce the behavior you've encountered. Could you, pelase, help us providing more details on your scenario - are you using Android, iOS, etc.? Also, in our Telerik Ui for Xamarin QSF there is a similar example : ListView -> Layouts. Do you reproduce the same behavior when you test with this example? 

In case the issue persists, it would be very helpful for us if you're able to attach a sample test app, or the files you're using, as well as an image of the graphic result you observe, so that we'd be able to test locally.

Regards,
Nikolay
Telerik by Progress

[Laura]

Hi Nikolay,

Thanks for your quick answer.

I am using Telerik UI for Xamarin Forms on IOS app.

I am unable to find the sample "Xamarin QSF there is a similar example : ListView -> Layouts."

Here you have the initial listing layout with ListViewGridLayout layout definition:

http://www.katanet.it/download/s1.png

You see the ListViewTemplateCell is correctly rendered.

 

When I change the layout to ListViewLinearLayout I get a messy page: http://www.katanet.it/download/s2.png

When I change back the layout to ListViewGridLayout I get yet another messy page: http://www.katanet.it/download/s3.png

You see in pictures s2 and s3 that the ListViewTemplateCell is not correct,

 

I can post my piece of code for further investigation:

http://www.katanet.it/download/MFBasket.cs.zip

 

Thx .

Alessandro

 

[Nikolay]

Hi Alessandro,

Thank you for the provided screenshots and the code file. We have tried to recreate your scenario locally based on it, however to no avail, as there are some missing resources that you are using in your full project. 

In case you cannot send your whole runnable project ( or a stripped down sample of it ), we think the best way to resolve the issue would be to point you to the QSF example mentioned in the previous post, which shows exactly the same behavior - switching between views. If you have the controls installed you can find the example by running the QSF solution, which you can find here : 

<install_folder>\Telerik\UI for Xamarin R3 2016\QSF

and in the solution the example in question is under Examples (Portable) -> ListView -> Layouts. 

We do not observe the issues that are visible in the screenshots you have provided, so could you please verify whether this example works correctly on your side or you see the same issues when running it? In case you don't observe the same problems with the QSF example, we'd be very helpful if you could modify it so that the faulty behavior is reproducible or point us to a direction, so that we could recreate your scenario, debug and locate where the issue is. 

Regards,
Nikolay
Telerik by Progress

[wil]

I have similar issue as well.

I get random ItemLength difference with in the same list.  Same image but show up with 200px height and 400px with in same picture and list.   I wanted it view A to show 400px height images and another one to show 200px images (same images)  It does work but within the view A it will show 400px images and 200px size images.  What in the heck?

Thanks

This is the example in the QSF.  But for my project I had to change to use e.OldItems since e.NewItem was null (no idea why)

            if (e.OldItems != null)
            {
                if (e.OldItems[0] == (this.list.BindingContext as DishViewModel).LayoutOptions[0])
                {
                    this.list.LayoutDefinition = null;
                    this.list.LayoutDefinition = new ListViewLinearLayout()
                    {
                        GroupHeaderLength = 50,
                        HorizontalItemSpacing = 0,
                        VerticalItemSpacing = 0,
                        Orientation = Telerik.XamarinForms.Common.Orientation.Vertical,
                        ItemLength = 400
                    }; 
                }
                else
                {
                    this.list.LayoutDefinition = null;
                    this.list.LayoutDefinition = new ListViewGridLayout()
                    {
                        GroupHeaderLength = 50,
                        HorizontalItemSpacing = 2,
                        VerticalItemSpacing = 2,
                        Orientation = Telerik.XamarinForms.Common.Orientation.Vertical,
                        SpanCount = 2,
                        ItemLength = 200
                    }; 
                }
            }

 

[Nikolay]

Hello Haluu,

Thank you for the provided code snippet, we have been able to isolate the issue and have logged it, so that a fix will be provided in the near future. You can track its state in our feedback portal.

Regards,
Nikolay
Progress Telerik