How To Use The Data Grid Xmpro App Designer Toolbox
Last updated
Last updated
In this video, you’ll learn how to configure a data grid in the XMPRO App Designer.
Need help with creating your XMPRO apps? Send an email to support@xmpro.com
Go to https://xmpro.com if you want to learn more about how you can build real-time applications with our Event Intelligence Platform.
welcome to another friend gave you from
accent probe today we will be looking at
data grid and how to use it an app
designer so I have a page here as you
can see is blank but I want to display
some data from my data source in a grid
format what I can do is I can search for
the grid control it's called data grid
and I can drag it across now data grid
as you know displays your data in in
rows and cells format it also allows you
to for example sort filter or add some
paging options to the data and we will
look at all of them just now but the
first thing I need to do is as you can
see my data grid I just dragged it but
it Sam it needs some data so I need to
bind it to a datasource and as explained
in another video on how to use data
sources I've already created a data
source which I'm now going to bind to my
data grid like that now if I save it
without making any other change I just
refresh this page the runtime view of
this page you will see I have a data
grid and it is loading up all the data
from my data source now let's see well
what other options we have over here so
if I open to the appearance section I
have options to control if the grid
should have an out outer border let's
say I don't want it
I have option to choose if the header
should be visible or not I have option
to choose if the column lines should be
visible or not and I'm going to remove
them its these lines and in their row
lines which you can see going across
over here and lastly pin codes will be
visible at all or not so those are my
appearance options now quickly show you
the the changes we made
as you can see the or the the outer
border is gone and the column lines are
gone so let's go ahead and see what else
we can do in behavior we have a couple
of options starting with the crud
operation basically should the user be
allowed to add delete or update the data
in the grid if the connector you are
using supports it you can choose these
and if you say the user should be
allowed to update you are then going to
be asked for words what a dip mode you
want to use there are three options bad
cell and row basically if you choose
cell each cell is editable at a time if
you choose row the whole row is editable
at a time and in batch you can change
multiple rows and then save in one go so
I'll keep it as self next I have options
for column filtering or rofl drink I'll
enable those and you'll be able to see
what they look like
I'm gonna save now and our refreshment
we're here to see what changes I made
you can see now there there is an option
to delete a row there is also an option
to change or update a value when I click
on a cell because I chose settle mode I
have to click on a cell and then it
becomes a little bow I also have
filtering options like if I only wanna
see a certain value right next we we
also have options for paging if I choose
I want to page I'll have to give a page
size but if I say I only want to see
five records at a time I can do that
by saving that and then refreshing over
here it will then display me pages which
I can use to navigate through my data
lastly there are options if you want to
use a grouping and there's also an
advanced option to choose if you want to
have your columns automatically assigned
a certain width based on their content
now let's move on from behavior and into
the column section at the end this
section basically displays a list of
columns that are being sent to you from
your data source and you can choose a
certain column I will maximize my screen
for that you can choose a certain column
and then you have certain you have a few
options per column like should the
column be visible or not what should be
the caption for that column that is a
friendly name that should appear in the
header you can also choose the value of
that column should be left or right
aligned for same center-aligned and
lastly you have an width option where
you can specify a number to say that the
width of that column should not be
auto-generated that be fixed to that to
the number you provide having configured
your columns one last option you have
here is if you want to move or change
the order in which these columns appear
in your grid you can do so by using
these arrows and moving a column up or
down and the order in which they appear
in your grid will also change so this
was how to use data grid control thank
you for watching