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.
Hello,
I am trying to create a Hierarchical Grid with 3 levels, displaying Locations => Items => Details. I am unable to get the "Details" level information to populate, apparently because I am unable to pass the item (or any of the item's member variables) from the Grid to the C# code. Everything I have tried still results in the error "System.NullReferenceException: 'Object reference not set to an instance of an object.' item was null."
I am pasting a copy of my code below. I have condensed it, but it does still exhibit the same behavior as the full version of my program. Any help you can offer would be greatly appreciated.
@page "/hierarchy-grid"
@using Syncfusion.Blazor.Grids
@using Syncfusion.Blazor.Data
@using Syncfusion.Blazor;
<h3>HierarchyGrid</h3>
<div class="col-lg-12 control-section">
<div class="content-wrapper">
<div class="row">
<SfGrid DataSource="@locations" >
<GridTemplates>
<DetailTemplate>
@{
var location = (context as LocationData);
<SfGrid TValue="ItemData" DataSource="@GetItems(location)" AllowPaging="false">
<GridPageSettings PageSize="8"></GridPageSettings>
<GridTemplates>
<DetailTemplate Context="ItemDataGrid">
@{
var item = (context as ItemData);
<SfGrid TValue="DetailData" DataSource="@GetItemDetails(item)" AllowPaging="false">
<GridColumns>
<GridColumn Field=@nameof(DetailData.Title) Width="600"></GridColumn>
</GridColumns>
</SfGrid>
}
</DetailTemplate>
</GridTemplates>
<GridColumns>
<GridColumn Field=@nameof(ItemData.group) HeaderText="Product Group" Width="110"> </GridColumn>
<GridColumn Field=@nameof(ItemData.ItemId) HeaderText="Item ID" Width="110"></GridColumn>
</GridColumns>
</SfGrid>
}
</DetailTemplate>
</GridTemplates>
<GridColumns>
<GridColumn Field=@nameof(LocationData.locationId) HeaderText="Location ID" Width="55"> </GridColumn>
<GridColumn Field=@nameof(LocationData.locationName) HeaderText="Location Name" Width="110"></GridColumn>
</GridColumns>
</SfGrid>
</div>
</div>
</div>
@code {
public class LocationData
{
public string? locationId { get; set; }
public string? locationName { get; set; }
public List<ItemData>? items { get; set; }
}
public class ItemData
{
public string? ItemId { get; set; }
public string? location { get; set; }
public string? group { get; set; }
public List<DetailData>? details { get; set; }
}
public class DetailData
{
public string? ItemId { get; set; }
public string? DetailId { get; set; }
public string Title { get; set; }
public DetailData(string iid, string ttl)
{
ItemId = iid;
Title = ttl;
DetailId = iid + "_" + ttl;
}
}
public List<DetailData> GetItemDetails(ItemData item)
{
//return items[0].details;
return item.details;
}
public List<ItemData> GetItems(LocationData location)
{
items = location.items;
return location.items;
}
public List<LocationData>? locations { get; set; }
public List<ItemData> items = new List<ItemData>();
public List<DetailData> details = new List<DetailData>();
protected override void OnInitialized()
{
string iid = "";
locations = new List<LocationData>();
LocationData tloc = new LocationData();
tloc.locationId = "100";
tloc.locationName = "Location100";
tloc.items = new List<ItemData>();
ItemData titem = new ItemData();
titem.ItemId = "Item1";
titem.location = "100";
titem.group = "CRITICAL";
iid = titem.ItemId;
titem.details = new List<DetailData>();
titem.details.Add(new DetailData(iid, ""));
titem.details.Add(new DetailData(iid, "Row1"));
titem.details.Add(new DetailData(iid, "Row2"));
tloc.items.Add(titem);
titem = new ItemData();
titem.ItemId = "Item2";
titem.location = "100";
titem.group = "CRITICAL";
iid = titem.ItemId;
titem.details = new List<DetailData>();
titem.details.Add(new DetailData(iid, ""));
titem.details.Add(new DetailData(iid, "Row1"));
titem.details.Add(new DetailData(iid, "Row2"));
titem.details.Add(new DetailData(iid, "Row3"));
tloc.items.Add(titem);
titem = new ItemData();
titem.ItemId = "Item3";
titem.location = "100";
titem.group = "CUSTOM";
iid = titem.ItemId;
titem.details = new List<DetailData>();
titem.details.Add(new DetailData(iid, "Row0"));
titem.details.Add(new DetailData(iid, "Row1"));
titem.details.Add(new DetailData(iid, "Row2"));
titem.details.Add(new DetailData(iid, "Row3"));
tloc.items.Add(titem);
locations.Add(tloc);
tloc = new LocationData();
tloc.locationId = "200";
tloc.locationName = "Location200";
tloc.items = new List<ItemData>();
titem = new ItemData();
titem.ItemId = "Item2";
titem.location = "200";
titem.group = "CRITICAL";
iid = titem.ItemId;
titem.details = new List<DetailData>();
titem.details.Add(new DetailData(iid, ""));
titem.details.Add(new DetailData(iid, "Row1"));
titem.details.Add(new DetailData(iid, "Row2"));
tloc.items.Add(titem);
locations.Add(tloc);
}
}
Hi Electa,
We have analyzed your query and based on your sharedcode ; We suspect that column with one to many relationship. currently we don’t have support to perform DataOperations in a column with one to many relationship data (like List<object>) . We also prepared the simple sample with Hierarchical Grid with 3 level. Please refer the attached sample for your reference .we would also like to inform that we have Complex column and foreign key column features which can be used to display values from different tables that have the same foreign key. Please refer to the attached documentation for more information
Reference: https://blazor.syncfusion.com/documentation/datagrid/columns#complex-data-binding
https://blazor.syncfusion.com/documentation/datagrid/columns#foreign-key-column
Blazor DataGrid Hierarchy Grid Example - Syncfusion Demos
Please let us know if you have any concerns.
Regards,
Naveen Palanivel
