Vue Data GridTree Data - Supplying Data

Tree Data can be supplied to the grid in multiple ways.

Picking Your Approach Copy

Tree Data can be provided in two different ways, either as a flat list with each record knowing all its ancestors, or as a nested structure with each record containing an array of its children.

Your requirements should determine which approach is best for your application:

• Use Data Paths when using relational databases or being provided with flat data. The data does not need to be provided to the grid pre-structured. Supports Transaction Updates.

const rowData = [
    { path: ['A'], id: 'A' },
    { path: ['A', 'B'], id: 'B' },
    { path: ['A', 'C'], id: 'C' },
]

In the above hierarchy, the 'A' row is the parent of 'B' and 'C'.

• Use Nested Records if your data is already in a structured hierarchy, for example, when using object databases. Does NOT support Transaction Updates.

const rowData = [
    {
        id: 'A',
        children: [
            { id: 'B' },
            { id: 'C' },
        ]
    }
]

In the above hierarchy, the 'A' row is the parent of 'B' and 'C'.

• Use Self Referential Records if your data is flat and has a parent id field, for example if it comes from a relational database table. Supports Transaction Updates.

const rowData = [
    { id: 'A' },
    { id: 'B', parentId: 'A' },
    { id: 'C', parentId: 'A' },
]

In the above hierarchy, the 'A' row is the parent of 'B' and 'C'.

Next Up Copy

Continue to the next section to learn about supplying Data Paths.