Kendo 树列表顶部的额外行

Question

我们有一个 Kendo TreeList 可以正常工作。数据显示，一切都正确显示在层次结构中。问题是，我们需要将每两列分组到另一个 "superset" 组。

列标题（上面的名称不是真实的）如果未按所示分组则太长，并且会失去有用的上下文。

我尝试在 TreeList 上方添加 HTML table，但这看起来不对。如果用户调整列的大小，它就不起作用。工具栏（用于 Excel 导出）也挡住了路，所以它看起来甚至不像是 TreeList 的一部分。

我也考虑过将文本换行到列中，但据我所知，这也很不靠谱。

看起来像上面显示的额外行（能够合并一些列，比如 HTML table）是最好的方法。尽管搜索了网络，但我找不到执行此操作的方法。 Kendo TreeList 甚至可以做到这一点吗？

Answer 1

已解决。不是我，而是我们团队中另一位非常擅长 JavaScript.

的开发人员

诀窍是通过 JavaScript 编辑 TreeList 的 HTML 和 CSS。您可以绑定到任何事件，但我们会在页面加载时绑定：

<script>
$(document).ready(function () {
    // anything in here will get executed when the page is loaded
    addTopRowToTreeList();
});

function addTopRowToTreeList() {

    // grab the thead section
    // your HTML may be different
    var foo = $('#MyTreeList').children('div.k-grid-header').children('div.k-grid-header-wrap');
    var tableChild = foo.children('table');
    var headChild = tableChild.children('thead');

    var bottomRow = headChild.children('tr');
    var topRow = $('<tr>').attr('role', 'row');

    // bottom cell should draw a border on the left
    bottomRow.children('th').eq(0).addClass('k-first');

    // add blank cell 
    var myNewCell = $('<th>').addClass('k-header').attr('colspan', '1')
    var headerString = '';
    var headerText = $('<span>').addClass('k-link').text(headerString);
    myNewCell.append(headerText);
    topRow.append(myNewCell);

    // ... add remaining cells, like above

    headChild.prepend(topRow);
}
</script>

仅此而已！

Kendo 树列表顶部的额外行

Extra row atop Kendo Treelist

kendo-ui

kendo-treeview

kendo-asp.net-mvc