Get started with AG Grid Angular Data Grid

We'll start off at the basic level, and then we'll build it as we go through the workshop into more complicated features to, I guess, both servers. this is how you use AG Grid. But then also if you're looking to do something more complicated I'll show you how you can do that and work with the grid.

And then if you're planning on following along with the workshop I've put a link in the chat to the repo which has the instructions in. So if you go to the main branch it tells you you can switch through the different stages of the workshop. So for example we'll start with the quick start and And these will be the steps that we're working through. So you can either start from scratch like I'm going to do with the Angular CLI or you can follow along these instructions and switch branches. If you check out this repo, then in case you get stuck on one step, you can always get to the next starting point and carry on the workshop. And then also hopefully this will serve as a good reference for you. You'll definitely get to see what AG Grid is about.

And I guess while we're just before I actually start following the steps and creating the app. So this is our probably introduce myself and maybe wondering who I am. But, yeah, my name is Stephen Cooper and I work at Easy Grid on the core team. So I'm one of the developers, I guess now maintaining the grid, adding features, making sure our documentation site is the best it can be so people have good success with our grid. um but yeah aj grid is a javascript grid so anything to do with tables and features that you might associated with that sorting filtering um these are all the kind of features you can expect from aj grid and much much more um so we're definitely highly used in financial um settings um but that's definitely not the only place we're used and so we can have really good performance live streaming updates some charting so maybe touch on these things at the end of the workshop but we'll start from the beginning um and showing you how you might be able to start using AG grid in your own um applications so i think we'll get started from here and just so you know feel free to ask stop me ask any questions as we're going, if there's something which doesn't make sense or you want more information about it because then I can go into it in more detail and make sure it's clear.

So to get started we're going to use the angular CLI just to spin up a new workshop, or not a new workshop, a new application for us. So we're going to do that with ng-new. Let's call it MyApp. And then we're going to set some defaults for us here. We'll set the style to SPSS. We don't need routing for this app. and we're going to default the styles and templates to be in line so that makes it easier to see during this workshop but that's completely up to you how you would prefer to set up your own application or how it is done in your current project so once this app has been created I'll and show you the steps that we need to add AG Grid into it, and this is using Angular 14, seeing as that is now the newest version, but in terms of AG Grid features, we're going to be supporting it back to 8 at the moment, and definitely from 9, you'll still have support, so if your project has already been created on an older version, you know, we're going to help and maintain that compatibility. So if we come into our app, we've got run start, we should be able to see that we'll have a template app. Let's have a look. We do. This is interesting that when you do it with inline styles or template, you get the old application thing instead of the new one. But we'll stop that. And now we're going to add AG Grid. So there's two packages that you're going to want to use for AG Grid. We've got our AG Grid Community. And this is all the free features of the Grid. And then also we've got AG Grid. Angular, which is an Angular wrapper, which provides the type, which provides the Angular component, which enables you to interact with it in an Angular-specific way. So, we've got our Angular code and we've got AG Grid Angular and community. Those are the two packages that we will need to get started with AG Grid. Now, before we can get any further, we'll need to add the AG Grid module into our module to import all the features. So that's azgrid module. So with that, that brings in the component. Now let's start up our app. And we're going to go into our app component and let's change this. So, we'll get rid of the generated code. Give us a flat slate. Right. Now we wonder why it's not working. Okay. So, we're going to do that. The component that we're going to be using is ag-grid-angular. So we'll add that in. And the main thing you need for a grid is, of course, data and column definitions. So I'm just going to copy in some data and also the column definitions to save me typing them out.

So I've copied them from the GitHub repo that I posted in the chat. And let's go through this, so what we've got here is for our row data we're going to be looking at some Olympic medal winners, so we've got athletes, their names, age, countries, where they're from and then also you know how many medals they won at each of these competitions, and you'll see that our column definitions for the grid match the properties of our row data, so you've got field athlete that will be pointing at this field age is is that property and so on.

So we need to pass these to our components. So we've got inputs of row data. So pass that the row row data and column definitions. Now, at this point you're thinking, is AG Grid completely broken, but we're just missing another set up stage which is to give it all the The following CSS... So, what we've got here, AGGrid.css. So, this is the core grid CSS, so you're always going to need to import that because that actually governs how the grid is structured. And then the second file here is a theme. So AG Grid comes with a few different themes. And this is the theme file for AgThemeAlpine. And if we come back to our Angular grid here, we're going to tie the theme in with AG ALPINE, and also we're going to set the style on this so that it takes up the height of our demo application. Let's just say 100%. And there we go. We've got our first grid. And so you can see now our row data, the three rows we've got are displayed and using the column definitions that we provided. So that's the the basics of all the bare minimum that you need to do to get a g grid started um and as i said there are different themes so we could change the class of that to be dark and if we update the css file as well to be the dark theme you'll see you can have the grid in dark mode as well so you could make that dynamic because i know that's very popular for people to do be able to elect users, change the styling. But yeah, there's a few different themes, which you can see on our website, depending on what you're looking for. So that's the initial step.

I don't know if there's any questions about that before I carry on to the next step and start adding in more data and more features.

Okay, it seems not. So let's go on to step two, which will be adding in some grid properties. So I'll be following through these steps now.

