Kendo 嵌套网格 object

Question

我有带有一些参数和另一个 VM 的视图模型。

视图模型：

public class TestListViewModel
{
    public string Param { get; set; }
    public IEnumerable<TestViewModel> Counts { get; set; }
}

public class TestViewModel
{
    public string Name { get; set; }
    public int Count { get; set; }
}

现在，我按参数对数据进行分组，我想在 Kendo 网格上显示所有数据，如下所示：

@(Html.Kendo().Grid(Model)
    .Name('kendoGrid').
    .Columns(columns => {
        <!-- how can I do it here? -->
        
    }
)

Answer 1

您需要展平数据才能使网格工作：

Models.TestViewModel.cs

public class TestViewModel
{
    public string Param { get; set; }
    public string Name { get; set; }
    public int Count { get; set; }
}

Controllers.TestController.cs

public class TestController
{
    public IActionResult Aggregates()
    {
        IEnumerable<TestViewModel> Models = // FIXME populate your data here
        return View(Models);
    }
}

Views.Test.Aggregates.cshtml

@Model IEnumerable<TestViewModel> // this view displays a collection of flatten models

@(Html.Kendo().Grid(Model)
    .Name('kendoGrid')
    .Columns(columns => {
        columns.Bound(model => model.Name);
        columns.Bound(model => model.Count);
        columns.Bound(model => model.Param)
            .GroupHeaderTemplate(@<text>@item.Title</text>); // this is displayed on top of each group
    })
    .DataSource(dataSource => dataSource
        .Server()
        .Group(groups => groups.Add(model => model.Param)) // tells Grid to group by Param
        .Read(read => read.Action("Aggregates", "Test"))
    )
)

Kendo 嵌套网格 object

Kendo grid with nested object

c#

kendo-ui