DEV Community

Cover image for AG-Grid Tutorial With Asp.Net Core Razor Pages - Part 2
Zoltan Halasz
Zoltan Halasz

Posted on

AG-Grid Tutorial With Asp.Net Core Razor Pages - Part 2

#dotnet #javascript #tutorial

Continuing the AG Grid series, I added some other features to my previous post. I cleaned the repo a little bit, removing some unnecessary files and dependencies, and also adding the ag-grid specific js and css files to the local folder, instead of accessing them from the internet. So, I apologize because of the quality of the previous code.

My observation until now is that DataTables.js as a free JavaScript grid is an easier solution versus Ag-Grid. Later on I will try some enterprise features of Ag-Grid, maybe this will compensate for that.

Preliminary steps:

  1. check the previous tutorial: https://dev.to/zoltanhalasz/ag-grid-tutorial-with-asp-net-core-razor-pages-part-1-26mn
  2. application is live under: https://ag-grid2.zoltanhalasz.net/
  3. zipped(cleaned) repo of the application: https://drive.google.com/open?id=10A0as_DTC94ve_oVtDF2uFW1cX19k4J7

How the app will look like:
Alt Text

The steps of the tutorial are:

A. please remove the unnecessary files from the wwwroot (if you are using the part 1 repo).

B. check their official community resource from github, cloning their repo https://github.com/ag-grid/ag-grid/tree/master/community-modules/all-modules/dist

i. take the file ag-grid-community.min.js and copy it under wwwroot/js folder
(or ag-grid-community.noStyle.js)

ii. the same, for the CSS files, taken from the Styles folder in the repo above
copy the them in the Css folder, and then reference them from the Layout file:

 <link rel="stylesheet" href="~/css/ag-grid.css"> <link rel="stylesheet" href="~/css/ag-theme-balham.css">
Enter fullscreen mode Exit fullscreen mode

C. the whole source of the index page will be:

<script src="~/js/ag-grid-community.min.js"></script> <h1>Hello from ag-grid - Part 2</h1> <div> <div id="mybutton"> <button onclick="onExportCsv()" class="btn-info">Export Csv</button> </div> <div id="myGrid" style="height: 450px;width:900px;" class="ag-theme-balham"></div> </div> <script type="text/javascript" charset="utf-8"> var deleteRenderer = function(params) { var eDiv = document.createElement('div'); eDiv.innerHTML = '<span class="my-css-class"><button class="btn-del btn-danger btn-xs">Delete</button></span>'; var eButton = eDiv.querySelectorAll('.btn-del')[0]; eButton.addEventListener('click', function() { console.log('will be deleted, invoice no:', params.data.ID); window.location.href = './Delete?id='+params.data.ID; }); return eDiv; } var editRenderer = function (params) { var eDiv = document.createElement('div'); eDiv.innerHTML = '<span class="my-css-class"><button class="btn-edit btn-warning btn-xs">Edit</button></span>'; var eButton = eDiv.querySelectorAll('.btn-edit')[0]; eButton.addEventListener('click', function() { console.log('will be edited, invoice no:', params.data.ID); window.location.href = './Edit?id='+params.data.ID; }); return eDiv; } var detailsRenderer = function (params) { var eDiv = document.createElement('div'); eDiv.innerHTML = '<span class="my-css-class"><button class="btn-details btn-info btn-xs">Details</button></span>'; var eButton = eDiv.querySelectorAll('.btn-details')[0]; eButton.addEventListener('click', function() { console.log('will be info, invoice no:', params.data.ID); window.location.href = './Detail?id='+params.data.ID; }); return eDiv; } // specify the columns var columnDefs = [ { headerName: "InvoiceNumber", field: "InvoiceNumber" }, { headerName: "Amount", field: "Amount" }, { headerName: "CostCategory", field: "CostCategory" }, { headerName: "Period", field: "Period" }, { headerName: "Delete", field: null, cellRenderer: deleteRenderer }, { headerName: "Edit", field: null, cellRenderer: editRenderer }, { headerName: "Details", field: null, cellRenderer: detailsRenderer }, ]; // let the grid know which columns to use var gridOptions = { columnDefs: columnDefs, defaultColDef: { sortable: true, filter: true, width: 120, }, rowHeight : 35, pagination: true, paginationPageSize: 10, }; // lookup the container we want the Grid to use var eGridDiv = document.querySelector('#myGrid'); function getParams() { return { suppressQuotes: null, columnSeparator: null, customHeader: null, customFooter: null }; } function onExportCsv() { var params = getParams(); gridOptions.api.exportDataAsCsv(params); } // create the grid passing in the div to use together with the columns & data we want to use new agGrid.Grid(eGridDiv, gridOptions); agGrid.simpleHttpRequest({ url: './Index?handler=ArrayData' }).then(function (data) { gridOptions.api.setRowData(data); }); </script>
Enter fullscreen mode Exit fullscreen mode

D. pagination

  • this is solved using the gridOptions object, setting the properties: 
 pagination: true, paginationPageSize: 10,
Enter fullscreen mode Exit fullscreen mode

E. Csv export (basic)

  • this is managed using the button with id = "mybutton", and writing its onclick event function: 
 function onExportCsv() { var params = getParams(); gridOptions.api.exportDataAsCsv(params); }
Enter fullscreen mode Exit fullscreen mode

for the params object, I returned the basic features for a csv export using getParams function.

See more detailed explanation about csv export on their page: https://www.ag-grid.com/javascript-grid-csv/

F. height and width on the rows/columns

 width: 120, // in defaultColDef properties rowHeight: 35, // in gridOptions properties
Enter fullscreen mode Exit fullscreen mode

G. cell rendering (basic)
for example, in the columnDef for Delete

 { headerName: "Delete", field: null, cellRenderer: deleteRenderer },
Enter fullscreen mode Exit fullscreen mode

deleteRenderer will be a function generating html for the delete button

 var deleteRenderer = function(params) { var eDiv = document.createElement('div'); eDiv.innerHTML = '<span class="my-css-class"><button class="btn-del btn-danger btn-xs">Delete</button></span>'; var eButton = eDiv.querySelectorAll('.btn-del')[0]; eButton.addEventListener('click', function() { console.log('will be deleted, invoice no:', params.data.ID); window.location.href = './Delete?id='+params.data.ID; }); return eDiv; }
Enter fullscreen mode Exit fullscreen mode

H. Detail, Edit, Delete Razor pages added for complete CRUD, as per cell rendering links suggest.
This is achieved using Entity Framework applied on the In-Memory database.

Top comments (1)

Collapse
 
jghadiri profile image
j-ghadiri • • Edited

Thanks for this article.
how to handle this pagination on server in asp.net core MVC?