vdl-treegrid
The VDL Tree grid component is a VDL Extension that provides an interface for users to visualize nested data in table format. The data must be structured in a certain way in order to build a table with nested data. To have child rows, it is necessary to provide an array of child data objects to the rows with the "_children" property. However, this property can be configured by using the children-field attribute. Tree grid table requires data to be passed via the data attribute.
Example
<script>
const nestedData = [
{id:1, name:"Grandparent", prop1:"60",
"_children":[
{id:2, name:"Parent one", prop1:"45"}, //child rows nested under Grandparent
{id:3, name:"Parent two", prop1:"42"},
{id:4, name:"Parent three", prop1:"40",
"_children":[
{id:5, name:"Child one", prop1:"16"}, //child rows nested under Parent three
{id:6, name:"Child two", prop1:"12"},
]},
]},
{id:7, name:"Parent one", prop1:"45"},
{id:8, name:"Parent two", prop1:"42",
"_children":[
{id:9, name:"Child one", prop1:"10"}, //child row nested under Parent two
]},
{id:10, name:"Parent three", prop1:"40"}
]
</script>
<vdl-treegrid
column-definition="auto"
data="=nestedData">
</vdl-treegrid>Attributes
| always-show-selection | Whether to display selection on inactive grids. Set to true to keep selection on a grid when it becomes inactive. | since 5.2 | ||
|---|---|---|---|---|
| children-field | Default behavior of vdl-treegrid is to display nested data based on the _children property in the hierarchical source data, however this behavior may be overridden by passing different values to the property. | since 5.2 | accepts expression | |
| class | Space-separated list of the classes of the element. | since 5.2 | ||
| column-definition | Specify how columns are defined, allowed values: "auto" or an object defining column properties [{field:"key", title="Key"}...]."auto" (default) will generate columns from the data. When using column properties, you should supply aa column definition object for each column you require and each object must have a property named 'field'. The value of the field property must reference a property on the data. For example: column-definition="=[{field:"name", title:"Full Name", field:"tel", title:"Phone Number"}] data="=[{name="John Doe", tel:"1234"}...]".Other recommended properties: title, width, cssClass (space separated class names), headerSortStartingDir (asc/desc), This attribute can not be set when "data" attribute is being used. |
since 5.2 | accepts expression | |
| column-filter | Set this to true to enable the column filters. This will show a header row with filter inputs for each column. | since 5.2 | ||
| data | Use this attribute to pass data directly to vdl-treegrid. Supported formats is; Array of objects: [{... prop: 1}]. |
since 5.2 | requires expression | |
| freeze-columns | The number of columns to freeze in the table starting from the left hand column. Works best when vdl-treegrid is in a fixed width container. | since 5.2 | ||
| height | Grid height, When page-mode is set to scrolling you can set the height of the grid to something other than the default. | since 5.2 | ||
| id | Specify an element id for the grid. Useful if you later want to target the grid using a selector. If not given then an id will be generated. | since 5.2 | ||
| page-mode | By default the grid will show all rows in scrolling mode. Set this attribute to paged to enable grid pagination. | since 5.2 | ||
| page-size | The number of rows to show per-page in paged mode. | since 5.2 | ||
| save-state | Set this to false to disable grid state saving. By default grid state is stored in the user's browser session so that user settings (e.g. page, sorting and search) are preserved if grid data is reloaded. | since 5.2 | ||
| start-expanded | By default all nodes on the tree will start collapsed, you can customize the initial expansion state of the tree using this attribute | since 5.2 | accepts expression | |
| width | Set the grid to a fixed width, in pixels. Accepts an integer value. If set to the string custom then the grid width is calculated by adding up all the widths of the columns in the grid. If a column doesn't have a width specified then it is given a default value of 100px. | since 5.2 |
© 2001-2023 Fair Isaac Corporation. All rights reserved. This documentation is the property of Fair Isaac Corporation (“FICO”). Receipt or possession of this documentation does not convey rights to disclose, reproduce, make derivative works, use, or allow others to use it except solely for internal evaluation purposes to determine whether to purchase a license to the software described in this documentation, or as otherwise set forth in a written software license agreement between you and FICO (or a FICO affiliate). Use of this documentation and the software described in it must conform strictly to the foregoing permitted uses, and no other use is permitted.