How would you bind jason data to a sfData grid and populate the grid

[Carlo Chan]

here is my jason get request populating a custom list view

public class RootObject
    {

        public List<Feed> Feeds { get; set; }
    }

    public class Channel
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Description { get; set; }
        public string Latitude { get; set; }
        public string Longitude { get; set; }
        public string Field1 { get; set; }
        public DateTime Created_at { get; set; }
        public DateTime Updated_at { get; set; }
        public string Elevation { get; set; }
        public int Last_entry_id { get; set; }
    }

    public class Feed
    {
        public DateTime Created_at { get; set; }
        public int Entry_id { get; set; }
        public string Field1 { get; set; }
    }


    public partial class DripPage : TabbedPage
    {
        void Handle_Refreshing(object sender, System.EventArgs e)
        {
            postsListView.ItemsSource = _data;
            postsListView.EndRefresh();
        }

        private const string Url = "https://thingspeak.com/channels/301726/field/1.json";
        private HttpClient _client = new HttpClient();
        private ObservableCollection<Feed> _data;

    
        public DripPage()
        {
            InitializeComponent();
        }

        protected override async void OnAppearing()
        {
            var content = await _client.GetStringAsync(Url);
            var data = JsonConvert.DeserializeObject<RootObject>(content);

            _data = new ObservableCollection<Feed>(data.Feeds);
            postsListView.ItemsSource = _data;

    
            base.OnAppearing();
        }

        void OnAdd(object sender, System.EventArgs e)
        {
        }

        void OnUpdate(object sender, System.EventArgs e)
        {
        }

        void OnDelete(object sender, System.EventArgs e)
        {
        }
    }
}

[Divakar Subramaniam]

Hi Carlo, 

 

Thanks for contacting Syncfusion support. 

 

In SfDataGrid, JSON data cannot bound directly. To bind SfDataGrid with JSON data, you need to deserialize the JSON data to the bindable format. Please refer the below KB link to know how to deserialize the JSON data and bound it to SfDataGrid, 

KB link: https://www.syncfusion.com/kb/7828/how-to-load-sfdatagrid-dynamically-with-json-data-without-poco-classes  

 

Also, we have prepared a sample by binding JSON data to SfDataGrid and you can download the same from the below link, 

Sample link: http://www.syncfusion.com/downloads/support/forum/132918/ze/GridWithJSONData-1403374775  

 

Regards, 

Divakar. 

[Carlo Chan]

hi, thanks for replying syncfusion! 

I have already deserialized my data however keep getting error after error when trying to use the sfdatagrid with my json data and its getting quite frustrating. I am pretty new to xamarin so maybe thats why. But ive had a look at your documentation regarding but it shows local, and im not sure i quite understand the json sln you sent me. If possible could you guys try and get one going atleast start it off for me.  Thanks

Here is the data im trying to collect and populate onto the sfdata grid  just using the feeds 

public class RootObject
    {

        public List<Feed> Feeds { get; set; }
    }

    public class Channel
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Description { get; set; }
        public string Latitude { get; set; }
        public string Longitude { get; set; }
        public string Field1 { get; set; }
        public DateTime Created_at { get; set; }
        public DateTime Updated_at { get; set; }
        public string Elevation { get; set; }
        public int Last_entry_id { get; set; }
    }

    public class Feed
    {
        public DateTime Created_at { get; set; }
        public int Entry_id { get; set; }
        public string Field1 { get; set; }
    }


    public partial class DripPage : TabbedPage
    {
        void Handle_Refreshing(object sender, System.EventArgs e)
        {
            postsListView.ItemsSource = _data;
            postsListView.EndRefresh();
        }

        private const string Url = "https://thingspeak.com/channels/301726/field/1.json";
        private HttpClient _client = new HttpClient();
        private ObservableCollection<Feed> _data;

    
        public DripPage()
        {
            InitializeComponent();
        }

        protected override async void OnAppearing()
        {
            var content = await _client.GetStringAsync(Url);
            var data = JsonConvert.DeserializeObject<RootObject>(content);

            _data = new ObservableCollection<Feed>(data.Feeds);
            postsListView.ItemsSource = _data;

    
            base.OnAppearing();
        }

        void OnAdd(object sender, System.EventArgs e)
        {
        }

        void OnUpdate(object sender, System.EventArgs e)
        {
        }

        void OnDelete(object sender, System.EventArgs e)
        {
        }
    }
}

[Vimal Prabhu Manohkaran]

Hi Carlo,

Thanks for the update. Could you please let us know what you are doing with the deserialized JSON data ? In our sample provided in the previous response,

1. We first deserialize the JSON data and store it in a collection as shown below. 

public ObservableCollection<DynamicModel> DynamicCollection { get; set; } 

 

DynamicJsonCollection = JsonConvert.DeserializeObject<List<Dictionary<string, object>>>(JsonData); 

 

2. Then we fetch each item from the deserialized JSON data and add it to the collection that we bind as the ItemsSource for the grid.


 

 

public ObservableCollection<DynamicModel> DynamicCollection { get; set; } 

 

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; 

} 

                 

 

 
3. By doing the above we will now be able to store a dictionary of items in the collection we bind as the ItemsSource for the grid. Then now we bind each item in the dictionary as the MappingNames for each of the columns and thus the data is rendered . So the key is to convert the desirialized objects into a collection and bind it to the grid. Here the collection we have binded is a collection of dictionaries. Please refer the below code snippet to know how to populate each column.

 

grid.ItemsSource = viewModel.DynamicCollection; 

grid.Columns.Add(new GridTextColumn() 

{ 

  HeaderText = "Order ID", 

  MappingName = "Values[OrderID]", 

}); 

 

Could you please follow this step by step approach and let us know if this works. Also could you please share more details on what errors you are facing when trying to implement the same.

Regards,
Vimal Prabhu