3.2 The NG-Grid Component
1.AngularUI Utilities7 lessons, 35:13
2.AngularUI Modules3 lessons, 22:13
3.Other AngularUI Components4 lessons, 26:14
4.Conclusion1 lesson, 00:58
3.2 The NG-Grid Component
In this lesson, we're going to look at AngularUI's NG-Grid utility. So you can see right here, we have NG-Grid. And you may wonder, well, why is it named differently than all the others? All the others have UI something. This one is NG, which is, of course, Angular. But why isn't it UI Grid? Well, I think this may be because it's one of the older projects here. In fact, if you click on the Site button over here, notice that there's this news here. ng-grid is being rewritten as UI Grid. And it's in beta. And you can go ahead and check it our if we go to UI Grid here you can see we have ui-grid. info. Now this is going to work pretty similarly to how ng-grid works. However, since it's still in beta we're not gonna talk about ui-grid now. We're gonna talk about ng-grid which is a similar yet older library. So let's go ahead and see how this works. I've created a grid project, and let's go ahead and do bower install ng-grid. As you can see, it depends on jQuery, so we'll have to include that link. So, let's go ahead and open up the index.html file. And we're going to change the utils here to public/lib/ng-grid/ng-grid- and then it's actually the version number, so 2.0.13 and then we'll say .min.js. We also need to include jQuery here, like I said, so that's public/lib/jquery/dist/jquery.min.js. And we also have a CSS file for ng grid. So let's do link rel stylesheet, and we'll set the href to public/lib/ng-grid/ng-grid.min.css. And then to create the actual grid it's actually very simple. We can just create a div and we'll give it a property of ng-grid and we can pass it some grid options which we'll create in just a second here and then close the div. It's that easy. So now let's open app.js and of course the first order of business is to add ng-grid as one of the dependencies. And then we want to create our $scope.grid options object. Right? Now I am realizing at this point. I haven't actually said what the grid is. The grid utility is basically a super simple spreadsheet. Or, alternatively, a table on steroids. Now the first thing we need is some data. And I'm just going to paste this in here, so we have scope.superheroes, and we have an array of superheroes. So they have a first name, a last name and an alter ego. Notice, we also have an other value here which is just some numbers. I'll show you why we have this in a second, but now it's time to set up our grid options. The first option we, of course, want to set is the data. And we set the data. It's actually as a string instead of a reference to this object. We give it the name of the object. So we have superheroes. So we'll go ahead and set the data to superheroes. And actually that should probably be e-s at the end if we're gonna keep this in proper grammatical style. Okay. So we have. Our data, which is the superheroes data, that's fine. For now, let's start with just that, so we look at our webpage right now. Notice two things. The first and obvious thing we notice is that it's not really high enough. The other thing we notice is that it's really too wide. So we need to give it a height and a width. So, let's come back to our HTML here. Let's give this a class of grid, and let's add a little bit of styling of our own. We'll give it a height of let's say 400 pixels and we'll give it a width of 400 pixels as well. And while we're at it why don't we give it a border of one pixel solid black. So now if we refresh the page. Okay, now we have something we can work with. So we have a table here with our four values. And notice of course right off the bat there's a lot we can do. We can order by any one of these fields. And we can actually select some of these fields as well, which is kind of neat. But there's a bit more we can do with this. So let's look at a few of the other options. The first one is the showGroupPanel, and I'll go ahead and set this to true. If we show the group panel, when I refresh the page here. Notice we have a little panel at the top here that says drag a column header here and drop it to group by that column. So for example, I can drag first name up here, and now notice we're grouped by first name. Now, in this case, we only have one of each name, so this doesn't really give us any new information. But if you had a much larger data set, this would be a great way to, for example, view everybody who's named Steve, for example. Or something like that. Of course, we can drag out multiple names here. So we can have grouped by first name, and then grouped by last name. So, for example, we could see everybody named Steve, grouped by their last name. So everybody named Steve Rogers, then maybe after this, everyone named Steve. Barton, et cetera. So that's cool, and then we can just click these little Xs here to get back to the table as it was. Now another thing to think about is these column titles. Right now, these titles are just whatever the key is in the objects that represent them. But we might want to make this a little prettier to look at, so let's create a ColumnDefs object here in our options or column definitions. This is gonna be an array of each one of the columns that we want to have. So, for example, let's take the field. Field is called firstName. But we want to set the display name to First Name as two words with proper casing. Let's go ahead and duplicate this for LastName. And not only does this set the proper display names for these fields. The columnsDef array that we have here is actually considered the definition of what fields we want to show. So if we go back to our browser and refresh it now, you can see not only have our headers changed to something a little more user friendly, but now we only see first name and last name data. Okay. So that's pretty cool. Now right now we can select elements here. But this selection isn't actually being used anywhere. What we can do is set an option for selected items. And let's go ahead and set selected items to $scope.selected. Now up here we can create this. Let's see $scope.selected. Equals an empty array. And then back in our HTML here, underneath this, let's actually create a bunch of h1's, so we'll say ng-repeat for s in selected. And let's just go ahead and s.alterego. So, you should be able to see how this works here. We have this selected array here, which is an array of all the selected items, and we are getting the selected items out of this superhero data array up here. And we can access any one of these properties. So now, if we go ahead and refresh this page, if I select Tony Stark, you can see we have Iron Man down here. I can select Thor, and we have Thor down there. I can select each one of these and they appear down below, and when I click them again, they disappear. The final option we'll think about is multi-select. Currently, we can select multiple items and you can see, if I select the first three, we have Iron Man, Captain America, and Black Widow showing up down below, but if we go ahead and set multiSelect equal to false. If I refresh this page and I select one and then another you can see we can only actually select one of these records at a time. And I should point out that his whole selection thing still works when we are in one of our grouping views. Like I said, this is a very basic look at what NG-Grid can do. If you have to display and work with a lot of tabular data in your web application, this utility is a great utility to have.