So in most applications, your data is going to be coming, I guess, from a back end server. So we're going to mimic that now with a local.json file. So I've got this RhoData here. And I'm going to put this into a file in our application under assets. So let me just create a new file, RhoData.json. And I'm going to copy this in. So we've got a big file now with all of that data in.

So now we need to update our application to be able to use that data. So the first thing we need to do is use the Angular HTTP client. Say we need to import that module first, remembering to do it from Angular. There is the client module. And now in our app component, we can now inject that in our constructor. So we've got our HTTP client. And I think we'll load the data in ng on a NIP. So let's implement that. So there's two ways I guess of how we can get this road data. So the initial approach that you might want to do is simply say this dot HTTP, we're going to get the data, it's going to be in the shape of an array. So I'm not typing our row data at the moment. But that's something which will probably become more important in the next release, because then we'll be able to type the row data and give you auto-completion throughout, you know, every place that you use it. And we're just going to say get it from our assets. OK, and then we'll subscribe to that. And then this... Oops. And then you can see we're now getting lots and lots of data. We might not want to do it this way, where we're subscribing within our application. It's probably better for us to have Angular manage the subscription. So what we can do instead is we could make this a observable. And we'll use the async pipe. So get rid of the hard-coded data. And then we're gonna, we are going to assign that and then at least we don't have to write the subscription. And we don't have to remember to unsubscribe from it. And then just to show how AG Grid handles it, because we're not here, we don't have a big network delay, but we could mimic that and see what would happen. Also I'm not going to spend too much time dealing with the error cases. But let's say we have a delay there, so you can see we see it loading. And so that's default. You can override that as well with your own component. But then we've got our data loaded, and we'll be ready to add some more features to the grid. let's remove the delay for now okay so the next thing you might want to do with with this is to be able to sort the data and so currently you know there's no sorting functionality and that's because we haven't enabled it so you to enable sorting you can come on the column definitions here and for the columns that you want you can say sortable, and set that to be true. So now we set that on athlete column. So if we click on the header, you can see we can now sort by the athlete column. So before we then think, oh, I have to copy and paste this onto every single column. You don't have to do that. There's something called the default column def. So we can add a property here called default column def. And that has the same interfaces column definition. And this enables us to say, we'll set sortable on here to be true.

We can remove it from there. And then pass that to our grid as the default column def. If what we should see is that all the columns now share this default column definition. So we should be able to sort by age, country, year, and see who won the most gold medals. So the default column definition is a great way of reducing, I guess, what you call boilerplate and having consistent features across all the columns.

So we could also say filter, set that to true, to get the default filters working and then you'll get this drop down and we can say, well let's have a look for lock. And then that's working. And then for age, you can see by default it is just a text filter. See these things.

So next, there's more ways that we configure the grid. And one of these things that we might want to do is we can say there's an animate rows option. Set that to true, which now means when you filter, sorry, when you sort them you'll get a nice version of those that we want. them you'll get a nice animation while you're sorting. So we tried to make AgGrid as configurable as possible. So if your users like animations, you can have that on, or if you want them to have reduced motion, then again, you can have that switched off, but it says within your control. So these are all inputs.

But now there's a lot of ways that users might interact with the grid, and that you want to then be able to respond to in your application. So maybe we want the user to be able to select a row. So we can enable row selection. And for this, we're going to say multiple. There's a single or multiple. So with that enabled users can now select rows by clicking on them. And say we want to get the row that they have selected, this is where we need to start listening to grid events. So now there's a lot of outputs. And so we can see selection changed. Let's create a handler for that. which will take the event. So add a selection changed. And now the event, the format for this will be, in terms of the interfaces, is whatever the name is, there's an interface for that. So we'll know that it would be a selection changed event. And then that will give us the properties that are available to us on that event. So on this one it's actually only the following ones. But what we can do with that is log those out, use the API from the event, we can get the selected rows from the API and see how that changes. So I don't know if that might be a bit small. So you can see now when I'm changing the selection, we're getting the selected rows. And so then that way you can use the grid to be a bit more of an interactive interface if you want, where users would select something and then perhaps they'd say that, you know, save or send these. So there's lots of different events that you can do.

Now you might be thinking, why do we have so much space for these columns? So can we improve the display there? So there's different ways of doing this. So you could set a width explicitly and say, I want that column to be 100 pixels and bring these in so that you can use the full screen space that you've got. Or another way of doing that is to hook into grid events and also the APIs. There's an event called firstDataRendered. And so with this, we can create a handler for that. handler for that. Again, it would be first data rendered event. And here we're going to use the column API and auto-size all the columns. So if we do that. You'll now see once the data is loaded, it's auto-sized the columns that have, well it auto-sizes the columns that are displayed in the grid currently, which gives you a slightly more compact notion. So if I uncomment that, you can see the difference. So it's kind of up to you as a developer how you want the grid to behave. Do you want users to, change the widths, so we haven't enabled that at the moment, but we could come to our default column definitions, say Resizable, set that to true, and then that will enable users to change the column widths themselves.

Or you can use APIs to do it for you.

