How To Use Tree Grid - XMPRO App Designer

In this video, you’ll learn how to configure a tree grid in the XMPRO App Designer.

Need help with creating your XMPRO apps? Send an email to [e-mail]

Go to https://xmpro.com if you want to learn more about how you can build real-time applications with our Event Intelligence Platform.

Transcript

hi and welcome to another training video

from xm pro

today we will be looking at how to use

the tree grid component

as a prerequisite you should have

already gone through the video on how to

create and use data sources

if not then i recommend doing that first

the tree grip can be found in the basics

section of the box

to configure the tree grid first add a

data source

and then select the parent id column

the parent id column must refer to the

id column of

data source and if the parent id on the

row is null

that means that it doesn't have a parent

if we save this just as it is

and launch then we can see how the

trigger looks

[Music]

as you can see you can drop down on

sections

and for instance samantha bright has

a parent id 1 which is the id of john

hart

and greta sims has the parent id

2 which is samantha bright

if we go back to editing

we can configure the columns so i don't

want to see the

order so i can set that to visible no

and apply it

i don't want to see the parent id so i

can do the same thing

i want the position to be the first row

so i can reorder it there and then save

again

and if i launch then we'll see that

the position is the first row and the

first row

is the one that has the hierarchy in it

it makes much more sense that way

we can also alter the appearance visible

self-explanatory

you can hide or show borders headers

column lines and row lines so if i do

all that

then the grid's not going to have any

lines or headers

and it's just going to look like this

and in the behavior section we can allow

editing so

adding deleting updating and we can

change the edit mode from cell

to batch or row and you can also allow

selection

so if i say cell mode then

you'll be able to edit each cell

individually

if i say batch mode you can edit the

entire grid and there will be a button

in the top right

to save and if i say row mode then you

can edit each row

and when you click off the row it's

going to save it so i'm going to say

batch mode

and you can see there's the button in

the top right as well as

add a new row and undo

so if i click on something i can edit it

and i can undo that or i can say add a

child

to cll

selection doesn't play very well with

editing

sometimes we can click but if you click

on the

text it edits the text instead

if we go back to editing

you can also allow drag and drop and

show drag icons

so allowing drag and drop without show

drag icons will allow you to drag

and drop from anywhere if you sh if you

show the drag icons then it will add

a six dots icon to the left so then you

can only drag it from there

and enable column filtering row

filtering

and adjust column auto adjust column

widths

so column filtering is on each column

that will add

a filter button row filtering is

a search bar and the auto adjust

column widths will adjust the columns to

fit

their contents and column filtering and

row filtering

and require headers to be shown

so now we can see we've got the drag and

drop on the left here

we've got the row filter

and we've got the colon filter

you can use the action on click for

clicking on a row

so you can navigate to specific pages or

urls for more detail go

to the video on how to create pages and

navigate

you can also update data sources here by

clicking on the row

and if you want to know more information

about that go to a specific video

this has been how to use the tree grid

component