CODEWITHSUNDEEP
templateskendo-uitreeview
Trent Ballew
Trent Ballew

Reputation: 31

Kendo treeview with columns in nodes

I'd like to create a treeview with columns as part of the node template. Essentially, I have supplemental data that I want displayed along with the treeview so that the data lines up in columns after the initial node text.

I'm using the Kendo treeview because I need to be able to reorder the items easily using the drag and drop the treeview provides. I've tried using CSS positioning in a Kendo treeview template, but regardless of what I try, the columns to the right of the node are always displayed relative to the node itself.

Any ideas how I can create a treeview that has columnar data as part of the node template that aligns correctly? Using tables messes with the treeview and absolute positioning doesn't seem to work, either. I've tried doing this using table layouts in 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>

Here's a jsFiddle of what I have so far: http://jsfiddle.net/trentballew/oc9qsnyc/.

Upvotes: 0

Views: 4377

Answers (1)

Trent Ballew
Trent Ballew

Reputation: 31

With the help of the Telerik folks, I found the answer by using a conditional template like this to fix the indenting of the second column in the node:

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

The updated fiddle with the solution is here: http://jsfiddle.net/trentballew/oc9qsnyc/6/.

Upvotes: 2

Related Questions