Get started with AG Grid Angular Data Grid with a hands-on tutorial from the core team that will take you through the steps of creating your first grid, including how to configure the grid with simple properties and custom components. AG Grid community edition is completely free to use in commercial applications, so you’ll learn a powerful tool that you can immediately add to your projects. You’ll also discover how to load data into the grid and different ways to add custom rendering to the grid. By the end of the workshop, you will have created and customized an AG Grid Angular Data Grid.
- getting started and installing AG Grid
- configuring sorting, filtering, pagination
- loading data into the grid
- the grid API
- add your own components to the Grid for rendering and editing
- capabilities of the free community edition of AG Grid
The Workshop introduces AG Grid and covers topics such as setting up row data and column definitions, enabling sorting, configuring grid features and user interaction, accessing the grid API, and adding styling. It also explores custom cell renderers, filters, and enterprise features like charting, grid options, and sidebar functionalities. The Workshop concludes with discussions on advanced grid features, aggregation, customizing the context menu, and accessing and updating data in the grid.
1. Introduction to AG Grid and Setup
We'll start off at the basic level and then build it up into more complicated features. I'll show you how to work with the grid and provide a link to the repo with instructions. I'm Stephen Cooper, a developer at Easy Grid, and I'll guide you through using AG Grid in your applications. Let's get started with the Angular CLI to create a new application. We'll add AG Grid using the AG Grid Community and AG Grid Angular packages. Once we import the AG Grid module, we can start our app and modify the app component to include the necessary code for the 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 AngularCLI 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.
So to get started we're going to use the angularCLI 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.
2. Setting up Row Data and Column Definitions
We've set up the row data and column definitions for our grid. We've also added the necessary CSS files, including the core grid CSS and the theme file for AgThemeAlpine. By tying the theme in with AG ALPINE and setting the style to 100%, we have our first grid displayed with the provided row data and column definitions. This is the basic setup to get started with AG Grid. There are different themes available, including a dark mode option.
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.
3. Adding Grid Properties and Enabling Sorting
We'll move on to step two, which involves adding grid properties. We'll mimic data coming from a backend server by using a local.json file. We'll update our application to use the Angular HTTP client and load the data in ngOnInit. We can subscribe to the data, but it's better to make it an observable and use the async pipe. We can also mimic network delays and handle error cases. Next, we'll enable sorting for the data by setting the 'sortable' property to true on the desired columns. We can use the 'default column def' property to avoid copying and pasting the code for each column.
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.
4. Configuring Grid Features and User Interaction
We can set a default column definition to make all columns share the same features. The grid can be configured with options like filters and animations. Users can interact with the grid by selecting rows and responding to grid events. The display of columns can be improved by setting explicit widths or using grid events to auto-size columns. Developers have control over how the grid behaves, including enabling users to change column widths.
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.
5. Accessing Grid API and Adding Styling
We'll demonstrate how to access the grid API and interact with the grid using a view child. The grid API provides a list of grid options and methods that can be called. Next, we'll add styling to the grid, including gold, silver, and bronze colors. By changing the order of the column definitions, we can control the display order of the columns. We can add cell classes to apply CSS styles, either globally or externally to the component. Additionally, we can make the cell class conditional based on the column value.
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.
6. Styling Cells with Cell Class Rules
You can apply cell class rules to add styling to cells based on conditions. AG Grid supports expressions syntax for concise code. The documentation provides details on the available expression syntax. We now have a styled grid. Any questions or requests for other ways to update 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?
7. Custom Cell Renderers and Parameters
We can replace the default cell renderers with our own Angular components. First, we generate a new component using the CLI and implement the AG Grid interface. Then, we use our component as a cell renderer in the App component. We can pass parameters to our cell renderers to make them reusable. By defining an interface for our cell component, we can parameterize and customize the rendering.
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.
8. Using Cell Renderer Selector
We can use components to display different values based on row data. By using a cell renderer selector, we can dynamically switch between different components. For example, we can have an 'over' component for ages over 25 and an 'under' component for ages below 25. This demonstrates the power of using AG Grid to customize and work within Angular.
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.
9. Passing Components to Column Definitions
One limitation of passing components directly to column definitions is that you might want to store them on a server or dynamically retrieve them. To make columns JSON serializable, you can apply a mapping using a components object. Instead of using the actual component, you give it a string identifier. This allows you to separate components from column definitions.
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
10. Exploring Filters and Custom Filter Implementation
We've explored different filters available in AG Grid, including text, number, and date filters. We enabled the number filter for our medals and the date filter for our dates. We also learned how to handle string dates by providing a comparator function. Additionally, we discussed the floating filter, which allows users to easily filter data by typing in the header. Lastly, we mentioned the possibility of creating a custom filter implementation for specific columns.
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.
11. Implementing the Filter Component
We're going to implement the filter component, which will have a radio button to filter data based on age being either under 25 or over 25. The filter logic checks whether the age is greater than or equal to 25 when the 'isOverTheLimit' property is set to true. If 'isOverTheLimit' is explicitly set to false, the logic checks if the age is less than 25. The 'getModel' method returns the current state of the filter, and the 'setModel' method initializes the filter based on the provided model. The 'filterChanged' callback is called when the radio buttons are clicked, updating the filter model. However, the filter is not yet functional, and we need to use the 'params' object to implement the 'filterChanged' callback.
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.
12. Custom Filter State and Restoration
We can update filters and save their state or preferences. By retrieving and setting the filter model, we can store and restore filter states. We can get an empty object as the filter model, set specific values, and see the changes reflected. The filter model contains information about the filter type and its value. We can save the filter state to local storage and restore it when needed. However, there seems to be an issue with the filtering not working correctly. Let me know if you want me to continue debugging or move on to the next features.
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.
13. Exploring AG Grid Enterprise Features
To access the Enterprise Features of AG Grid, you need to install the AG Grid Enterprise package and import AGGrid Enterprise in your application. These features include right-click options to copy data, export to CSV or Excel, server-side row data, set filters, grouping and pivoting, import and export functionalities, tool panels, sidebars, and aggregations. By setting properties like 'row group panel show' and 'enable row group', you can enable row grouping and aggregate functions. You can also enable charts and range selection. Please note that a license is required for the Enterprise Features.
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.
14. Charting, Grid Options, and Sidebar Features
You can enable charting in AG Grid, allowing you to analyze and display data in different ways. This feature provides flexibility to your users and integrates charting functionality into the grid. If you have any specific features you're interested in, please let me know. Otherwise, I'll continue demonstrating more enterprise features. One way to clean up your Angular component is by using the grid options property, which has the same interface as the component itself. By defining the grid options separately, you can reuse settings and make your code more organized. Another enterprise feature is the sidebar, which allows you to move columns and apply filters to the grid.
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.
15. Exploring Advanced Grid Features
You can use row grouping and pivoting as alternative ways to interact with the grid. AG Grid provides a tool panel component that allows you to customize the grid's functionality. You can add your own custom components and incorporate live examples from the documentation. The sidebar and status bar are additional enterprise features that provide useful options for organizing and aggregating data.
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.
16. Exploring Aggregation and Enterprise Features
The aggregation component provides tools for advanced grid functionality, such as filtering, aggregation, and exporting data. These features enhance the grid's power and eliminate the need for manual copying and exporting. The grid offers a wide range of built-in capabilities, especially in the enterprise versions.
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.
17. Customizing Context Menu and Adding Rows
I'm wondering if anyone has specific projects or issues with AG Grid that I can help with. Let's explore adding new rows to the data set by customizing the context menu. We can duplicate a row when a specific option is clicked. By using the transaction API, we can update the grid's current state and add the duplicated row at the desired index.
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.
18. Accessing Data and Concluding Workshop
We've demonstrated how to use context menus and external methods to access and update data in the grid. Additionally, we showcased the pagination feature and the powerful quick filter, which allows users to search and filter across all columns simultaneously. We also discussed implementing the quick filter using Angular and demonstrated its functionality. If there are no specific requests, we can conclude the workshop as there are other ways to access our documentation.
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.
During this session you will learn how to create a new Rollbar account and integrate the Rollbar SDK with your application to monitor errors in real-time and respond and fix those errors. We will also cover how to customize payload data sent to Rollbar to extend your monitoring capabilities. Agenda: - Create a Rollbar Account (Free Account) - Integrate your application with the Rollbar SDK - Send handled and unhandled errors to Rollbar - Add Custom payload data to your configuration.
Ever more companies are choosing Micro-Frontends. However, they are anything but easy to implement. Fortunately, Module Federation introduced with webpack 5 has initiated a crucial change of direction. In this interactive workshop, you will learn from Manfred Steyer -- Angular GDE and Trusted Collaborator in the Angular team -- how to plan and implement Micro-Frontend architectures with Angular and the brand new webpack Module Federation. We talk about sharing libraries and advanced concepts like dealing with version mismatches, dynamic Module Federation, and integration into monorepos. After the individual exercises, you will have a case study you can use as a template for your projects. This workshop helps you evaluate the individual options for your projects. Prerequisites : You should have some experience with Angular.
Want to get started with building a GraphQL server but have no idea where to begin? Every (frontend) developer asks for a GraphQL API but often lacks the backend knowledge to create a performant one. There are many different flavours in creating the perfect GraphQL server, ranging from schema-first to code-first or even auto-generated solutions. In this interactive workshop, you will learn about building a serverless GraphQL API using StepZen. With StepZen, you can create a GraphQL for any data source (SQL, NoSQL & REST) and even other GraphQL APIs within minutes. And even handle more complicated use cases such as authentication and deployment. Using little code, you'll get to combine different data sources in one fully performant API that you can use in your applications from day one. Table of contents: - What is StepZen? - Connecting to a data source (SQL, NoSQL & REST) - Using custom directives - Handle sequence flows - Deployment
A workshop for UI and Angular beginners alike. Let's pull down the Tour of Heroes app (written John Papa and found throughout the Angular docs) and give it a UI upgrade! All you will need is a laptop and your favorite data set (mine, of course, will be ponies.)
In this talk you'll learn all about the renaissance Angular has been going through! First, we'll look into how the framework embraced fine-grained reactivity with signals to boost its runtime performance by orders of magnitude. After that we'll dive into applying a similar fine-grained approach to code loading to make everything load faster. At the end, you'll learn about the tooling you can leverage to land all this in your apps!
Functional Programming (FP), a paradigm in which programs are made up of pure, stateless functions, is adored by many programmers for how easy it makes it to predict, test, and debug the behavior of the code we write. Although FP has an unfortunate reputation as an ivory-tower domain full of obscure jargon comprehensible only to those with PhDs in category theory, the core concepts are straightforward ideas all of us can understand, and even have fun learning! In this talk, we’ll create generative SVG art as a way to explore fundamental FP concepts such as recursion and function composition, and tackle the practical challenges of FP in the real world, such as dealing with the tricky parts like side effects and randomness which don’t fit into the safe, sterile world of pure functions. By the end of the talk we’ll not only have the key concepts & techniques we need to start writing our own functional programs, we’ll have some pretty functional art to look at too!
You’re curious about what Apache Kafka does and how it works, but between the terminology and explanations that seem to start at a complex level, it's been difficult to embark. This session is different. We'll talk about what Kafka is, what it does and how it works in simple terms with easy to understand and funny examples that you can share later at a dinner table with your family. This session is for curious minds, who might have never worked with distributed streaming systems before, or are beginners to event streaming applications. But let simplicity not deceive you - by the end of the session you’ll be equipped to create your own Apache Kafka event stream!
In today's world, it's no surprise that "Content is King". It helps in telling a story and helping you reach out to more people. Most of the time, developers aren't the ones managing this content. Hence, modeling content efficiently becomes crucial. Doing it well makes the content delivery process smooth for the team. But how does one go on with modeling content? What are the things that one should take care of? I'll answer such questions in this talk, and share my approach to content modeling as a React developer.