Display from dynamic JSON data

[Andrew]

Hi,

I have a scenario where I need to display JSON data in a string in an easy readable format. The treegrid looks nice for this but I can't work out how to do it directly from a string. As the JSON is dynamic I can't use a class as it changes depending on the source. 

Ideally I will be showing 2 side by side for comparisons, in this case the 2 will always match in structure just the values would change (and hopefully add some colour indications to the values that are different.

Below is an example of the JSON, is this possible or would another control possibly work?

Thanks

{

"id": 1,

"name": "testname",

"make": "testmake",

"model": "testmodel",

"serial": "testserial",

"createdDate": "2020-01-01T00:00:00",

"active": true,

"Type": {

"id": 1,

"name": "tool"

},

"sections": [

{

"id": 1,

"name": "section1"

},

{

"id": 2,

"name": "section2"

}

]

}

[Jagadesh Ram Raajkumar]

Hi Andrew, 

Based on your query we suggest you use Hierarchy data binding in TreeGrid. We suggest you deserialize the dynamic JSON string into a List of ExpandoObject to bind the data to TreeGrid. Refer to the below code example. 

@using System.Dynamic 

@using Newtonsoft.Json.Converters 

@using Newtonsoft.Json 

@using Syncfusion.Blazor.TreeGrid; 

 

<SfTreeGrid DataSource="@DynamicJsonCollection" AllowPaging="true" ChildMapping="sections" TreeColumnIndex="1"> 

    <TreeGridColumns> 

        <TreeGridColumn Field="id" HeaderText="ID"></TreeGridColumn> 

        <TreeGridColumn Field="name" HeaderText="Name"></TreeGridColumn> 

    </TreeGridColumns> 

</SfTreeGrid> 

 

@code { 

 

    public List<ExpandoObject> DynamicJsonCollection { get; set; } 

 

    protected override void OnInitialized() 

    { 

        base.OnInitialized(); 

 

        string jsonString = "[{ 'id': '1', 'name': 'testname', 'make': 'testmake', 'model': 'testmodel', 'serial': 'testserial', 'createdDate': '2020-01-01T00:00:00', 'active': 'true', 'Type': { 'id': '1', 'name': 'tool' }, 'sections': [ { 'id': '1', 'name': 'section1' }, { 'id': '2', 'name': 'section2' } ] }]"; 

 

        var converter = new ExpandoObjectConverter();  

 

        DynamicJsonCollection = JsonConvert.DeserializeObject<List<ExpandoObject>>(jsonString, converter); //deserializing into a list of expandoobject 

 

    } 

 

} 

Refer to the below documentation for more details on Hierarchy Data Binding. 

https://blazor.syncfusion.com/documentation/treegrid/data-binding/#hierarchy-data-binding 

https://blazor.syncfusion.com/documentation/treegrid/data-binding/#expandoobject-binding 

NOTE: The child records are not rendered properly while using ExpandoObject with Hierarchy Data, it is a known issue and fix for this issue will be included in the next week’s patch release. 

Regards,
Jagadesh Ram