Menu

Maslosoft Balin Logo Maslosoft Balin Documentation
Knockout binding handlers

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


Nodes Description Misc Remove Debug
Static value Remove

Relevant code used in examples:

<div>
    <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>Description</th>
            <th>Misc</th>
            <th>Remove</th>
            <th>Debug</th>
        </tr>
        </thead>
        <tbody
                data-bind="
                    treegrid: {
                        'data': balin.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"></td>
            <td>Static value</td>
            <td><a href="#" class="remove">Remove</a></td>
            <td class="debug"></td>
        </tr>
        </tbody>
    </table>
</div>
<script type="text/javascript">
    window.onload = (function () {

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

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