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
});