有什么方法可以使用 kendo 网格来创建这种类型的网格？

Question

我是 kendo 的新手，我想知道是否可以像下图那样对我的 kendo 网格进行编程。

我在网上看到一些示例，他们使用 kendo-网格分组，但它没有生成我需要的布局

Answer 1

是的，可以使用 column template with a script expression 将子项数组转换为 HTML 列表：

http://dojo.telerik.com/AqezO

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <title>Kendo UI Grid</title>

    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.914/styles/kendo.common.min.css"/>
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.914/styles/kendo.silver.min.css"/>

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2016.3.914/js/kendo.all.min.js"></script>
  </head>
  <body>

    <div id="grid"></div>

    <script>
      var sampleData = [
        { id: 1, name: "name", items: ["foo", "bar"] }
      ];

      $(function () {
        var dataSource = new kendo.data.DataSource({
          data: sampleData,
          schema: {
            model: {
              id: "id",
              fields: {
                id: { type: "number" },
                name: { },
                items: { }
              }
            }
          }
        });

        $("#grid").kendoGrid({
          dataSource: dataSource,
          columns: [
            { field: "id" },
            { field: "name" },
            { field: "items", template: "#= showItems(items) #" }
          ]
        });

      });

      function showItems(arr) {
        return "<ul><li>" + arr.join("</li><li>") + "</li></ul>";
      }

    </script>
  </body>
</html>

有什么方法可以使用 kendo 网格来创建这种类型的网格？

is there any way to create this type of grid by using kendo grid?

kendo-ui

kendo-grid

kendo-ui-grid