We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to load SfDataGrid dynamically with JSON data without POCO classes ?

Platform: Xamarin.Forms |
Control: SfDataGrid |
Product Version: 13.4.0.53

 

JSON data cannot be bound directly to SfDataGrid. To bind SfDataGrid with JSON data, we must deserialize the JSON data to a bindable format. You can use the open source NuGet Newtonsoft.Json to serialize and deserialize JSON objects.

Xamarin.Forms have limitations in loading dynamic object (Expando object). Hence dynamic objects can be loaded only using dictionary collection. Refer the dynamic limitations for more details.

JSON data can be parsed into a dictionary collection using JsonConvert.DeserializeObject<List<Dictionary<string, object>>>(json_object).

You can then convert the list of dictionary objects to an observable collection if your data source need to respond to collection changes.

The List of Dictionary objects or the converted ObservableCollection can now be binded as ItemsSource of SfDataGrid.

Refer the below example in which the list of dictionary objects are converted as an ObservableCollection and bound to SfDataGrid.

ViewModel.cs

public class ViewModel
{
        public const string JsonData = "[{\"OrderID\":1,\"EmployeeID\":100,\"FirstName\":'Gina',\"LastName\":'Gable'}," +
                                       "{\"OrderID\":2,\"EmployeeID\":200,\"FirstName\":'Danielle',\"LastName\":'Rooney'}," +
                                      "{\"OrderID\":3,\"EmployeeID\":300,\"FirstName\":'Frank',\"LastName\":'Gable'},]" ;
                                      
       public ObservableCollection<DynamicModel> DynamicCollection { get; set; }
       public List<Dictionary<string, object>> DynamicJsonCollection { get; set; }
 
        public ViewModel()
        {
            DynamicJsonCollection = JsonConvert.DeserializeObject<List<Dictionary<string, object>>>(JsonData);
            DynamicCollection = PopulateData();
        }
 
        private ObservableCollection<DynamicModel> PopulateData()
        {
            var data = new ObservableCollection<DynamicModel>();
            foreach (var item in DynamicJsonCollection)
            {
                var obj = new DynamicModel() { Values = item };
                data.Add(obj);
            }
            return data;
        }
}

 

DynamicModel.cs

public class DynamicModel : INotifyPropertyChanged
{
        public Dictionary<string, object> data;
 
        public event PropertyChangedEventHandler PropertyChanged;
 
        public Dictionary<string, object> Values
        {
            get
            {
                return data;
            }
            set
            {
                data = value;
                if (PropertyChanged != null)
                    PropertyChanged(this, new PropertyChangedEventArgs("Values"));
            }
 
        }
        public DynamicModel()
        {
            this. data = new Dictionary<string, object>();
 
        }
}

 

MainPage.cs

You can set the deserialized data to the SfDataGrid by using the below

public partial class MainPage : ContentPage
{
        private SfDataGrid grid;
        private ViewModel viewModel;
        public MainPage()
        {
            InitializeComponent();
            grid = new SfDataGrid();
            viewModel = new ViewModel();
            grid.AllowSorting = true;
            grid.AutoGenerateColumns = false;
            grid.ColumnSizer = ColumnSizer.Star;
            grid.ItemsSource = viewModel.DynamicCollection;
            grid.Columns.Add(new GridTextColumn()
            {
                HeaderText = "Order ID",
                MappingName = "Values[OrderID]",
                LineBreakMode = LineBreakMode.WordWrap,
                TextAlignment = TextAlignment.Center,
                HeaderTextAlignment = TextAlignment.Center,
            });
 
            grid.Columns.Add(new GridTextColumn()
            {
                HeaderText = "Customer ID",
                MappingName = "Values[EmployeeID]",
                LineBreakMode = LineBreakMode.WordWrap,
                TextAlignment = TextAlignment.Center,
                HeaderTextAlignment = TextAlignment.Center,
            });
 
        this.Content = grid;
 
        }
}

 

Note:

In order to apply sorting for JSON data, you have to customize the GridQueryableCollectionViewWrapper class and initialize the customized GridQueryableCollectionViewWrapper while setting the ItemSource to SfDataGrid.

 

Refer the below code example to customize the GridQueryableCollectionViewWrapper class.

public class QueryableViewExt : GridQueryableCollectionViewWrapper
{
        public QueryableViewExt(IEnumerable source, SfDataGrid grid) : base(source, grid)
        {
 
        }
 
        public override Expression<Func<string, object, object>> GetExpressionFunc(string propertyName, DataOperation operation = DataOperation.Default, DataReflectionMode reflectionMode = DataReflectionMode.Default)
        {
            Expression<Func<string, object, object>> exp = base.GetExpressionFunc(propertyName, operation, reflectionMode);
            if (exp == null)
            {
                Func<string, object, object> func;
                func = (propertyname, record) =>
                {
                    var provider = this.GetPropertyAccessProvider();
                    return provider.GetValue(record, propertyName);
                };
                exp = (propertyname, record) => func(propertyName, record);
            }
            return exp;
        }
    }

 

MainPage.cs:

// grid.ItemsSource = viewModel.DynamicCollection;
grid.ItemsSource = new QueryableViewExt(viewModel.DynamicCollection, grid);

 

Sample Link: How to load SfDataGrid dynamically with JSON data without POCO classes?

 

2X faster development

The ultimate Xamarin UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment
Comments
Martin Richter
Jan 25, 2018

I just tried to rebuild the sample with the latest VS-2017 version and the latest Syncfusion 15.4.0.20 but I get an Null pointer exception in code I have no access to

Here an extract of the stacktrace.

  0xFFFFFFFFFFFFFFFF in System.Diagnostics.Debugger.Mono_UnhandledException_internal C# Annotated Frame
  0x1 in System.Diagnostics.Debugger.Mono_UnhandledException C# Annotated Frame
  0x3E in object.4b5b9e32-61ea-4e96-aced-47f0a4743d4e C# Annotated Frame
  0x94 in Syncfusion.SfDataGrid.XForms.SfDataGrid.CreateCollectionViewAdv C# Annotated Frame
  0xA in Syncfusion.SfDataGrid.XForms.SfDataGrid.CreateCollectionView C# Annotated Frame
  0x2 in Syncfusion.SfDataGrid.XForms.SfDataGrid.SetSourceList C# Annotated Frame


Reply
Martin Richter
Jan 25, 2018

I also moved the files into a new project. Same problem.

Martin Richter
Jan 25, 2018

Removing the QueryableViewExt, got the sample to run. But I would be happy to get a full running version.

Pranay Deep
Apr 23, 2018

Sorting is not working


Reply
Érik Vinícius
Sep 17, 2019

Can't I edit DataGrid data when loading it dynamically? I've tried but everytime I change a field content it becomes the same it was before.

Reply
Walter Robert Ditzler
Dec 03, 2020

Hi,

same here - example works basically except the sorting part. implemented as well QueryableViewExt but it seems Expression<Func<string, ... is not going to be fired.

Any update on this

cheers Walter.

Reply
Amir H
Dec 08, 2020

It works well using GridTextColumn but how can I use GridTemplateColumn and set a label text binding?

Reply

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile