1. Home
  2. Forum
  3. Blazor
  4. Binding Data Hierarchy in Grid

Binding Data Hierarchy in Grid

I have below code to bind a hierarchial data. The class is "Log", which has internal types as properties. Binding values of "Log.Properties.XXXX" not appering on Grid. Ony direct propertie of "Log.XXX" appears on grid.

  1. Did I miss anything here?
  2. Also is there a way this data can bind to a TreeView control? Mya be diect JSON?


My JSON Data - 

{"Timestamp":"2022-02-21T17:56:40.9307707+00:00","Level":"Error","MessageTemplate":"API Http response status is not successful for https://epdapi-dev.zurichna.com/api/v1/RequestForm/datadictionaryentries/1 ---","Properties":{"MachineName":"pd0sdwk0006BK","TransportConnectionId":"wbUNJ8NWxRMajXADs8wjTg","RequestId":"80000337-0000-e700-b63f-84710c7967bb","RequestPath":"/_blazor","Assembly":"EPD.UI","EnvironmentName":"Development","ContentRootPath":"C:\\home\\site\\wwwroot","WebRootPath":"C:\\home\\site\\wwwroot\\wwwroot","ProcessId":3672,"ProcessName":"w3wp","ThreadId":28,"ApplicationName":"EPD.UI"}}

{"Timestamp":"2022-02-21T17:56:40.9797592+00:00","Level":"Error","MessageTemplate":"API Http response status code is Forbidden ---","Properties":{"MachineName":"pd0sdwk0006BK","TransportConnectionId":"wbUNJ8NWxRMajXADs8wjTg","RequestId":"80000337-0000-e700-b63f-84710c7967bb","RequestPath":"/_blazor","Assembly":"EPD.UI","EnvironmentName":"Development","ContentRootPath":"C:\\home\\site\\wwwroot","WebRootPath":"C:\\home\\site\\wwwroot\\wwwroot","ProcessId":3672,"ProcessName":"w3wp","ThreadId":28,"ApplicationName":"EPD.UI"}}

{"Timestamp":"2022-02-21T17:56:40.9900112+00:00","Level":"Error","MessageTemplate":"API Http response content is <!DOCTYPE html>\r\n<html>\r\n<head>\r\n <title>Web App - Unavailable</title>\r\n <style type=\"text/css\">\r\n html {\r\n height: 100%;\r\n width: 100%;\r\n }\r\n\r\n #feature {\r\n width: 960px;\r\n margin: 95px auto 0 auto;\r\n overflow: auto;\r\n }\r\n\r\n #content {\r\n font-family: \"Segoe UI\";\r\n font-weight: normal;\r\n font-size: 22px;\r\n color: #ffffff;\r\n float: left;\r\n width: 460px;\r\n margin-top: 68px;\r\n margin-left: 0px;\r\n vertical-align: middle;\r\n }\r\n\r\n #content h1 {\r\n font-family: \"Segoe UI Light\";\r\n color: #ffffff;\r\n font-weight: normal;\r\n font-size: 60px;\r\n line-height: 48pt;\r\n width: 800px;\r\n }\r\n\r\n p a, p a:visited, p a:active, p a:hover {\r\n color: #ffffff;\r\n }\r\n\r\n #content a.button {\r\n background: #0DBCF2;\r\n border: 1px solid #FFFFFF;\r\n color: #FFFFFF;\r\n display: inline-block;\r\n font-family: Segoe UI;\r\n font-size: 24px;\r\n line-height: 46px;\r\n margin-top: 10px;\r\n padding: 0 15px 3px;\r\n text-decoration: none;\r\n }\r\n\r\n #content a.button img {\r\n float: right;\r\n padding: 10px 0 0 15px;\r\n }\r\n\r\n #content a.button:hover {\r\n background: #1C75BC;\r\n }\r\n </style>\r\n</head>\r\n<body bgcolor=\"#00abec\">\r\n <div id=\"feature\">\r\n <div id=\"content\">\r\n <h1 id=\"unavailable\">Error 403 - Forbidden</h1>\r\n <p id=\"tryAgain\">The web app you have attempted to reach has blocked your access.</p>\r\n </div>\r\n </div>\r\n</body>\r\n</html>\r\n ---","Properties":{"MachineName":"pd0sdwk0006BK","TransportConnectionId":"wbUNJ8NWxRMajXADs8wjTg","RequestId":"80000337-0000-e700-b63f-84710c7967bb","RequestPath":"/_blazor","Assembly":"EPD.UI","EnvironmentName":"Development","ContentRootPath":"C:\\home\\site\\wwwroot","WebRootPath":"C:\\home\\site\\wwwroot\\wwwroot","ProcessId":3672,"ProcessName":"w3wp","ThreadId":28,"ApplicationName":"EPD.UI"}}

{"Timestamp":"2022-02-21T17:56:41.0986917+00:00","Level":"Error","MessageTemplate":"System.InvalidCastException: Unable to cast object of type 'System.Object' to type 'EPD.Core.ResponseWrapper`1[System.Collections.Generic.IEnumerable`1[EPD.ViewModels.Shared.DataDictionaryFieldValuesViewModelcs]]'.\r\n at EPD.HTTPClientHelper.HTTPClientAccessManager.GetAsync[T](String url, String overriddenClientName) in D:\\a\\1\\s\\EPD.HTTPClientHelper\\HTTPClientAccessManager.cs:line 60\r\n at EPD.UI.Pages.RequestForm.RequestForm.LoadInitialData() in D:\\a\\1\\s\\EPD.UI\\Pages\\RequestForm\\RequestForm.razor.cs:line 91","Properties":{"ExceptionSource":"System.Private.CoreLib","MachineName":"pd0sdwk0006BK","TransportConnectionId":"wbUNJ8NWxRMajXADs8wjTg","RequestId":"80000337-0000-e700-b63f-84710c7967bb","RequestPath":"/_blazor","Assembly":"EPD.UI","EnvironmentName":"Development","ContentRootPath":"C:\\home\\site\\wwwroot","WebRootPath":"C:\\home\\site\\wwwroot\\wwwroot","ProcessId":3672,"ProcessName":"w3wp","ThreadId":28,"ApplicationName":"EPD.UI"}}


My Code


@page "/"

@using Microsoft.AspNetCore.Hosting

@using Microsoft.JSInterop

@using System.IO;

@using Microsoft.AspNetCore.Components.ProtectedBrowserStorage

@using System.Text.Json;

@using Syncfusion.Blazor.Grids

@using Syncfusion.Blazor.Data

@inject IWebHostEnvironment WebHostEnvironment

@inject IJSRuntime JSRuntime

@inject ProtectedSessionStorage protectedSessionStorage

<h1>Hello, world!</h1>


Welcome to your new app.


<SurveyPrompt Title="How is Blazor working for you?" />

<div>


</div>


<SfGrid DataSource="@Logs" AllowPaging="true">

<GridPageSettings PageSize="100"></GridPageSettings>

<GridColumns >

<GridColumn Field=@nameof(Log.Timestamp) HeaderText="Timestamp"></GridColumn>

<GridColumn Field=@nameof(Log.Level) HeaderText="Level"></GridColumn>

<GridColumn Field=@nameof(Log.MessageTemplate) HeaderText="Message"></GridColumn>

<GridColumn Field=@nameof(Log.Properties.FullName) HeaderText="FullName"></GridColumn>

<GridColumn Field=@nameof(Log.Properties.EventId.Id) HeaderText="EventId"></GridColumn>

<GridColumn Field=@nameof(Log.Properties.EventId.Name) HeaderText="EventName"></GridColumn>

<GridColumn Field=@nameof(Log.Properties.SourceContext) HeaderText="SourceContext"></GridColumn>

<GridColumn Field=@nameof(Log.Properties.MachineName) HeaderText="MachineName"></GridColumn>

<GridColumn Field=@nameof(Log.Properties.EnvironmentName) HeaderText="EnvironmentName"></GridColumn>

<GridColumn Field=@nameof(Log.Properties.ProcessId) HeaderText="ProcessId"></GridColumn>

<GridColumn Field=@nameof(Log.Properties.ProcessName) HeaderText="ProcessName"></GridColumn>

<GridColumn Field=@nameof(Log.Properties.ThreadId) HeaderText="ThreadId"></GridColumn>

<GridColumn Field=@nameof(Log.Properties.ApplicationName) HeaderText="ApplicationName"></GridColumn>

</GridColumns>

</SfGrid>

@code

{

public List<Log> Logs { get; set; } = new List<Log>();

public string LogsJson { get; set; } = string.Empty;

protected async override Task OnInitializedAsync()

{

try

{

string[] logLines = System.IO.File.ReadAllLines(Path.Combine(WebHostEnvironment.ContentRootPath, "Data", "logdev_20211230.log"));

foreach (var logLine in logLines)

{

Log log = JsonSerializer.Deserialize<Log>(logLine);

Logs.Add(log);

}

JsonSerializerOptions jsonSerializerOptions = new JsonSerializerOptions { PropertyNameCaseInsensitive = true, WriteIndented = false };

//LogsJson = JsonSerializer.Serialize(Logs);

}

catch (Exception ex)

{


}

}


public class Log

{

public DateTime Timestamp { get; set; }

public string Level { get; set; }

public string MessageTemplate { get; set; }

public Properties Properties { get; set; }

}


public class Properties

{

public string FullName { get; set; }

public Eventid EventId { get; set; }

public string SourceContext { get; set; }

public string MachineName { get; set; }

public string EnvironmentName { get; set; }

public int ProcessId { get; set; }

public string ProcessName { get; set; }

public int ThreadId { get; set; }

public string ApplicationName { get; set; }

}


public class Eventid

{

public int Id { get; set; }

public string Name { get; set; }

}


}









5 Replies
RS Renjith Singh Rajendran Syncfusion Team February 28, 2022 01:56 PM UTC

Hi Jaish, 
 
Greetings from Syncfusion support. 
 
Query 1 : Did I miss anything here? 
We have documented this topic to bind complex data to grid in our documentation section. Please refer the below links for more details, 
 
Please ensure to set the Field property value as like below to achieve this requirement. 
 
 
<GridColumn Field="Name.LastName" HeaderText="Last Name"Width="130"></GridColumn> 
 
 
Query 2 : Also is there a way this data can bind to a TreeView control? Mya be diect JSON? 
We are checking this from our side. We will update you further details on or before March 2, 2022. Until then we appreciate your patience. 
 
Regards, 
Renjith R 


JM Jaish Mathews March 1, 2022 04:35 PM UTC

Regarding complex data binding, my question was to Ref. a complex type field as "Log.Properties.FullName" i.e. 3 sections, not direct property value as " Log.FullName". Supporting such way of representing the fields?


RS Renjith Singh Rajendran Syncfusion Team March 2, 2022 10:26 AM UTC

Hi Jaish, 

Query 1 : not direct property value as " Log.FullName". Supporting such way of representing the fields? 
You can also use the nameof for complex columns instead of assigning static text for Field property. To use nameof for complex columns, we suggest you to use as like the code below, 
 
 
<GridColumn Field="@(nameof(EmployeeData.Name) + "." + nameof(EmployeeName.LastName))" HeaderText="Last Name" Width="150"></GridColumn> 
 
 
Query 2 : Also is there a way this data can bind to a TreeView control? Mya be diect JSON?  
The TreeView component supports JSON structure of DataSource and we suggest you refer the below UG document link for more details on data binding option with TreeView.  
 
 
You can also use DataManager for binding data source for TreeView. Please refer to the following link.  
 
Please get back to us if you need further assistance. 
 
Regards, 
Renjith R 



JM Jaish Mathews replied to Renjith Singh Rajendran March 13, 2022 08:53 PM UTC

The treeview sample given has deprecated Ref.. For Grid binding, I have a complex property of

Log.Properties.FullName to bind and tried below grid column syntax as you suggested and value still not displayis.



RS Renjith Singh Rajendran Syncfusion Team March 14, 2022 01:42 PM UTC

 
Query 1 : For Grid binding, I have a complex property of Log.Properties.FullName to bind and tried below grid column syntax as you suggested and value still not displayis. 
We suggest you to ensure to assign the Field value for Grid complex typed column as like suggested in our below documentation. 
 
Based on your model class codes from first update, you need to specify Field name as Properties.FullName and not as Log.Properties.FullName to display value from FullName. We have prepared a sample using your model class(Log) code and displayed FullName value in Grid column. Please refer the below sample and modify your codes by referring the below sample. 
 
Please use the below code to display FullName as per your Log model class, 
 
 
<GridColumn Field="@(nameof(Log.Properties) + "." + nameof(Properties.FullName))"></GridColumn> 
 
 
If you are still facing difficulties then kindly share with us a simple issue reproducing sample based on your scenario for us to proceed further. 
 
Query 2 : The treeview sample given has deprecated Ref.. 
We have considered to update the GitHub sample in our  Volume 1 release, which is expected to be released at the end of March 2022. Meanwhile, we suggest you to check the updated code in the shared UG document. You can also refer to the below documentation link.  
  
  
Also, for your reference we attached a TreeView sample with WebApiAdaptor. Check the below link.  
  
 
Please get back to us if you need further assistance. 
 
Regards, 
Renjith R 
 


Loader.
Up arrow icon