How to do Datasource binding on xaml with mvvm?

[Emil]

Hi,

I am looking for using datasource with listview but documentation example is only with C# behind code. is it possible using mvvm and binding on xaml? can you provide me please some information?

thank you very much.

Emil

[Dinesh Babu Yadav]

Hi Emil, 

 

Thank you for contacting Syncfusion Support. 

 

You can work with our SfListView using the MVVM pattern and binding on XAML. We have mentioned the code examples like loading, sorting and grouping with DataSource in both XAML  and C# code with Tabs on our SfListView documentation. Please find the UG link for your reference, 

 

https://help.syncfusion.com/xamarin/sflistview/getting-started  

 

For your reference, we have attached the sample also. Please find the sample link below, 

 

Sample: http://www.syncfusion.com/downloads/support/forum/127778/ze/ListViewSample1394465298.zip  

 

Please let us know if you have any queries. 

  

Regards, 

Dinesh Babu Yadav 

[Emil]

Hi Dinesh,

thanks for your suggestion. just a quick question, Is it any different than sfDataGrid? It has also grouping. is there any difference?

on the other hand, I have also wp8.1 app, i think that sfListview doesnt support it, correct?

thanks,

Emil 

[Dinesh Babu Yadav]

Hi Emil, 

 

·       DataSource is different than SfDataGrid. Please find the differentiation below. 

o   DataSource – It is a non-UI component that consumes raw data and processes data operations such as sorting, filtering and grouping. 

o   SfDataGrid – It is an UI component which display and manipulate the data in a tabular (Multi-column) view.  

o   SfListView – It is a layout control to load the items in a linear manner with some set of features. In future, different layouts (Grid, Wrap, Staggered, etc.) will be added into this. It uses the DataSource internally to processes the data. 

 

·       Yes, SfListView don’t have support for Windows Platform 8.1 application. 

 

Please let us know if you have any queries. 

  

Regards, 

Dinesh Babu Yadav 

[Emil]

Hi Dinesh,

One last question please. 

Is it possible have AllowGroupExpandCollapse option like SfListView.AllowGroupExpandCollapse ?

Because datasource exposes already a method called  AutoExpandGroups() method. But I cant find AllowGroupExpandCollapse or after all collapsed, how to expend back. here is my code as below.

It works fine, all will be colapsed if i use dataSource.AutoExpandGroups = false; but how to expland again?

  dataSource.GroupDescriptors.Add(new GroupDescriptor()

            {

                PropertyName = "Title",

                KeySelector = (object obj1) =>

                {

                    var item = (obj1 as Helpers.Models.ExerciseDetailModel);

                    return item.Title.ToString();

                }

            });

          dataSource.AutoExpandGroups = false;

   private  void ViewCell_BindingContextChanged(object sender, EventArgs e)

        {

            try

            {

                ViewCell viewCell = sender as ViewCell;

                var rs= viewCell.BindingContext as GroupResult;

                if (viewCell.BindingContext is GroupResult)

                {

                    var label = new Label()

                    {

                        TextColor = Color.Black,

                        FontSize = 14,

                        HeightRequest = 30,

                        HorizontalTextAlignment = TextAlignment.Center,

                        VerticalTextAlignment = TextAlignment.Center,

                        BackgroundColor = Color.Gray

                    };

                    label.SetBinding(Label.TextProperty, new Binding("Key"));

                    viewCell.View = label;

                }

            }

            catch (Exception)

            {

                 

            }

           

        }

[Pannir Selvam S]

Hi Emil, 

 

You can achieve your requirement “Expand or Collapse the particular group” by calling the ExpandGroup  or CollapseGroup method. To expand or collapse all the groups at runtime, you can call the ExpandAll or CollapseAll method of SfListView. 

 

Code example [C#]:  

  

// To expand or collapse a group 

var group = listView.DataSource.Groups[0]; 

listView.ExpandGroup(group); 

listView.CollapseGroup(group); 

 

//To expand or collapse all the groups 

listView.ExpandAll(); 

listView.CollapseAll(); 

 

  

If you want to expand or collapse the groups, please refer the below documentation for more details  

 

UG: https://help.syncfusion.com/xamarin/sflistview/grouping  

  

Regards, 

Pannir 

[Emil]

Hi Pannir,

thanks for your reply. But what is the event after tapping on the groupitem or KeySelector ? 

[Pannir Selvam S]

Hi Emil, 

In SfListView, ItemTapped event is fired when tap on a group header, header and normal item. And you can identify the tap on group header item by checking the ItemType from event arguments like below code example. 

Code Example [C#]: 

ListView.ItemTapped += ListView_ItemTapped; 

 

private void ListView_ItemTapped(object sender, ItemTappedEventArgs e) 

{ 

    if(e.ItemType == Syncfusion.ListView.XForms.ItemType.GroupHeader) 

    { 

        var group = e.ItemData as GroupResult; 

        var key = group.Key; 

    } 

} 

Regards, 

Pannir