TreeGrid

The treegrid is used to show hierarchical data in grid.
It is based on datagrid and combines treeview and editable grid.
The treegrid allows you to create customizable, async expandable rows and show hierarchical data in muliple columns.

Dependencies

datagrid

Usage Example

Create treegrid in HTML markup.
For the most part, the treegrid follows the same structure and formatting as datagrid.

Create treegrid using javascript.

Properties

The properties extend from datagrid, below is the added properties for treegrid.

Name

Type

Description

Default

idField

string

Defines the key field to identify a tree node. required.

null

treeField

string

Defines the tree node field. required.

null

animate

boolean

Defines if to show animation effect when node expand or collapse.

false

lines

boolean

Defines if to show the treegrid lines.

false

loader

function(param,success,error)

Defines how to load data from remote server. Return false can abort this action.
This function takes following parameters:
param: the parameter object to pass to remote server.
success(data): the callback function that will be called when retrieve data successfully.
error(): the callback function that will be called when failed to retrieve data.

json loader

loadFilter

function(data,parentId)

Return the filtered data to display.

Events

The events extend from datagrid, below is the added events for treegrid.

Name

Parameters

Description

onClickRow

row

Fires when user click a node.

onDblClickRow

row

Fires when user dblclick a node.

onClickCell

field,row

Fires when user click a cell.

onDblClickCell

field,row

Fires when user dblclick a cell.

onBeforeLoad

row, param

Fires before a request is made to load data, return false to cancel this load action.

onLoadSuccess

row, data

Fires when data loaded successfully.

onLoadError

arguments

Fires when data loaded fail, the arguments parameter is same as the 'error' function of jQuery.ajax.

onBeforeExpand

row

Fires before node is expanded, return false to cancel this expand action.

onExpand

row

Fires when node is expanded.

onBeforeCollapse

row

Fires before node is collapsed, return false to cancel this collapse action.

onCollapse

row

Fires when node is collapsed.

onContextMenu

e, row

Fires when node is right clicked.

onBeforeEdit

row

Fires when user start editing a node.

onAfterEdit

row,changes

Fires when user finish editing.

onCancelEdit

row

Fires when user cancel editing a node.

Methods

Many methods take a parameter named 'id', this parameter indicate the tree node value.

Name

Parameter

Description

options

none

Return the options of treegrid.

resize

options

Set treegrid size, the options contains two properties:
width: the new width of treegrid.
height: the new height of treegrid.

Insert a new node to specified node. The 'param' parameter contains following properties:
before: the id value of node to insert before.
after: the id value of node to insert after.
data: the new node data.
Available since version 1.3.1.

Get the specified row editors. Each editor has the following properties:
actions: the actions that the editor can do.
target: the target editor jQuery object.
field: the field name.
type: the editor type.

getEditor

param

Get the specified editor, the param contains two properties:
id: the row node id.
field: the field name.