Maslosoft Binder Documentation
Knockout JS tracker and binding handlers with coffee and sugar
Feeding Tree Grid with array data
Tree Grid can be fed with array data too. This might be convenient in some cases.
| 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"/></th>
<th>Nodes</th>
<th>Description</th>
<th>Misc</th>
<th>Remove</th>
<th>Debug</th>
</tr>
</thead>
<tbody
data-bind="
treegrid: {
'data': binder.model.nodes,
childrenField: 'children',
nodeIcon: '../../images/pdf.png',
folderIcon: '../../images/zip.png',
autoExpand: true,
dnd: true,
activeClass: 'active success'
}">
<tr>
<td><input type="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 () {
var nodeId = 0;
window.addNode = function (data, e) {
nodeId++;
var model = new Maslosoft.Koe.TreeItem;
model.title = 'New node #' + nodeId;
model.description = 'Description #' + nodeId;
binder.model.nodes.push(model);
if (e) {
e.stopPropagation();
e.preventDefault();
}
};
window.addSubNode = function (data, e) {
nodeId++;
var model = new Maslosoft.Koe.TreeItem;
model.title = 'New sub-node #' + nodeId;
model.description = 'Description sub-node #' + nodeId;
binder.model.nodes[0].children.push(model);
if (e) {
e.stopPropagation();
e.preventDefault();
}
};
window.addSubSubNode = function (data, e) {
nodeId++;
var model = new Maslosoft.Koe.TreeItem;
model.title = 'New sub-sub-node #' + nodeId;
model.description = 'Description sub-sub-node #' + nodeId;
binder.model.nodes[0].children[0].children.push(model);
if (e) {
e.stopPropagation();
e.preventDefault();
}
};
window.addSubSubNodeLast = function (data, e) {
nodeId++;
var model = new Maslosoft.Koe.TreeItem;
model.title = 'New sub-sub-node #' + nodeId;
model.description = 'Description sub-sub-node #' + nodeId;
var idx = 0;
if (binder.model.nodes[0].children.length) {
idx = binder.model.nodes[0].children.length - 1;
}
binder.model.nodes[0].children[idx].children.push(model);
if (e) {
e.stopPropagation();
e.preventDefault();
}
};
window.remSubSubNode = function (data, e) {
nodeId++;
var model = new Maslosoft.Koe.TreeItem;
model.title = 'New sub-sub-node #' + nodeId;
model.description = 'Description sub-sub-node #' + nodeId;
binder.model.nodes[0].children[0].children = [];
if (e) {
e.stopPropagation();
e.preventDefault();
}
};
// var deferAdd = function () {
// window.addNode();
// window.addSubNode();
// window.addSubNode();
// window.addSubSubNodeLast();
// window.addSubSubNodeLast();
// window.addSubSubNodeLast();
// window.addSubNode();
// window.addSubSubNodeLast();
// window.addSubSubNodeLast();
// window.addSubNode();
// window.addSubSubNodeLast();
// window.addSubSubNodeLast();
// window.addSubSubNodeLast();
// window.addSubSubNodeLast();
// };
// setTimeout(deferAdd, 100);
var grid = jQuery('#gridView');
var gm = new Maslosoft.Binder.Widgets.TreeGrid.TreeGridView(grid.find('tbody'));
grid.on('click', '.remove', function (e) {
e.stopPropagation();
e.preventDefault();
var model = ko.dataFor(this);
console.log(model.title);
gm.remove(model);
});
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"
}
]
}
]
};
var tree = new Maslosoft.Koe.TreeItem(data);
binder.model.nodes = tree.children;
ko.applyBindings({model: binder.model}, document.getElementById('ko-binder'));
});
</script>