Let's assume I have a Product model and a Part model, a product may have several parts, and we have a product table and a part model. Normally speaking, the product result we query out should look like
new List<Product>{
new Product{
productId = "1",
productName = "product 1",
parts = new List<Part>{
new Part{
partId = "11",
partName = "part 11",
belongToProductId = "1"
},
new Part{
partId = "12",
partName = "part 12",
belongToProductId = "1"
}
}
},
new Product{
productId = "2",
productName = "product 2",
parts = new List<Part>{
new Part{
partId = "21",
partName = "part 21",
belongToProductId = "2"
},
new Part{
partId = "22",
partName = "part 22",
belongToProductId = "2"
}
}
}
};
Then if we define the Grid like this, we will get the result like below which might not be what you want.
<TelerikGrid Data=@GridData2 Height="400px">
<GridColumns>
<GridColumn Field="productId" />
<GridColumn Field="productName" />
<GridColumn Field="parts" />
</GridColumns>
</TelerikGrid>
Then we need to create a special model
public class ProductGrid{
public string productId {get; set;}
public string productName {get; set;}
public string partId {get; set;}
public string partName {get; set;}
}
but this requires us to handle the data we query out like below.
foreach (var product in AllData2)
{
foreach (var part in product.parts)
{
var productGrid = new ProductGrid
{
productId = product.productId,
productName = product.productName,
partId = part.partId,
partName = part.partName
};
AllData.Add(productGrid);
}
}
Here's my test
@using TelerikBlazorDemos.DataAccess.Services
@using TelerikBlazorDemos.DataAccess.Dto
@page "/grid/observable-data"
@using System.Collections.ObjectModel
@inject HttpClient http
<TelerikGrid Data=@GridData Height="400px">
<GridColumns>
<GridColumn Field="productId" />
<GridColumn Field="productName" />
<GridColumn Field="partId" />
<GridColumn Field="partName" />
<!-- <GridColumn Field="parts" /> -->
</GridColumns>
</TelerikGrid>
@code {
private WeatherService _weatherService;
private WeatherService weatherService
{
get
{
if(_weatherService == null)
{
_weatherService = new WeatherService(http);
}
return _weatherService;
}
}
public ObservableCollection<Product> GridData2 { get; set; }
public IEnumerable<Product> AllData2 { get; set; }
public ObservableCollection<ProductGrid> GridData { get; set; }
public IEnumerable<ProductGrid> AllData { get; set; }
protected override async Task OnInitializedAsync()
{
await LoadData();
}
private async Task LoadData()
{
AllData2 = new List<Product>{
new Product{
productId = "1",
productName = "product 1",
parts = new List<Part>{
new Part{
partId = "11",
partName = "part 11",
belongToProductId = "1"
},
new Part{
partId = "12",
partName = "part 12",
belongToProductId = "1"
}
}
},
new Product{
productId = "2",
productName = "product 2",
parts = new List<Part>{
new Part{
partId = "21",
partName = "part 21",
belongToProductId = "2"
},
new Part{
partId = "22",
partName = "part 22",
belongToProductId = "2"
}
}
}
};
GridData2 = new ObservableCollection<Product>(AllData2);
var AllData = new List<ProductGrid>();
foreach (var product in AllData2)
{
foreach (var part in product.parts)
{
var productGrid = new ProductGrid
{
productId = product.productId,
productName = product.productName,
partId = part.partId,
partName = part.partName
};
AllData.Add(productGrid);
}
}
GridData = new ObservableCollection<ProductGrid>(AllData);
}
}
If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.
Best regards, Tiny