如何在KendoTreeList实现kendoTreeViewCheckable功能或在Kendo Grid内嵌KendoTreeView？

一、现成配置实现复选框功能 #

KendoTreeList本身自带复选框支持，不需要依赖TreeView的kendoTreeViewCheckable。你可以通过以下方式快速配置：

• 在columns数组中添加设置checkbox: true的列，直接开启复选框
• 搭配checkChildren属性实现父子节点的级联选择（勾选父节点自动勾选子节点，反选父节点也会自动取消子节点勾选）

示例代码：

$("#treeList").kendoTreeList({
  columns: [
    { field: "name" },
    { field: "position" },
    { checkbox: true, width: 50 } // 启用复选框列
  ],
  dataSource: {
    data: [
      { id: 1, parentId: null, name: "Root", position: "Manager" },
      { id: 2, parentId: 1, name: "Child 1", position: "Developer" },
      { id: 3, parentId: 1, name: "Child 2", position: "Designer" }
    ],
    schema: {
      model: {
        id: "id",
        parentId: "parentId",
        checkChildren: true // 开启级联选择
      }
    }
  }
});

二、在TreeList中嵌入KendoTreeView的实现 #

如果需要在TreeList的单元格内嵌入完整的TreeView组件，可通过列的template属性结合dataBound事件实现：

1. 定义列模板，预留TreeView的渲染容器
2. 在dataBound事件中遍历数据行，初始化对应单元格内的TreeView并启用复选框

示例代码：

$("#treeList").kendoTreeList({
  columns: [
    { field: "name" },
    { 
      field: "subItems",
      title: "子节点列表",
      template: '<div class="embedded-treeview" data-id="#= id #"></div>' // 模板容器
    }
  ],
  dataSource: {
    data: [
      { id: 1, parentId: null, name: "Root", subItems: [{ text: "Sub 1" }, { text: "Sub 2" }] },
      { id: 2, parentId: 1, name: "Child", subItems: [{ text: "Sub 3" }] }
    ],
    schema: {
      model: { id: "id", parentId: "parentId" }
    }
  },
  dataBound: function() {
    // 遍历所有行，初始化嵌入的TreeView
    this.tbody.find(".embedded-treeview").each(function() {
      var $container = $(this);
      var dataItem = $("#treeList").data("kendoTreeList").dataItem($container.closest("tr"));
      
      $container.kendoTreeView({
        checkable: true, // 启用TreeView的复选框功能
        dataSource: dataItem.subItems
      });
    });
  }
});

附上效果参考图：

内容的提问来源于stack exchange，提问作者Sathasivam