剑道树列表上方的额外行

Question

We have a Kendo TreeList that works fine. Data shows, everything shows in the hierarchy correctly. The problem is, we need to group each two columns into another "superset" group.

The column headings (the names above are not real) are too long if not grouped as shown, and they lose useful context.

I tried adding an HTML table above the TreeList, but that doesn't look right. And it doesn't work if the user resizes the columns. Also the toolbar (for Excel export) is in the way, so it doesn't even look like it's part of the TreeList.

I also looked at wrapping the text in the columns, but from what I've seen, that's really iffy too.

It seems like an extra row as shown above (with the ability to merge some columns, like with an HTML table) is the best way to go. Despite scouring the web, I couldn't find a way to do this. Is this even possible with a Kendo TreeList?

Answer 1

This has been solved. Not by me, but by another developer on our team who's insanely good at JavaScript.

The trick is to edit the TreeList's HTML and CSS through JavaScript. You can bind to any event, but we do it on page load:

<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>

That's all there is to it!