Question

我想创建一个包含列的树视图作为节点模板的一部分。基本上，我有想要与树视图一起显示的补充数据，以便数据在初始节点文本之后的列中排列。

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

我有什么想法可以创建一个树视图，它将列数据作为正确对齐的节点模板的一部分？使用表格混淆树视图和绝对定位似乎也不起作用。我已尝试使用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>

这是迄今为止我所掌握的事情：http://jsfiddle.net/trentballew/oc9qsnyc/。

Answer 1

在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;
}

解决方案的更新小提示在这里：http://jsfiddle.net/trentballew/oc9qsnyc/6/。

Kendo treeview与节点中的列

1 个答案: