Templates 节点中有列的剑道树视图

我想创建一个树状视图，其中列作为节点模板的一部分。从本质上讲，我有一些补充数据，我希望这些补充数据与树视图一起显示，以便数据在初始节点文本之后的列中排列

我使用剑道树视图是因为我需要能够使用树视图提供的拖放功能轻松地重新排序项目。我曾尝试在剑道树视图模板中使用CSS定位，但无论我尝试了什么，节点右侧的列始终相对于节点本身显示

有没有办法创建一个树状视图，将列数据作为正确对齐的节点模板的一部分？使用表格会弄乱treeview，绝对定位似乎也不起作用。我尝试过使用css中的表格布局来实现这一点：

css ---
.layout-container {
    display: table;
}
.layout-row {
    display: table-row;
}
.layout-cell {
    display: table-cell;
    padding-left: 10px;
}

html ----
<div id="treeview" class="layout-container"></div>
<script id="treeview-template" type="text/kendo-ui-template">
    <div class="layout-row">
        <div class="layout-cell">#: item.text #</div>
        <div class="layout-cell">#: item.dept #</div>
        <div class="layout-cell">#: item.owner #</div>
    </div>
 </script>

css---
.布局容器{
显示：表格；
}
.布局行{
显示：表格行；
}
.布局单元{
显示：表格单元格；
左侧填充：10px；
}
html----
#：item.text#
#：项目部#
#：item.owner#

---

以下是我到目前为止掌握的一些知识：

在Telerik的帮助下，我通过使用类似这样的条件模板修复节点中第二列的缩进找到了答案：

Template:
<div class="item-styling item-text">#: item.text #</div>
   # if (item.rowLevel === 2) { #
<div class="item-styling move"> #: item.dept #</div>           
   # } else { #
<div class="item-styling"> #: item.dept #</div>
   # } # 

CSS
.item-styling{
    display: inline-block;
    text-align: left;
    width: 150px;
}
.move{
    margin-left: 17px;
}

模板：
#：item.text#
#如果（item.rowLevel==2）{#
#：item.dept#
#}否则{#
#：项目部#
# } # 
CSS
.项目样式{
显示：内联块；
文本对齐：左对齐；
宽度：150px；
}
.搬家{
左边距：17px；
}

---

解决方案的更新版本如下：

我已经在这里更新了我的示例，其中有一个变通方法：。尽管如此，它看起来像是一个黑客，并没有完全达到我的预期。我仍然愿意接受任何不同的想法。