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.
Unfortunately, activation email could not send to your email. Please try again.

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

Thread ID:

Created:

Updated:

Platform:

Replies:

132918 Sep 28,2017 06:49 AM Oct 2,2017 08:09 AM Xamarin.Forms 3
loading
Tags: SfDataGrid
Carlo Chan
Asked On September 28, 2017 06:49 AM

here is my jason get request populating a custom list view

public class RootObject
    {

        public List<Feed> Feeds { getset; }
    }

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

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


    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 [Syncfusion]
Replied On September 29, 2017 03:33 AM

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, 
 
Also, we have prepared a sample by binding JSON data to SfDataGrid and you can download the same from the below link, 
 
Regards, 
Divakar. 


Carlo Chan
Replied On September 29, 2017 09:15 AM

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 { getset; }
    }

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

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


    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 [Syncfusion]
Replied On October 2, 2017 08:09 AM

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
 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

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.

;