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
