You can enable the subgrids support for your grid. Subgrids allows to view records for those tables that have a 1 to N relationship with the parent table of the main grid.
We asume that you already configured the parent grid and it's working as expected as described in the Quick start section.
We have to add the subgrid column definition on code section of the same razor page we used to render the main grid. It must be an static object:
@code
{
...
public static Action<IGridColumnCollection<OrderDetail>> OrderDetailColumns = c =>
{
c.Add(o => o.OrderID);
c.Add(o => o.ProductID);
c.Add(o => o.Product.ProductName);
c.Add(o => o.Quantity).Format("{0:F}");
c.Add(o => o.UnitPrice).Format("{0:F}");
};
...
}We have to add the following element on OnParametersSetAsync method of the same razor page we used to render the main grid:
protected override async Task OnParametersSetAsync()
{
...
Func<object[], Task<ICGrid>> subGrids = async keys =>
{
string subGridUrl = NavigationManager.GetBaseUri() + "api/SampleData/GetOrderDetailsGrid?OrderId=" + keys[0];
var subGridQuery = new QueryDictionary<StringValues>();
var subGridClient = new GridClient<OrderDetail>(httpClient, subGridUrl, subGridQuery, false,
"orderDetailsGrid" + keys[0].ToString(), OrderDetailColumns, locale)
.SetRowCssClasses(item => item.Quantity > 10 ? "success" : string.Empty)
.Sortable()
.Filterable()
.WithMultipleFilters()
.WithGridItemsCount();
await subGridClient.UpdateGrid();
return subGridClient.Grid;
};
}The new element is a function to create the subgrids. The parameter keys must be an array of objects that the function will use to create the required url for the back-end web service. It's important to declare all variables needed by the contructor of the GridClient object inside the function block to avoid sharing parameters among subgrids.
Then we have to modify the GridClient we used to create the main grid adding a SubGrid method:
protected override async Task OnParametersSetAsync()
{
...
var client = new GridClient<Order>(httpClient, url, query, false, "ordersGrid", OrderColumns, locale)
.SetRowCssClasses(item => item.Customer.IsVip ? "success" : string.Empty)
.Sortable()
.Filterable()
.WithMultipleFilters()
.Searchable(true, false)
.WithGridItemsCount()
.SubGrid(subGrids, "OrderID");
}| Parameter | Type | Description |
|---|---|---|
| subGrids | Func<object[], Task> | function that creates subgrids defined in the step before |
| keys | params string[] | variable number of strings with the names of required columns to find records for the subgrid |
Finally we have to add an action to the back-end controller to get rows for subgrids. An example of this type of action is:
[Route("api/[controller]")]
public class SampleDataController : Controller
{
...
[HttpGet("[action]")]
public ActionResult GetOrderDetailsGrid(int OrderId)
{
var orderDetails = (new OrderDetailsRepository(_context)).GetForOrder(OrderId);
var server = new GridServer<OrderDetail>(orderDetails, Request.Query,
false, "orderDetailsGrid" + OrderId.ToString(), GridSample.OrderDetailColumns)
.WithPaging(10)
.Sortable()
.Filterable()
.WithMultipleFilters();
var items = server.ItemsToDisplay;
return Ok(items);
}
}This action is very similar to the one we used for the main grid. The only difference is that this one has parameters to get the subgrid rows. It can be only one parameter or more depending on your database model. In our example it is only one element for the OrderId field. We use it to get the subgrid rows calling the GetForOrder method from the repository.
Note that the grid name parameter we use must be unique for each subgrid. In this example we use the name "orderDetailsGrid" + OrderId.ToString().
<- Render button, checkbox, etc. in a grid cell | Passing grid state as parameter ->