SfListView GridLayout SpanCount Binding MVVM Orientation not working

[Christopher Schulze]

Hi,

I want to have a orientation (Portrait, Landscape) aware behavior for the ListView in Gridlayout mode. 

For example if I have 8 Items, in portrait-mode (PageWith <  PageHeight) they should be displayed as a grid of two columns and four rows. Changing the orientation to landscape-mode (PageWith >= PageHeight) they should displayed as a grid of four columns and two rows. The number of Items isn't always fix, so its great using a ListView and a ObservableCollection for this. 

So the rule is:

• Portrait-Mode: 2 Columns and x Rows (SpanCount 2)
• Landscape-Mode: 4 Columns and x Rows (SpanCount 4)

I'm highly using MVVM and have already a ViewModel-baseclass that provides OnPortraitMode() and OnLandscapeMode() methods for using in ViewModels as well as IsPortraitMode and IsLandscapeMode Properties for Binding in XAML.

My first try was to just bind SpanCount with a ViewModel Property and change it when the OnPortraitMode() and OnLandcapeMode() methods get called:

 <syncfusion:SfListView ItemsSource="{Binding Path=ItemList}" ItemSize="280" ItemSpacing="10,10,0,0" VerticalOptions="FillAndExpand">

            <syncfusion:SfListView.LayoutManager>

                <syncfusion:GridLayout SpanCount="{Binding Path=SpanCount}" />

            </syncfusion:SfListView.LayoutManager>

This isn't working, I think SpanCount isn't able to be bound.

Second try was to use triggers and bind to the IsLandscape-Property:

<syncfusion:SfListView ItemsSource="{Binding Path=ItemList}" ItemSize="280" ItemSpacing="10" VerticalOptions="FillAndExpand">

            <syncfusion:SfListView.Resources>

                <ResourceDictionary>

                    <syncfusion:GridLayout x:Key="LandscapeGridLayout" SpanCount="4"></syncfusion:GridLayout>

                    <syncfusion:GridLayout x:Key="PortraitGridLayout" SpanCount="2"></syncfusion:GridLayout>

                </ResourceDictionary>

            </syncfusion:SfListView.Resources>

            <syncfusion:SfListView.Triggers>

                <DataTrigger TargetType="syncfusion:SfListView" Binding="{Binding Path=IsLandscapeMode}" Value="True">

                    <Setter Property="syncfusion:SfListView.LayoutManager" Value="{StaticResource LandscapeGridLayout}"></Setter>

                </DataTrigger>

                <DataTrigger TargetType="syncfusion:SfListView" Binding="{Binding Path=IsLandscapeMode}" Value="False">

                    <Setter Property="syncfusion:SfListView.LayoutManager" Value="{StaticResource PortraitGridLayout}"></Setter>

                </DataTrigger>

            </syncfusion:SfListView.Triggers>

            <syncfusion:SfListView.ItemTemplate>...

This is working but only for one mode-change: e.g. Portrait -> Landscape, changing back causes an unhandled NullReferenceException.

I attached a sample-project for reproducing this behavior and the exception. I'm using the last Syncfusion version 15.1.0.41 (with nuget packages) and test currently only for Android and UWP (but the ListView is initialized in iOS too).

I hope anyone cal help getting the wanted behavior by using MVVM.

Thanks

Christopher

Attachment: GridSpanSample_603f0f76.zip

[Muthu Kumaran Gnanavinayagam]

Hi Christopher, 

 

Thank you for using Syncfusion Products. 

 

Query 1: 

 

We have analyzed the reported issue “SpanCount not updated when set binding to ListView LayoutManager” and we have noticed that the BindingContext (MainPageViewModel) of LayoutManager is not updated. So you can achieve your requirement by setting the BindingContext of LayoutManager when ListView BindingContext is changed. Please refer the below code snippet, 

 

Code snippet: 

 

XAML: 

<syncfusion:SfListView x:Name="listView" BindingContextChanged="ListView_BindingContextChanged"  ItemsSource="{Binding Path=ItemList}"> 

... 

</syncfusion:SfListView> 

 

C#: 

private void ListView_BindingContextChanged(object sender, System.EventArgs e) 

{ 

   this.listView.LayoutManager.BindingContext = this.listView.BindingContext; 

} 

 

For your reference we have attached the working sample below, 

 

Sample Link: http://www.syncfusion.com/downloads/support/directtrac/general/ze/GridSpanSample905296609 

 

Query 2: 

 

We are able to reproduce the “NullReference Exception throws while changing the LayoutManager at Run-time” issue and a support incident has been created under your account to track the status of this report. Please log on to our support website to check for further updates 

Link: https://www.syncfusion.com/account/login 

 

Regards, 

G.Muthu Kumaran. 

[Christopher Schulze]

Hi,

the provided solution for Query 1 works very well.

But I think I will use the way of Query 2 when the issue has been fixed in the next release.

Thank You for the quick response and solution.

Christopher

[Muthu Kumaran Gnanavinayagam]

Hi Christopher, 

Thanks for the update. We will let you know once the release has been rolled out. Please let us know if you require further assistance. 

Regards, 

G.Muthu Kumaran. 

[Christopher Schulze]

Hi,

I updated to Version 15.2.0.40 today and tested my second solution (with DataTrigger) again. It works like a charm now. It's now possible to just bind to the IsLandscapeMode or IsPortraitMode Properties of the Baseclass. So I have a clean codebehind, a clean ViewModel and XAML is describing what happens when Mode is changing.

Thanks for fixing the NullReferenceException so fast.

Regards,

Christopher

[Dinesh Babu Yadav]

Hi Christopher, 

 

Thanks for the update. 

 

Regards, 

Dinesh Babu Yadav 

[Raghav]

Hi,

We have the same issue for the same usecase.Looks like this might have broken. We are using 18.2.0.47. 

Raghav

[Lakshmi Natarajan]

Hi Raghav, 

 

Thank you for using Syncfusion products. 

 

We have checked the reported query “SfListView GridLayout SpanCount Binding MVVM Orientation not working” from our side. Unfortunately, we are unable to reproduce the reported scenario at our side. We have attached the tested sample and video in the following link, 

 

Sample: https://www.syncfusion.com/downloads/support/forum/129916/ze/ListViewGridLayout-1960170603 

Video: https://www.syncfusion.com/downloads/support/forum/129916/ze/Video142898886 

 

Please check our sample and let us know if you still facing the same issue? If not, please modify our sample based on your scenario to reproduce the issue which would be helpful for us to check on it and provide you the solution as soon as possible. 

 

Regards, 

Lakshmi Natarajan