In this video you're going to learn how to create a full feature Data Grid
in about one minute first we're going to look at how to bind data to the Data Grid.
In a previous video you learned how to add a Rest API to the App Builder from a cloud service, you
should review that before you start this tutorial, then we'll take a look at the Feature Chooser in
the Grid … this allows you to select features in the grid with a simple point and click. Then
we'll review the output and finally we'll take a look at the source code that gets generated when
you build anything in the App Builder IDE. Let's get started. I have the “Create New Application”
dialog opened and I’m going to go ahead and create a Blank Layout so we'll use that layout
by default. I just get a Master View with nothing inside of the view. The first step we'll do is
review that we do have our financial data from the previous video, and you'll see that all 45 fields
are there and this is 2500 records. Now let's go to the Toolbox and let's find our Data Grid,
drag it onto the form, and let's set this to one hundred percent width and one hundred
percent height. Next we'll go down to the grid properties we'll select financial data fin table
and we'll set the primary key to id now I have all of the data from my rest data source in the
Data Grid so the data binding takes a second next we'll go down to the Feature Chooser which you'll
see here is in the lower right hand side of the Property Editor … I’m going to click the “+” sign
and you'll see all of the options that I have for features on the Angular data grid. I’m going to go
ahead and just select all of them … Summaries, Resizing, Pinning, Moving Hiding, Grouping,
Cell Editing, Row Selection, Row Editing, Row Actions, Toolbar and let's do Advanced Filtering
as well. You'll notice as I selected items the Chips showed up underneath in the Feature Panel,
and then the grid was activated with those features so everything's happening in real time
here. The other thing to notice is that on some of the Chips you have a hyperlink, so the hyperlink
allows you to set properties on the grid based on the feature that is chosen, so this is the Pin
Columns so for example if I wanted to pin Country I could select Country field and then by default
it gets pinned. I can do that with the Toolbar and Edit Options on the Toolbar as well the idea is to
just make it easy for you to configure the grid as much as possible and then when you generate
the code all of that is generated with the code itself so now that the grid has all of these
options configured and it kind of looks good all we need to do is go ahead and click Preview
and now we're in the Live Previewer. You can see that all of my data is in the grid
I have all of my summaries as I hover over grid rows you'll see that the action strip
is showing so for example we have pin columns on the left country was pinned
but let's go ahead and pin a couple rows so now I’ve pinned some rows so now I have pinned
groups I can do grouping outlook group by so let's go ahead and do an outlook group by I can collapse
and expand all of these groups I can unpin my rows if I’d like the other thing you get in the
Column Options kebab is a drop down with features like Column Pinning, Grouping, Sorting, Column
Moving, and then of course Filtering so if I unselect select all and let's just so show Europe
and south America we'll click apply and now the grid is filtered with just
Europe and south America so now if I group by region and let's move region to the front
and we'll collapse it you can see here I’ve got 409 and 421. I’ll kill these groups and
let's go back you'll see this is highlighted which means there's something set I’m going to go ahead
and select all and click apply the other features that are available here you can see Column Moving
is enabled and Sorting so I can sort by clicking on the sort indicator and you'll notice that the
Multi-Column Sorting is happening like so I can also use the Toolbar options so we have
Pin Columns here for country I can pin Category and Contract and they will stay to the left,
Column Hiding same thing, we can hide various columns and show columns. Now let's take a look
at what the code looks like. I can click over here to Code View and you'll see that I have the flyout
on the right hand side Angular is my framework that I’ve chosen for this particular grid
but you can see all the column definitions are here. Here's the grid definition with all of the
properties that are set based on what I chose in the Feature Chooser for the grid so with a simple
point and click all of this code gets generated, all of the service data gets generated so when
you merge this code with GitHub or if you download a zip file of the entire project you'll have all
of the code which is accessing the data source in the cloud, so it's much more than just this
it is everything needed to run this application. With that, in less than a minute, you configure
the grid and can deliver to your users a complete experience with the App Builder in a few clicks.
To get more great videos like this to learn how to use the App Builder and other Infragistics tools
click the subscribe button to get a notification when we post new content.