Okay, do you have any questions on that so far? Okay, so another thing that I'll demonstrate here before we add more features to the grid is how you can get access to the grid API which enables you to say let's add a button above the grid. And we're going to use that to clear the current selection. I'll say clear selection. so at this point we don't have access to the grid API so a way of doing of getting that is via a view child. So if we do, use the view child, attribute and pass it the component AGGrid, Angular. Type that as the grid. And then type in happy. And then down here, we can say AGGrid, That's deselectable. So now, if we add a selection, we can say clear the selection. And you can see we've now used the grid API that we've got via this view child, to be able to access the grid and interact with the grid via its API. So there's an API in column API. And just to give you a quick idea of the things that are available to you on that, on our documentation, these are listed under this interface, API. So, you've got the full list of all the grid options, as well as all the methods that you can call on the grid API and column API. Our documentation has the exhaustive list of the things that you can call.

Okay. All right. OK. All right. So then, if we go on to the next step, so there's any more questions at this point? And that would be to add some styling to the grid. So now I'm going to show how you can style these columns, maybe to have the gold, silver, and bronze colors. to make those a bit more interesting, and just to make this easier on this smaller screen I'm going to change the order of the column definitions to bring them in line. So as you see by default, the order in which you provide the column definitions is the order in which the grid displays them. Although it is possible for users to drag the rows around. Again, that's configurable. You could suppress that if you want. Right. The first way of adding is to be able to add a cell class. so we could say metal gold and then let's do the same for silver and bronze silver So as you can see, nothing has changed yet. And that's because we haven't specified these CSS classes. So I'm just getting those so I can copy them. Now, you might think your default response might be to put them in here in the application styles, like this. And then you might be confused about why this isn't working. So we've set our style here with the background colors and referred to it in our Cell class. But the problem with this is due to style encapsulation. So by default, styles that you define here are only available to HTML elements that you define within your template. And because the cells themselves are being rendered as part of AGCritAngularComponent, the styles you apply here don't get picked up by them. They're encapsulated here. So if you do want to define your styles here, on this component, you can change the encapsulation to be ViewEncapsulation.none, and that means those styles will be applied globally. And you can see we're now getting the styles applied. But then if you don't want to change the encapsulation of your component, then these styles will need to be defined externally to the component. So I'm going to put them in here. And then you can see because they're defined globally, AGGrid is correctly being picked up. And we're now displaying the styles. So again, that's going to be up to you and how your application is set up about how you want to manage where your styles are defined and whether you want to turn off encapsulation or not. But then say we've got another request where we only want to apply the colors where they've actually the medal so say for example here where silver and bronze is zero we don't actually want to apply the color and so we can update our cell class to be conditional and this cell class can actually take a function as well let's start with the gold one and let's take some parameters parameters cell class prams. And saying this parameters if the value of the column is greater than zero, then we'll, we want metal gold. Otherwise, we don't want anything. And so now you can see where zero, that the class isn't applied where there are more than zero, it does apply. And there's a few different ways of applying these styles.

And so you can also have something called cell class rules, which does it in a slightly different approach. So for this one, it takes an object where you give it the name of the class and then boolean value as to whether to apply that class or not. So this would be medal Silver. And then once again, we can give this a function. And say if the params value is greater than 0, then apply that class. So you can see for silver now, 0s don't have the style. And you can go one step further as well, in terms of, if you want the code to be even and more concise is we support some expressions syntax, which works like this. Replace this with X greater than zero. And that's because our AG Grid knows how to interpret this expression. And, and the details of that, I guess our on our documentation, to come into styling styling cells. You can see this is the expression syntax that we have available to us so x is the value, and you can also have data if you want to apply styles based on multiple columns of or that data row and so on. But yes, now we've got our grid and we've added some styling to it. Hopefully that's making sense, or does anyone have any questions about that, or do they want me to share any other ways you can update styles?

So, so far, with this A2Grid and this Grid, we're using pretty much all the default ways of displaying data in the Grid. But a very powerful feature that you might want to use depending on your project is to be able to replace the individual cell renderers that we've got here with your own Angular component.

So, so far this is just using a string representation, but we can put our own component in here. And to demonstrate that, let's stop the application, and we're going to use the CLI to generate a new component for us and then we'll use that as a cell renderer. So let's do ng generate cell. So that's created us our component.

Now, the first thing to do before we can use it as a cell renderer is to implement the AG Grid interface. I, cell renderer, angular. And this has two methods that we need to implement. You've got refresh and also AGInit. So AGInit is common across all of our components, and it's the method which is called by AGGrid to initialize your component, and it will be called before ngInit is called. So it's slightly different to the Angular lifecycle. So it's our way of interacting with your component after we've created it for you.

So let me just clear these out for now. Start up the app again. And then if we come back to our App component, we're going to say for our age, instead of using the default renderer, let's use our component to render it. So we use cell renderer and we'll pass it our cell component. And now if you look closely, you can see we're now seeing cell works and that is because that's what we have in our template here.

So that's not particularly useful, because you don't want, you probably don't want the same thing appearing in every single cell. So how do we go about actually then updating this? So this is where this agenet comes in. So first of all, let's add a value here, value property. I mean we can say number because we are using it in the age column and then, we'll get that from the params. So we either have a method, say, get value or you can get it directly from the data and that will be the row data. So let's do that for now. It can sometimes be null if you are doing row grouping which I'll touch on later on in the workshop. And then we'll say age. And then we can update our template to use that value. And then you can see that's just Add. So you can see, we're now displaying the value as it's coming from the row data. Hopefully that's all making sense.

