How To Use The Data Grid - XMPRO App Designer Toolbox

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 [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

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