Getting Started with JavaScript Data Grid using ag-Grid

[Music] Here I am opening up item on a CD into temp and I want to create a new directory called my app and I'll also see the enter that also let's go ahead and open this up in vs code so we're gonna go ahead and create some files now we'll begin with the indexed or HTML file and styles dot CSS file and finally a main dot J's file in our index.html we have an exclamation mark tab to give us some boilerplate this is a comes default with vs code the extension is called Emmett's if you're using something else that just allows us to have some shortcuts which we can quickly render HTML with so now we're going to write a link to our style sheets and we're also going to include a script with a source to our JavaScript file so let's just render something on the screen quickly we'll put h1 tag with hello from AG grid and we'll open this up with live server so that's another extension which have downloaded and here we have it so let's go ahead and pop open console - next we're gonna get some necessary inputs for our project but just put them into our head the first of which is a the necessary JavaScript for AG grid and the following - or the style sheets needed the first style sheet is a structural CSS needed in every grid and the second style sheet is our theme they're going to be using in this grid AG theme bellum okay so now we're just writing down the div which is going to contain our grid we'll have a div with an ID of my grid we'll give it a style where a star attributes with a height of 600 pixels and a width of 500 pixels and we'll give it a class of Ag theme Balam to match our imported stylesheet now we'll switch over into our main J's file well we'll begin defining our grid so firstly we're gonna get some column definitions create a variable column Def's it's going to be an array of objects each object is going to be a column object with a header name mate and a field make for the first column the following to have separate header names and fields note that the header name is going to appear on the grid and the field will correlate to our raw data heroes now and each property on the row is a field in the column definition so we have make model and price so now we're going to define our grid options which will be an object and we'll set our properties column definitions to be a reference to our column Deaf's and row data to do the same so next we'll use the browsers API to get a reference to our grid container we'll use document or query selector and passing the ID of our grid and now we're going to run new agey grid grid we have access to this reference due to the inputs we've made and we'll pass in our grid container reference and our grid options variable and here we have a grid now it's not very interactive however so we're going to now enable sorting and filtering in this grid so let's go ahead and open up our code editor so we're going to set two flags on each column sortable to be true and filter to be true this is the most basic configuration and if we take a look at our grid now we can sort by clicking on the headers ascending descending and know sort we can hold down shift to do sort by more than one column and we can click on the hamburger to see our filter menu and here we have contains and not contains there's more filters but this is the most basic now let's dynamically fetch our rows instead of hard-coding them so I'm just commenting out our raw data and the AG grid namespace actually has a method called simple HTTP requests which allows us to do fetching takes an object with a perm to URL and it's going to return a promise with Oro data now when we post in our grid options to the AG grid grid method our grid options was actually enriched and gave us access to the grid API so we can use this now to set grid options store API dorset raw data and that's gonna now set dynamically set all rows will also enable row selection by setting row selection and our grid options to be a string as multiple and if we look at our grid now selecting or clicking on a row will select it we can hold down command to select multiple rows we can hold down shift to select a range of rows now we're going to dynamically get our selected rows so we'll point a button with a click listener that fires an event get selected rows and in our main J's file we'll define this function now because we already have access to the grids API this is quite simple we can just sets a variable selected nodes equal to grid options or API don't get selected nodes so yeah we're just gonna run get selected nodes will map over these nodes to get our selected data and warm up once more to get a new array which will join and present on to the screen as selected data string presentation so we're just going to specify the make of each car and the model including a space also remembering to use the VAR keyword loss Li will alert this to the screen so let's go ahead and give that a whizz will select a range of nodes and here we have them okay so next we're going to enable the enterprise of Ag grid so that we can do some grouping but before we do that we're actually going to change our raw data endpoint just to give us more rows so let's just clean the up and as you can see we've got many more rows loaded into the grid now so now we're going to go ahead and gonna replace our first a line on line 10 with this this is going to give us access to the enterprise features in the grid so now as you can see we have access to this context menu which is fully customizable you can see it on our documentation here we have the updated two column menu there's the new set filters notice how here on the right we have an error this is just because we haven't set a license for our grid but everything else will be fully functional so let's go back to our main J's file and we're gonna enable grouping now so in our make column we're gonna set row group to be true now you can see here on our grid we've generated a new column here and these three nodes that when expanded show our leaf nodes with all row data this new column is actually customizable it's called the auto group column def let's set a variable to auto group corn and F is gonna equal an object and just like any other column we can give it a header name we can also render a field in each column so we'll render the model of each car and here's the cell renderer used in this column it's actually the default you don't need to include this but we're just showing you here we can also custom parameters to this renderer via that via an object everything is documented and we can just set check box to be true and now will they include this in our grid options or to a group column def and as you can see each cell now has a checkbox if you would like for selecting the group checkbox to select the children then you just have to include this flag here group selects children and set it to true so now selecting a group node will select all of its children D selecting will deselect its children and we also kind of have this tri-state where some nodes are selected [Music]

Channel: ag-Grid

Views: 12,328

Keywords: ag-grid, ag grid, javascript data grid, javascript data table, javascript datagrid

Id: KS-wg5zfCXc

Length: 7min 43sec (463 seconds)

Published: Wed Jan 29 2020