How to load the JSON data in WPF DataGrid (SfDataGrid)?
The JSON data cannot be directly bound to the WPF DataGrid (SfDataGrid). To bind it, deserialize the JSON data to the bindable format. You can use the Newtonsoft.Json open source NuGet to serialize and deserialize the JSON objects.
JSON data can be parsed into a DataTable collection using JsonConvert.DeSerializeObject<List<Dictionary<string, object>>(json_object).
You can convert the list dictionary objects to the ObservableCollection if your data source should respond the collection changes.
Refer to the sample in which the list of dictionary objects is converted to the ObservableCollection and bound to the items source of SfDataGrid.
MainPage.Xaml
<Syncfusion:SfDataGrid x:Name="sfdatagrid" ColumnSizer="Star" AllowSorting="True" AutoGenerateColumns="False"> <interactivity:Interaction.Behaviors> <local:SfDataGridBehavior/> </interactivity:Interaction.Behaviors> <Syncfusion:SfDataGrid.Columns> <Syncfusion:GridTextColumn MappingName="Values[OrderID]" HeaderText="Order ID"/> <Syncfusion:GridTextColumn MappingName="Values[EmployeeID]" HeaderText ="Employee ID"/> </Syncfusion:SfDataGrid.Columns> </Syncfusion:SfDataGrid>
SfDataGridBehavior.cs
dataGrid.ItemsSource = viewModel.DynamicCollection ;
ViewModel.cs
public class ViewModel : INotifyPropertyChanged
{
string json = null;
public ObservableCollection<DynamicModel> DynamicCollection { get; set; }
public List<Dictionary<string, object>> DynamicJsonCollection { get; set; }
public ViewModel()
{
string fileName = @"..\..\JsonData.json";
json = ReadJsonFile(fileName);
DynamicJsonCollection = JsonConvert.DeserializeObject<List<Dictionary<string, object>>>(json);
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;
}
public event PropertyChangedEventHandler PropertyChanged;
public void OnPropertyChanged(string PropertyName)
{
if (PropertyChanged != null)
PropertyChanged(this, new PropertyChangedEventArgs(PropertyName));
}
}
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>();
}
}
To sort the JSON data, customize and initialize the GridQueryableCollectionViewWrapper class when setting item source to the SfDataGrid.
Refer to the 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;
}
}
SfDataGridBehavior.cs
//dataGrid.ItemsSource = viewModel.DynamicCollection; dataGrid.ItemsSource = new QueryableViewExt(viewModel.DynamicCollection, dataGrid);