Now there's one thing which you might say, okay, well, we've hard coded a lot into this component. What if we want to create a shareable cell component that we can use across multiple columns, and that is something which you know it's very possible to do. So, for example, maybe we had this as age. Now, if we're going to use that for the athlete column, that that wouldn't make sense. So we could add the coming here, and add this cell renderer. component and you can see we've now broken up current which isn't ideal um so that's where we might want to come in here instead of using data and we might want to use the get value function so if it's got that then get the value otherwise we'll just leave it undefined and now at least we're getting the right value. But as you can see this, this label is still hard coded. So we need a way of param parameterizing that. So the way to do this is as well as having a cell renderer, you can also pass in parameters to your cell renderers. And that goes in this format, you have cell renderer params and let's say we're going to give it a label and call it well we'll just say label and give that say this would be that name and then we can do the same thing for the age And say h. And to use these parameters, we'll come back to our cell component. And then we'll add a label. So, that's a string. And then here. So, this is still label equals params.label. But, as you can see, label, the iCell renderer params doesn't have a label property because that's our own custom one. And so, what we can do is define an interface for our cell component, which then, you know, tells people, actually, this component understands the following interface. And then we can use that here. And the compilation now works. And then actually use that in our template.

And then actually use that in our template. And now you can see we've got name and age, which are the parameters we've provided here. and here so we could have added code on there. You can see that.

Then, I see. Has anyone got any questions or thoughts or can they see how that might be useful in their project? Drop me a comment? Let me know you're still there. So quiet. No comments. All right, I will carry on.

So then another way which you can use these components in a more dynamic way is you might have components that you want to display based on the row data itself. So let's take age column, for example. We might want to have two different components, one to say if above a certain age or one if they're below a certain age. And we can do that with a cell renderer selector instead. but before we have that, we'll need two different components to switch between. So I'm going to do some copying and pasting to save me typing things out. To give me an over and under component. Let me correct that interface name. Okay. So, I've now added an over component here and also an under one. So, if they're under, we're gonna highlight it red. green over and we're going to decide which one to use in our app component itself. So now, instead of having a cell renderer and cell renderer params we can have a cell renderer selector, and this takes again a parameters object. Isol renderer params and so inside this method we're going to check the age column so we can say if params.data. That's a first one to check if it's data, because if we're doing road grouping, then they won't actually be data on this road. We'll see that later in the in the workshop. And then we can say if the params data dot age, let's say, if it's greater than or equal to 25. Then we're going to return our over component. So we do that with this format. So the component is going to be over component. And we can pass params to that as well if we want. And so I think that had label on it. Let's say over 25. And if they're not, then we're going to return that in. And then if they're not over 25, we'll fix this. Instead, we're going to return the under component, so say component. Let's leave that empty for now. And here we go. So we haven't provided a label here, let's put a label into this value. I just muted you. So getting feedback. Okay. So now we have audio on. Did you want to ask a question? Okay. Okay, I'll carry on. So now you can see we have different components. So we've got the over component and under one, so they're both in the same column definition, but we're dynamically selecting which component you want to use. So these are all, potentially, this isn't exactly what you want to do, but I hope it gives you the idea of the power that you have using AG Grid to customize it and work within Angular. Hopefully, that's the framework that you're understanding and that you're confident in. And so this is just showing that you can use Angular components within AG Grid itself, and which is a really nice nice and quite powerful feature so we got that can you give me a thumbs up if that feature is potentially useful ah yes thank you Or maybe not. What a disclosure.

Cool. So, there's one potential downside, well, not downside, one limitation of this approach of passing in components directly to column definitions is that sometimes you might want to store your column definitions on a server, for example, or you might want to dynamically retrieve them and say, if it's this user, they can see these columns. Or maybe, if they're a power user, you can also have all these other columns. And to do that, you might want your columns to be JSON serializable. But if you try and put these actual real components in, then it's going to have a problem with that. So there's a way around this, which I guess just involves a little bit extra code, and you apply a mapping. So you can provide a components object. And let's say we've got a cell comp, and that will be our cell component. We could say over, and that would represent our over component and under. and then in the cell renderer property instead of giving it the actual component itself you could give it the string cell comp and likewise in this dynamic selector instead of that you could have over instead of that you can have under Oh yes, it says Agigrid looking for component, but it wasn't found. And that's because I haven't passed the component map to the component, the Agigrid component. There we go. So now we can see we're still getting the same behavior. but now if we go to serialize this you'll get the property cell renderer and cell comp so it's a nice way of separating your components from the column definitions themselves but if you don't need that feature then it's very convenient just to be able to pass in the components themselves okay so I think that's cell rendering done

And also, it's worth remembering that everything I've demonstrated so far is all completely free to use as part of our Community Edition. So you can just start using Azure Grid Community, include it in your project, run it in a production application and it's all under the MIT license. So there's nothing to pay and so you can get all of this completely for free.

