MVC Kendo 两个主题

Question

在 MVC Kendo 中，我可以有两个 thead 行吗？第一个将跨越第二行中的三个 tds。以下是我要做什么的示例？该模型正在返回 theadViewModel 的列表。使用模型数据看起来像这样？

               Name     
Columns1    Columns2    Columns3
ColumnsData ColumnsData ColumnsData

型号

public class theadViewModel
    {
        public string Name { get; set; }
        public int Id { get; set; }
        public List<DataViewModel> DataViewModel { get; set; }
    }

 public class DataViewModel
{
    public string Columns1 { get; set; }
    public string Columns2 { get; set; }
    public string Columns3 { get; set; }
}

查看

 @(Html.Kendo().Grid(Model)
         .Name("Grid")

         .Columns(columns =>
          {
          columns.Bound(p => p.Name);
         })
         .Pageable()
         .Sortable()
         .Scrollable()
         .Filterable()
         .Groupable()
        )

Answer 1

Kendo 网格允许 multi-column headers。您可以找到文档 here.

这是一个例子：

@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.CustomerViewModel>()
    .Name("grid")
    .Columns(columns =>
    {
        columns.Group(group => group
            .Title("Contact Info")
            .Columns(info => { 
                info.Bound(x => x.ContactTitle).Width(200);
                info.Bound(x => x.ContactName).Width(200);
            })
        );
    })
    .ColumnMenu()
    .Resizable(resizable => resizable.Columns(true))
    .Reorderable(reorderable => reorderable.Columns(true))
    .HtmlAttributes(new { style = "height: 550px;" })
    .Scrollable()
    .Groupable()
    .Sortable()
    .Pageable()
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(20)
        .Read(read => read.Action("MultiColumn_Customers_Read", "Grid"))
    )
)

MVC Kendo 两个主题

MVC Kendo two thead

kendo-ui

kendo-grid

kendo-asp.net-mvc