正确使用ag-grid

Question

Is it possible to use Ag-Grid javascript version with ASP.Net MVC Application, If So, Please tell me how to use.

I tried the demo given in ag-grid site, AG-Grid .

But it is not working fine with asp.net, I am getting Error says

Uncaught TypeError: Cannot read property 'match' of undefined
at e.getTheme (ag-grid.min.js:242)
at e.specialForNewMaterial (ag-grid.min.js:20)
at e.getHeaderHeight (ag-grid.min.js:20)
at e.getGroupHeaderHeight (ag-grid.min.js:20)
at t.setBodyAndHeaderHeights (ag-grid.min.js:74)
at t.init (ag-grid.min.js:74)
at ag-grid.min.js:8
at Array.forEach (<anonymous>)
at ag-grid.min.js:8
at Array.forEach (<anonymous>)

I doubt if I am missing any other packages.

  var rowData = [ { make: "Toyota", model: "Celica", price: 35000 }, { make: "Ford", model: "Mondeo", price: 32000 }, { make: "Porsche", model: "Boxter", price: 72000 } ]; var columnDefs = [ { headerName: "Make", field: "make" }, { headerName: "Model", field: "model" }, { headerName: "Price", field: "price" } ]; function doProcess() { var gridOptions = { rowData: rowData, columnDefs: columnDefs, onGridReady: function (params) { params.api.sizeColumnsToFit(); } }; new agGrid.Grid("#myGrid", gridOptions); } doProcess(); 

 <!-- Inside the view page --> <h2>Index</h2> <script src="https://unpkg.com/ag-grid/dist/ag-grid.min.noStyle.js"></script> <script src="https://unpkg.com/ag-grid@17.0.0/dist/ag-grid.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script> <link rel="stylesheet" href="https://unpkg.com/ag-grid/dist/styles/ag-grid.css"> <link rel="stylesheet" href="https://unpkg.com/ag-grid/dist/styles/ag-theme-balham.css"> <div id="myGrid" style="height: 131px; width:600px;" ></div> 

Answer 1

Looking at the blog shows that only ag-grid.min.noStyle.js is loaded in that demo, whereas you have loaded ag-grid.min.js as well. I would guess they are variants of the same thing, and this is almost certainly unnecessary. Also there is no apparent need for jQuery.

Lastly though, and most importantly, you created your grid like this:

new agGrid.Grid("#myGrid", gridOptions);

by passing in a selector string directly. However the demo (and no doubt the documentation, if you check it) clearly shows that a DOM element is passed in, created by using document.querySelector, ie

var eGridDiv = document.querySelector('#myGrid');
        new agGrid.Grid(eGridDiv, gridOptions);

Since you passed the grid something it didn't understand, it can't load anything into it.

Working demo:

 var rowData = [ { make: "Toyota", model: "Celica", price: 35000 }, { make: "Ford", model: "Mondeo", price: 32000 }, { make: "Porsche", model: "Boxter", price: 72000 } ]; var columnDefs = [ { headerName: "Make", field: "make" }, { headerName: "Model", field: "model" }, { headerName: "Price", field: "price" } ]; function doProcess() { var gridOptions = { rowData: rowData, columnDefs: columnDefs, onGridReady: function (params) { params.api.sizeColumnsToFit(); } }; var eGridDiv = document.querySelector('#myGrid'); new agGrid.Grid(eGridDiv, gridOptions); } doProcess(); 

 <!-- Inside the view page --> <h2>Index</h2> <script src="https://unpkg.com/ag-grid@17.0.0/dist/ag-grid.min.noStyle.js"></script> <link rel="stylesheet" href="https://unpkg.com/ag-grid/dist/styles/ag-grid.css"> <link rel="stylesheet" href="https://unpkg.com/ag-grid/dist/styles/ag-theme-balham.css"> <div id="myGrid" style="height: 131px; width:600px;" ></div> 

NB If you're going to follow a demo, it's usually wise to follow it accurately, and only change things where you understand the consequences and actually need to change them to fulfil your own project's requirement. In the case of the changes you have made, most of them look unnecessary, including the one which caused the problem.