Tree Grid

Tree Grid is a complex component, featuring HTMl table as it's base. But it uses one of table columns to display nested structure along with folding controls. The result is a tree like display, but with optional properties. Tree Grid also supports Drag and Drop of nodes to arrange them as You like.

When using multi-line binding definition the data property must be quoted with single quote (')

Setting up Tree Grid is no different than configuring table to be fed with foreach binding. Each column can have it's own rendering logic. The difference is that treegrid binding must be used instead of said foreach.

Property data of binding can be either model containing nested structure or array of node models

This example uses model with children property initialization, for array initialization check feeding with array example.

It is recommended to place treegrid binding on tbody tag, so that table headers can be added too. To display nested structure with folding controls, add span with treegridnode binding to chosen column. It does not have to be first one, any will do.

Extra options

The treegrid binding has also extra configurable parameters:

• childrenField - field containing child elements in each node
• nodeIcon - path to file which will be used as node icon
• autoExpand - boolean value, will automatically open all nodes
• dnd - boolean value, enable Drag'n'Drop support
• activeClass - string value, CSS classes that will be added to activated node
• expanderIcon - string value, HTML element template for expander. By default it is using glyphicon . There is only one type of icon for expander, as it is simply rotated. The icon should be some kind of triangle pointing down.

This design approach gives great freedom of arranging Tree Grid. It looks like it require a lot of HTML markup, but it is old plain table with extra data-bind attributes.

Live example

Items can be dragged and dropped between trees too. Trees are protected against recursive loop.

Relevant code used in examples:

<table id="gridView" style="font-size: 18px;" class="table table-condensed">
    <thead>
    <tr>
        <th style="width:.1%;"><input type="checkbox" id="selectAll"/></th>
        <th>Nodes</th>
        <th class="description">Description</th>
        <th class="hidden-xs">Misc</th>
        <th>Remove</th>
    </tr>
    </thead>
    <tbody
            data-bind="
                treegrid: {­
                    'data': binder.model.Tree,
                    childrenField: 'children',
                    nodeIcon: '../images/pdf.png',
                    folderIcon: '../images/zip.png',
                    autoExpand: true,
                    dnd: true,
                    activeClass: 'active success'
                    ­}
            "
    >
    <tr>
        <td><input type="checkbox" class="tree-grid-checkbox"/></td>
        <td>
            <span data-bind="treegridnode: $data"></span>
            <span data-bind="html: title"></span>
        </td>
        <td data-bind="html: description" class="description"></td>
        <td class="hidden-xs">Text</td>
        <td><a href="#" class="remove">Remove</a></td>
    </tr>
    </tbody>
</table>
<script type="text/javascript">
    window.onload = (function () {­

        data = {­
            _class: 'Maslosoft.Koe.TreeItem',
            title: "Some container",
            children: [
                {­
                    _class: 'Maslosoft.Koe.TreeItem',
                    title: "Zero",
                    description: "This can be also rendered via custom renderer"
                ­},
                {­
                    _class: 'Maslosoft.Koe.TreeItem',
                    title: "One",
                    description: "Another one with description",
                    children: [
                        {­
                            _class: 'Maslosoft.Koe.TreeItem',
                            title: "Two",
                            description: "Hover for node tooltip - also added by node renderer"
                        ­},
                        {­
                            _class: 'Maslosoft.Koe.TreeItem',
                            title: "Three",
                            children: [
                                {­
                                    _class: 'Maslosoft.Koe.TreeItem',
                                    title: "Three-Two"
                                ­},
                                {­
                                    _class: 'Maslosoft.Koe.TreeItem',
                                    title: "Three-Three"
                                ­}
                            ]

                        ­},
                        {­
                            _class: 'Maslosoft.Koe.TreeItem',
                            title: "Four"
                        ­}
                    ]
                ­}
            ]
        ­};
        binder.model.Tree = new Maslosoft.Koe.TreeItem(data);
        binder.model.Tree2 = new Maslosoft.Koe.TreeItem(data);
        ko.applyBindings({­model: binder.model­}, document.getElementById('ko-binder'));
    ­});
</script>