Tree Grid

The following example shows how to make a tree out of grid control.

Name	Phone	City	Notified
Melba Ritchie	542-558-5600	New Bernadetteton	Yes
Cassandre Ryan	897-658-6317	Lake Ophelia	No
Corine Glover	111-012-2282	Effieview	Yes
Erika Nader	323-579-9802	Port Emily	No
Quinn Treutel	132-686-8774	North Shyann	No
Muriel Bosco	876-607-0973	South Gayleport	Yes
Sydnie Muller	743-445-1933	East Ferne	No
Joe Schneider	079-749-2956	Pagacfort	No
Concepcion Collier	430-923-8493	West Conner	No
Adelia Lehner	023-017-4854	Lake Paytonfurt	No
Walker Swaniawski	679-019-4774	West Ronaldo	Yes
Chris Cassin	793-831-8717	Lake Norwood	Yes
Patsy Altenwerth	993-857-6200	Lake Lexus	Yes
Beulah Pfeffer	100-470-4326	South Alan	Yes
Isobel Yundt	391-496-4282	New Marcelleberg	Yes
Elda Kohler	422-683-1611	Lake Yolanda	Yes
Eugenia Simonis	224-997-9712	West Esthershire	No
Martina Goodwin	750-090-6729	Horaceshire	No
Alia Blanda	592-949-8440	South Joelleville	Yes
Alana Wisozk	703-894-8540	West Jessiehaven	No

Controller Grid

<Grid
    buffered
    records-bind='$page.data'
    mod="tree"
    style={{width: "100%", height: '500px'}}
    scrollable={true}
    dataAdapter={{
        type: TreeAdapter,
        load: (context, {controller}, node) => controller.generateRecords(node)
    }}
    selection={{type: KeySelection, bind: "$page.selection"}}
    columns={[
        {
            header: 'Name', field: 'fullName', sortable: true, items: <cx>
            <TreeNode expanded-bind="$record.$expanded"
                leaf-bind="$record.$leaf"
                level-bind="$record.$level"
                loading-bind="$record.$loading"
                text-bind="$record.fullName"
                icon-bind="$record.icon"
            />
        </cx>
        },
        {header: 'Phone', field: 'phone'},
        {header: 'City', field: 'city', sortable: true},
        {
            header: 'Notified',
            field: 'notified',
            sortable: true,
            value: {expr: '{$record.notified} ? "Yes" : "No"'}
        }
    ]}
/>

Copied!Cx Fiddle

Searching Tree Grids

Check out this example to find out how to implement search functionality in a Tree Grid.

`TreeNode` Configuration

Property	Description	Type
expanded	A value indicating if tree node is expanded or not.	boolean
icon	An icon to be displayed. If not set, default icons will be used.	string
leaf	A value indicating if tree node is a leaf node or not. Leaf nodes cannot have any children.	boolean
level	A value indicating the depth level inside the tree used for indenting.	number
loading	A value indicating if tree node is currently loading its children.	boolean
text	Text to be displayed alongside the icon.	string
autoFocus	Set to `true` to automatically focus the element when mounted.	boolean
baseClass	Base CSS class to be applied to the element. Default is 'treenode'.	string
class className	Additional CSS classes to be applied to the element. If an object is provided, all keys with a "truthy" value will be added to the CSS class list.	string/object
folderIcon	Icon to be used to represent folders. Default is `folder`.	string
hideArrow	A value indicating if arrow should be displayed or not. Can be used to hide arrow for folders with no children.	boolean
hideIcon	Set to `true` to hide icons.	boolean
innerHtml html	HTML to be injected into the element.	string
itemIcon leafIcon	Icon to represent leaf nodes. Default is `file`.	string
items children	List of child elements.	array
layout	Define an inner layout.	string/object
loadingIcon	Icon to be used while in loading state. Default is `loading`.	string
mod	Appearance modifier. For example, `mod="big"` will add the CSS class `.cxm-big` to the block element.	string/array
openFolderIcon	Icon to be used to represent open folders. Default is `folder-open`.	string
outerLayout	Defines the outer layout which wraps the widget.	widget
plainText	Set to `true` to avoid converting inner strings to templates. Default is `false`.	boolean
preserveWhitespace ws	Keep whitespace in text based children. Default is `false`. See also `trimWhitespace`.	boolean
putInto contentFor	Used with outer layouts. Specifies the name of the content placeholder which should render the widget.	string
style	Style object applied to the wrapper div. Used for setting the dimensions of the element.	string/object
tag	Name of the HTML element to be rendered. Default is `div`.	string
tooltip	Tooltip configuration. For more info see Tooltips.	string/object
trimWhitespace	Remove all whitespace in text based children. Default is `true`. See also `preserveWhitespace`.	boolean
vdomKey	Key that will be used as the key when rendering the React component.	string
visible if	Visibility of the widget. Defaults to `true`.	boolean

Documentation

Tree Grid