I am working on implementing data display using AG Grid with an AJAX call, but I am facing an issue where no data is being shown in the grid. Even though my AJAX call seems to be functioning correctly and returning the desired object List, the grid itself is not appearing on the page. Below you can find the code snippet from my Index.cshtml file which includes the necessary scripts and CSS for AG Grid. Following that, I have provided the script from Inv.js file along with the result returned by the AJAX call.
<script src="https://unpkg.com/ag-grid-community/dist/ag-grid-community.min.noStyle.js"></script>
<link rel="stylesheet" href="https://unpkg.com/ag-grid-community/dist/styles/ag-grid.css">
<link rel="stylesheet" href="https://unpkg.com/ag-grid-community/dist/styles/ag-theme-balham.css">
<div id="Inventory" width="100%" class="ag-theme-balham"></div>
var columnDefs = [
{ headerName: "ID", field: "ID", sortable: true, filter: true },
{ headerName: "InvID", field: "InvID", sortable: true, filter: true },
{ headerName: "Number", field: "Number", sortable: true, filter: true }
];
var gridOptions = {
columnDefs: columnDefs
};
var gridDiv = document.querySelector('#Inventory');
new agGrid.Grid(gridDiv, gridOptions);
gridOptions.api.setRowData(result);