Yes, it is. Right, filtering. So, so far we've seen that The default filter is just a text filter, but that's not so great for these numbers here. So what we're going to do is look at the different filters that we have available to us. And that's done in a similar way, you know, by saying what filter we want it to use. So if I come over to our documentation, come to filtering, if we look at our provided column filters, we've got text, number, date. They're all part of the community edition and set filter we'll look at when we enable the enterprise features. So for our medals, we're going to be wanting to use the number filter. so we'll come in here and the name is ag number column filter so now then if we look at the gold column you can see we've got equals less than greater than so this this gives us a better way of controlling and working with numbers so you can say more than five. And that's now correct. So that's so I mean, we could add that to silver and also to bronze. And those will all be now filtering as if the numbers now the one I want to have a next look at is the date one. And because you're working with a string date can be a bit tricky. So we can enable the date filter there. So the filter, pg, date, column, filter. And now you can see that we've got our date. So if I enter the date, 24-08-2008, it's not actually working. I'll give bonus points for guessing why. But if we have a look in our Network tab and look at the data that we're actually getting, we'll see that date is coming in as a string. And so that's quite common. When you're getting data back from an API, your date values have come back as strings. They're not actually JavaScript date objects. So there's different ways that you could handle that. you might have parsing logic in your service, which is returning the dates, which maybe has converted them into JavaScript objects. But if you find that your grid has string dates, then it's possible to provide a comparator function to the filter in the following way. Let's do that here. So as before, when we had cell renderers, we can pass cell renderer params. There's a filter params object, and so we got filter and then we have filter params. And then one of the options on there is a comparator, which is saying the date from the filter which comes in as a date, and then the cell value which is a string. So then this code is specific to the format of the date that our data is set in which is, up we're looking at our road data you, can see our dates are in this format, double digit with with slashes, so that's what this comparator is is splitting on and then enabling us to create a date and say whether it's greater or less than it so now with that comparator added Let's try and do the same thing. 24-08-2008, and you can see now our date filter is correctly working so you can say after that day or before. And it's working, so the reason why the date filter doesn't automatically, I guess, get that right is because date formats can be so different and that's kind of like application domain knowledge but you can override the comparator to be able to get the functionality that you need. Right but as we might want to make our lives or not our users lives easier than having to toggle out this filter icon. There's something called a floating filter. So if I go ahead and add that to our default column definition so it goes everywhere on all our columns. What you'll see now is this adds a new header, parts of the header, which we can filter on. So we can now just type in here and it will do a string match on that. And so this is quite a nice way of, yes, making it easier for users. And so, you know, they can open the filter here and maybe they can change it to less than and then it will remember that behavior for the value you're putting in. So that's the floating filter. but then you might be wondering about this age column um because it looks like the way we've set up our application is to be able to have either they're over or they're under so maybe we want to be able to toggle um the filter as opposed to say well are they we haven't set the number filter there anyway. So I guess what I'm saying is we can provide a custom filter implementation to this column and use that to control things. So once again let's use the CLI to generate the component for us. It's going to be ng-g-component-age-filter. And so then, like before, we're now going to be implementing the filter interface, I guess just to give you an idea of the components that are available. So we've done cell renderer. We're now going to look at filter component, but you can see there's a lot of other rooms, I guess, or places where you can customize the grid.

We're now going to look at filter component, but you can see there's a lot of other rooms, I guess, or places where you can customize the grid. So you can either have a custom floating filter, header components, tool panels, tool tips, or even edits. So there's a lot of hooks, or a lot of ways for you to provide custom implementations to AG Grid. But we're going to do the filter component. And so that is going to implement ifilter AngularComp. Let's get rid of that. So there's more properties here to implement than on the cell renderer, because it's doing a bit more.

So the logic that we're trying to achieve here is have it's have like a radio button so that we can say it's either under 25 or over 25 and so we'll have a let's start implementing this so we can say is over limit It's either going to be a Boolean or under-defined, if we don't want the filter to be active. So we need to say when the filter is active. So that's going to be when is over the limit. It's either explicitly true or explicitly false. true. Okay, and then for when, whether the filter passes so this is the logic that will be executed for every row item that we've got. And so this will be, well, if this is true, is over the limit, then I guess we're going going to judge it on whether the prams.data.age is greatest than or equal to 25. And then otherwise, if isOverTheLimit explicitly set to false, then we'll do, rams.Dated . And then otherwise, we're going to return true, just so that we don't filter things when it's not active. Then for get model, it returns the model for the current state of the filter. Null if it's not active. The grid is going to be calling this. What we'll do here is we're going to return. Is over the limit as our. an object for that to be our model. And then in the set model, this method can be used to initialise the filter. So it's going to be... We need to be careful here. We do get it right. So boolean. So I guess if the model, if that is true, then we can say this stuff is over limit equals true. And if it's explicitly set to false then again we can say That we said it's a false. Otherwise, we can set is over the limit to be undefined, which says that our filter is selecting everything. And that's the specific link to where I'm up to at the moment.

