Menu

Maslosoft Binder Logo Maslosoft Binder Documentation
Knockout JS tracker and binding handlers with coffee and sugar

Edit

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 quited with '

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.

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.

Nodes Description Remove
Remove
Nodes

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>