Category / Section
How to populate SfDataGrid with JSON data?
2 mins read
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.
JSON data can be parsed into an ExpandoObject using JsonConvert.DeserializeObject List<ExpandoObject>(json_object).
Refer the below example in which the ExpandoObject list is converted to an ObservableCollection and bound to a 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<dynamic > DynamicCollection { get; set; }
public List<ExpandoObject> DynamicJsonCollection { get; set; }
public ViewModel()
{
DynamicJsonCollection = JsonConvert.DeserializeObject<List<ExpandoObject>>(jsonData); DynamicCollection = PopulateData();
}
private ObservableCollection<dynamic > PopulateData()
{
var data = new ObservableCollection<dynamic>();
foreach (var item in DynamicJsonCollection)
{
data.Add(item);
}
return data;
}
}
MainPage.cs
You can set the deserialized data to the SfDataGrid as shown below.
public class MainActivity : Activity
{
SfDataGrid grid;
ViewModel viewModel;
protected override void OnCreate(Bundle bundle)
{
base.OnCreate(bundle);
grid = new SfDataGrid(BaseContext);
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 = "OrderID",
LineBreakMode = LineBreakMode.WordWrap,
TextAlignment = Android.Views.GravityFlags.Left,
HeaderTextAlignment = Android.Views.GravityFlags.Left,
});
grid.Columns.Add(new GridTextColumn()
{
HeaderText = "Customer ID",
MappingName = "EmployeeID",
LineBreakMode = LineBreakMode.WordWrap,
TextAlignment = Android.Views.GravityFlags.Left,
HeaderTextAlignment = Android.Views.GravityFlags.Left,
});
grid.Columns.Add(new GridTextColumn()
{
HeaderText = "First Name",
MappingName = "FirstName",
LineBreakMode = LineBreakMode.WordWrap,
TextAlignment = Android.Views.GravityFlags.Left,
HeaderTextAlignment = Android.Views.GravityFlags.Left,
});
grid.Columns.Add(new GridTextColumn()
{
HeaderText = "Last Name",
MappingName = "LastName",
LineBreakMode = LineBreakMode.WordWrap,
TextAlignment = Android.Views.GravityFlags.Left,
HeaderTextAlignment = Android.Views.GravityFlags.Left,
});
SetContentView (grid);
}
}