Now else, if the model is over the limit, it's false. Otherwise, we're going to set is over the limit to be undefined. Okay. and then here where we're getting our adionet let me bring this up to the top so that's going to be called first it's passing us this parameters object and that has a number of callbacks on it which we all need to use once we implement our filter and so we'll take a load call let's store it locally perhaps okay and now let's take our edge filter component and where is our column definition for our age column And so we'll say filter, and we can pass it that component. So now, when we open up the filter, we're getting age filter works. So now when he's actually hooked our filter up a bit more. And I think to save you watching me type I'm going to copy it in. And then I can talk through. So what we've got here is some radio buttons. So one for all one for under one for over. And when you click on it. We're going to call this method on filter changed so let's implement that in our filter. And this is going to be Boolean or undefined. And we're going to set that to be our model. Okay. So now you can see we've got our custom filter here all under or over. So the tool is working but you can see our filter isn't doing anything. So this is where the params come in. And you need to say filter changed callback.

So this is a way for us to notify azgrid that, you know, my filter has been updated. You need to run your filtering logic again. So now once we've added that in, open up our filter, see under and over. So it now looks like it is doing the right thing. And if we clear it, are we getting that right? So you see the component is reused in both the filter, floating filter and .. OK. So that's how you would have a custom filter as well. I mean, my styling isn't the most beautiful, but that's not what we're trying to demonstrate here. It's more, how can you hook this into AG Grid? I guess another thing which I could demonstrate here is the way in which we can get filter models and also set filter models. The use case for this is, say, a user might be updating filters And you want to be able to kind of save that state or save their preferences. So it's possible for you to have a method, which retrieves that filter state, and then also can set it back. So instead let's update this button here, clear selection. And let's reuse it to get the filter model. And then here, let's just print it out for now. Get filter model. So if I call this now, you can see it's an empty object. Now let's say under and say get filter model. This is based on, so you've got column and then isOvertheLimit. So this is what we return from our get model here. So then we can see if we set that to over and then get the filter model, this should now be true, which is. And of course, if we set these, so it's less than five medals and get our filter model, see now we've got age and we've also got gold to the gold it has more information. So this is the age of grid filter, which is saying what filter type is type of the filtering and as for the value. Alright, so then let's pretend that we're going to save this to local host that can be our server, or local storage. Filter state. So let's say we want under and we're gonna guess it's not really get as it say filter state now. And then let's have another method which will then restore the filter state. And so we will do the opposite, so it's this.aggrid.api.setfiltermodel. And we'll just take that from localStorage. Okay. Let's add a button for that. Okay, so if we do this right. so if we do this right we'll go under let's say gold has to be less than three and we're gonna get the filter model then say we refresh the page set filter model no column found So, let's check what got stored in local storage. Ah, that's not what we want, is it? Is it going to work? OK, that's looking healthier. And let's say that we want it to be less than five. OK. That's in there. If we reset this and then restore the filter model, we'll now need to pause it as well. There we go. Well, not quite. Something not quite working. Let's see what model we're getting back from the... So we're getting age is over the limit equals false. So that looks right. We're setting the filter model. Not filtering. Would you like me to carry on debugging this or move on to the next features. Let me know in the comments. Move on. OK. All right.

Say there's something maybe just slightly off and how we're assessing this model. Yes, the button can take a while. So I would check what was coming into here and then see why that wasn't updating as we were expecting. Right. Yes.

So does anyone have any questions about filtering or the other kind of things you might be able to do with AG Grid Filters? No? Okay. All right. So then the next part which I look at is seeing some of the Enterprise Features. To do this, we do need to add in a new package now, AG Grid Enterprise, because we've separated what you can have as a community, and also then, if you want, these Enterprise Features, which adds in a lot more functionality to AG grid. But then for the enterprise features, you will need to purchase a license. But I think it's worth seeing, some of the features that will be available to you. So if we install AG grid, enterprise, okay. And then in our application, what we need to do is import AGGrid Enterprise and that will enable all those features. So, as you can see, now we've got enterprise, but we haven't set up our license. There is some console logging to say, please buy a license. But now there's some of the things which you can do is now when we're right clicking, you'll now get this method. method which you can use to copy data, or you can export to CSV or Excel. So there's a whole new set of features which I could actually show you from our documentation. So there's a feature comparison. So as you can see, most things you do get in community. And there's server-side row data which you can get in Enterprise. A few more things in Enterprise in terms of range selection. Our set filter, which I can show now. Editing and all the normal displaying, that's available to everyone. Grouping and pivoting, and then of course, import and export. And then there's some other tool panels and sidebars and aggregations that again come with Asia Grid Enterprise. So, if we come back to our app component, we can now see that when we open up athlete, we're now using this, the enterprise set filter. So, you get that setup as default to enable you to do things like this. So I think I can start the honestly. So you've got the set filter and there's different ways that you can configure that as well. Another thing, which I think is quite popular is row grouping. So to do that, especially if you want the user to be able to do that, there's some properties which you need to set up. So one of them is the row group panel show, and we're going to set that to always show. So you can see here that's now given us this area where we can drag rows into to be able to be able to group them. I'm going to clear up some of this code to make it easier to see what we're doing. So I'm going to just comment this out for now. And let me bring my country column, and yeah, let's bring those back to the top. So say we wanted to group by year, so we can't currently do that. So you need to add some properties onto your row groups. So we've got enable row group. And if we set that to true on year, that will now enable us to group by the year. And what you might want to be able to see here is that, well, how many gold medals or silver medals did they win and have that aggregated up. And so that is something which we we then need to set up on those columns to say actually yes, and aggregate the function using some. So if we do that, it's probably called aggregate function and we're gonna say use some for all of these ones, all the medal ones that make sense. And then if we group by year again you can now see that we're having those columns have been summed up to show us what's there. We can expand these and drill into it. That's a quick look at grouping. Well, while we've got that group on actually, let's enable, I'm going to say rowGroup by true, so I don't have to keep setting that myself. And then I'm going to enable charts as well as range selection. without setting anything gives them value true.

