Tree Data
Tree Data is feature in beta mode.
In FancyGrid there is way to display nested data.
First you need to define column with type tree
columns: [{
index: 'name',
title: 'Name',
type: 'tree'
},{
...
}]
Next you need nested data with 3 reversed words.
child
- for child elements.
expanded
- to notify that data node is expanded.
leaf
- for leaf nodes.
var data = [{
name: 'North America',
type: 'Territory',
expanded: true,
child: [{
name: 'USA',
type: 'Country',
population: 325365189,
child: [{
type: 'City',
name: 'New York',
population: 8175133,
leaf: true
},{
type: 'City',
name: 'Washington',
population: 681170,
leaf: true
}]
},{
name: 'Canada',
type: 'Country',
population: 35151728,
child: [{
type: 'City',
name: 'Ottawa',
population: 934243,
leaf: true
},{
type: 'City',
name: 'Toronto',
population: 2731571,
leaf: true
}]
},{
name: 'Mexico',
type: 'Country',
population: 123675325,
child: [{
type: 'City',
population: 8918653,
leaf: true,
name: 'Mexico'
}]
}]
},{
...
}];
new Fancygrid({
data: {
items: data,
fields: ['name', 'type', 'population']
},
...,
columns: [{
type: 'tree',
title: 'Name',
width: 200,
index: 'name'
},{
...
For tree data it is recommended to set fields in data if nested childs have more params than parents.
new Fancygrid({
data: {
items: data,
fields: ['name', 'type', 'population']
},
Adding nodes
Special for Tree Data there is method addChild
.
It appends child to node.
If execute this method with one param it append child to top level.
Special tree properties are: expanded, child, leaf
.
grid.addChild({
name: name,
type: type,
expanded: true,
child: []
});
grid.addChild(id, {
name: name,
type: type,
leaf: true
});