Now, if I come in here, select All, you now have an option to do some charting as well. So, for example, we can see here, just like that, you get what gold, silver, bronze in the total. and also we can come in here and configure what we actually want to display. And then let's say we group those by... we can change the order and you can see how it is linked to the grid. Which now has kind of instantly revealed some oddity in our data that it seems like every other year that number of medals won has changed. And so these are the kind of analysis tools which you might be able to then provide to your users and give them this flexibility, not only do we have the grid, but the grid comes with integrated charting features as well. So this is something I personally used before I worked at AG Grid, which went down very well with my users. So I just said enable charts and suddenly you had all this functionality available to them. So all pie charts. And there's quite a lot of different things you can do there. Right.

So I'm thinking at this point to make this as useful as possible for you. If you'd want to give me some feedback in terms of what specific features you might be interested in, and then maybe I can focus on those areas as opposed to maybe demonstrating features which might not be applicable to you. So now's your opportunity to ask questions or point me in the right direction. Otherwise I'll carry on and demonstrate some more features. Okay. Okay. Okay. Would you like me to focus on what you can do as a community, or are you interested in seeing the more advanced enterprise features that we've got available? Okay. All right. Let's do some more enterprise features. So, I think that's some space here. Also, I mean, I think before I do this, this is something which is kind of like specific to Angular. As you can see, our Angular component here is getting quite large, and it's getting difficult to see, you know, exactly what's going on here. And so this is where I think, as users, we can take advantage of the grid options property, which contains exactly the same interface as the component itself. So we can actually create a grid options here and say grid options equals. and it'll enable us to clean up our template. So let's say... Enable charts. Set that to true. So instead of having these defined on there, we can bring things into our component and pass these all together as one. the row group panel. Always. And another benefit that this gives you over defining on the template itself is that it will enable you to reuse, I guess, your grid options as a JavaScript object. You could have a base object that is shared and you could spread that into these grid options, and straightaway you're reusing a lot of these settings without having to then copy them onto the template itself. So, when I was working with AG Grid, I definitely liked to have this mixture approach where where you can define pretty much all your static options that aren't really going to change on this grid options and just pass that. Whereas it's very useful to be able to take advantage of angular, the async pipe for something like the row data where that is changing. And you can do the same for column definitions as well. You could have a toggle there and have your column definitions come through a pipe and the grid would automatically respond and re-render those columns based on the column definitions that you're providing to it. Okay. So another Enterprise feature is a, we can have a sidebar here. And if we look at this, So either it would be a string or an array of strings. So I know that we can have either columns and filter. So now we have this sidebar, which has appeared here. It must be filters. There we go. So we've got the columns one. And so now you can see we've got the ability to be able to move columns in here, and they will be reflected in the grid. You can hide, show.

It gives you another way of doing row grouping as well. Well, so you could group that by year. So it's another way of interacting with the grid. And also, you've got the values there. As you can see, we can also do pivoting. So if you know how to do pivoting and use that as a feature, you can do that. So now we've pivoted, we have kind of pivoted. And there's a few more options you might need to set up to do pivoting on the column definitions which I'd refer to the documentation to do. And also then on this filters panel that you get, you could, again, work with the filters on this panel, instead of having maybe floating filters here. So it's giving you another option of how you want to get your users to work with the grid.

And then there's nothing to stop you providing your own custom components into these areas as well, which I can show for you now. Let's go in here. So if we come under Components, we And now you can see, we've got this tool panel component. Which I think is actually ready for our example. So yeah, so let's copy this one, the custom stats. So if you haven't been on our documentation site, this is probably something worth going over. We have all these live examples. So you've got the rendered output and then also there's the code here and you can also go and open it in Plunger. And this is where I'm going to take this code from and we can incorporate it into our app. So let's come here, let's add a new file. All seems to have compiled. Let's see. Then we can have a look in here, and see, you know, how is it that I would use this in my own application. So you can see it's coming in here as part of the sidebar definition under tool panels. this is a, let's give it its full definition instead of using the short cut, and this is an array. So I believe we can do this, let's have a look. Yeah, see they're a string or it's a full definition. So we've got our columns or filters. I can't. Rachel, are you trying to ask a question? If you are trying to ask something. I'm going to copy this code off here. Let's get back to our application. Custom stats. Can't find the gold. More debugging. later as this example. It's because we got grouping on. There we go. So take the grouping off and now we're getting the total medals displayed on the grid. I think this works with filtering. No, it doesn't. But there's nothing to stop you listening to these kind of events and saying when the filters have changed update my custom stats panel. And go from there. That's the sidebar. Another element that you can add with enterprise is a status bar down at the bottom, which is quite useful for quick aggregations and counts. So status bar. Let's have a look at this definition status bar here. I'm going to under accessories because this comes with some default options for you. For example, like this. So you see we now got the number of rows, and so this is to do with filtering as well.

Let's filter this to be 2000. So it's now saying this many rows of however many and say we want to do some kind of aggregation there. Well, then there is the aggregation component. If we just have a quick look at the code to make sure we get it right, so let's bring bring all these in. So we've got the rows, total rows, and many are filtered. If we start selecting a range, we've got averages, counts, mins, max. So again, these are just, I guess tools that you can use to advance your grid and make it even more powerful for your users so that they don't have to maybe copy it and export it to Excel or other functionality. There's a lot that you can do with the grid built in, especially when you've updated to use the enterprise versions.

I'm wondering now whether, what kind of, does anyone have any specific projects or ideas that they're working on or issues they currently have with AG Grid that I could help with? You are enjoying me demonstrating different features.

So maybe another area which we could have a look at is. Well, I think. Maybe we want to be able to add new rows into our data set. And so that's something which grids are often useful. Okay. Yeah. Yeah.

So how about we say, well, you know, this context menu, can we customize this and add an option here, which when we click it, you know, we'll add in, we'll duplicate a row of data, perhaps. Because I think that would be quite a good way of showing how you might be able to use the grid and interact with the grid in its different ways. So the way that I would do this, then, is this is the Contacts menu, so you can come in here and look at how we might configure it to add a new item into the... And so it's this callback, get context menu items. So in our grid options, I'm going to get context menu items. I know that this is a callback, which takes in params. Get context menu params. And I know that this has a property, I think default items on it. So we could just provide that. Same. Yeah. So I think this let's just cast that for now, and we can see still working, that's good, but then also let's add in our own custom item. So you can see this example has a custom one, so we can come in here and say...let's have Let's have a look. Let's copy this one, and we're going to return an array, now, with this in it as well as those. to our app. So, you see, we've now got our alert. Let me take that row grouping off. And it's saying United States, we can say. So, we've got that same functionality. Now, what if, instead of just doing that, we want to say duplicate this row. So here in the action for when it's clicked, there's two, there's I guess a couple of steps here. First of all we need to be able to get the row data and so, and we can get that from the parameters. So let's first of all just check that we've got that. So it'll be coming from the node and we can say the data from here. So if we right click here. Okay yeah so we've got the row data there from our row node. And then we know at this point, we've still got access to the grid API. So what we can do here is set the... Well, this isn't exactly what we want to do. But it shows that you could actually set the row data. Let's have a look. Okay. So we've updated the row data. What we actually want to do is just duplicate it. So here is... what we probably want to do is take use of the transaction API. and to and so this is actually i'll show you here i'm working with client side data where it's got updating you can use these transactions to update the current state of the grid so we're going to use this apply transaction and we'll say these are the roads that i want to add so we've got our row item we can use the api apply transaction and we know that we need to give it an object which has add give it array row item If we come back to our app. So let's take this this row, duplicate. And see where it's gone. So you can see our row count is going up, but it's probably appearing at the bottom. Yes, it is. So we probably want it to appear at the right index, so we need to get the row index from this current node, node.rowindex, and then let's say, add index, Let's use that row index.

And there we go, so now it is being added and we've duplicated it and used our apply transaction to do that. That's another way that you can get access to data off the row node. So you've got row index where it's being displayed and also the data, and then use the API to then update the grid itself. So there's quite a lot of power that you can do via these context menus and also external methods.

So let's show some more features which are quite quick and easy to add on. For example, I know in the description of this workshop, we talked about pagination. So I'd better show you how to do that. And that's pagination done. So you can see we've got one to 100 on this page. And you can flick through the pages or go to the last page using pagination. Maybe I will demonstrate another of my favourite ways of filtering when you have lots of data like this. So there's a feature called the quick filter. So if we come back to filtering, and there's this quick filter. So the quick filter is a very powerful way of giving your users just a single place where they can write their, their text and search, search every column. So it works this way, so you'd add in here. And let's say, Missy, see Franklin or you can search by the ages, or you can say where they've got gold medal eight and maybe actually they've also got a silver. Doesn't exist. But we can show how we might be able to set this up.

So if we come to our component here, and at the top let's add a textbox an input. and input. Okay. It's changing. Let's say filter changed, possibly, event. Let's come in here and let's add in this filter change to handle it. Just check off the top of my head what the event is that you get from here. So I'm using the browser event, using any event. I'm going to take a quick look at this example. It's using the input event. This is why we put so many examples on our documentation, because it gives us a way of adding features, and you've got working examples that you can copy from, and it gets you going much quicker. Okay, so it's actually getting the element ID and passing that through. I think we can probably use Angular to do this, can't we? With our form model. What's it called? Engine… Change. Nope. Let me just shut my window. my mind's gone blank in terms of what the the change around here is when you're using ng model So we just use the dots again. seeing that's what they're there for So, it is hooked up, so we're getting the values now, let's say 2008, so the quick filter enables you to filter across all the columns at the same time, so you can say 2008, and Let's say again. So that's a feature that I like quite a lot. I'm thinking that if there's nothing else in particular that people want to do, it might be worth us wrapping it up. because I'm sure there's other ways that you can view our documentation yourself as opposed to me copying from examples.