I am trying the demo given in Documentation https://www.ag-grid.com/documentation/javascript/getting-started/
I am getting an error agGrid not defined.I am using html.erb files.Can someone please tell me what the error is.
main.js
import { Grid } from 'ag-grid-community';
var columnDefs = [
{ field: "make" },
{ field: "model" },
{ field: "price" }
];
// specify the data
var rowData = [
{ make: "Toyota", model: "Celica", price: 35000 },
{ make: "Ford", model: "Mondeo", price: 32000 },
{ make: "Porsche", model: "Boxter", price: 72000 }
];
// let the grid know which columns and what data to use
var gridOptions = {
columnDefs: columnDefs,
rowData: rowData
};
// setup the grid after the page has finished loading
document.addEventListener('DOMContentLoaded', function() {
var gridDiv = document.querySelector('#myGrid');
new agGrid.Grid(gridDiv, gridOptions);
});
index.html.erb
<div class="collections_data text-center">
<div id="myGrid" class="ag-theme-alpine"></div>
</div>
There's two ways to solve this:
Change import { Grid } from 'ag-grid-community'; to import * as agGrid from "ag-grid-community";
OR
Change new agGrid.Grid(gridDiv, gridOptions); to new Grid(gridDiv, gridOptions);
Here's a sample showing this in vanilla js: https://stackblitz.com/edit/js-6yuwqn?file=index.js
Related
How can i populate form inputs with the row data of a row that is clicked on? (using AG GRID and vanilla JS)
Example code would be appreciated
const gridOptions = {
columnDefs: [
{field: "make", sortable: true, filter: true},
{field: "model", sortable: true, filter: true},
{field: "price", sortable: true, filter: true}
],
rowData: [
{make: "VW", model: "Jetta", price: "$25,000"},
{make: "Honda", model: "Odyssey", price: "$35,000"},
{make: "Audi", model: "Q2", price: "$45,000"}
],
animateRows: true,
onCellClicked: params => {
let dataMake = params.data.make;
console.log(dataMake);
const fillInput = (e) => {
e.preventDefault()
const input1 = document.querySelector("#input1").value
console.log(input1);
input1 = "dataMake"
}
}
};
new agGrid.Grid(eGridDiv, gridOptions)
fetch("https://www.ag-grid.com/example-assets/row-data.json")
.then(res => res.json())
.then(data => {
gridOptions.api.setRowData(data)
});
I'm assuming that you know how to set values in your form, and that you're just asking how to get the data from the grid.
So, if I understand correctly, you're asking about filling in multiple form fields, corresponding to multiple cells in grid row, when the row is clicked.
Your code looks correct except that you are using the onCellClicked property where you should be using onRowClicked.
With onCellClicked the param to the callback is the data backing the cell that was clicked, while with onRowClicked the param is the object backing the entire row.
I am working with ag-grid and I need to make a screenshot using html2canvas. When the table has vertical overflow it exceeds the container.
I tried changing the overflow property to hidden before exporting and still it fails. Do we have any workaround to achieve this?
hosted the sample in github https://dharanbro.github.io/sample/
<html>
<head>
<!-- reference the ag-Grid library-->
<script src="https://unpkg.com/ag-grid/dist/ag-grid.min.js"></script>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>
<!-- our application code -->
<script>
// specify the columns
var columnDefs = [
{headerName: "Make", field: "make"},
{headerName: "Model", field: "model"},
{headerName: "Price", field: "price"}
];
// specify the data
var rowData = [
{make: "Toyota", model: "Celica", price: 35000},
{make: "Ford", model: "Mondeo", price: 32000},
{make: "Porsche", model: "Boxter", price: 72000},
{make: "Toyota", model: "Celica", price: 35000},
{make: "Ford", model: "Mondeo", price: 32000},
{make: "Porsche", model: "Boxter", price: 72000},
{make: "Toyota", model: "Celica", price: 35000},
{make: "Ford", model: "Mondeo", price: 32000},
{make: "Porsche", model: "Boxter", price: 72000}
];
// let the grid know which columns and what data to use
var gridOptions = {
columnDefs: columnDefs,
rowData: rowData,
onGridReady: function (params) {
params.api.sizeColumnsToFit();
}
};
// wait for the document to be loaded, otherwise
// ag-Grid will not find the div in the document.
document.addEventListener("DOMContentLoaded", function() {
// lookup the container we want the Grid to use
var eGridDiv = document.querySelector('#myGrid');
// create the grid passing in the div to use together with the columns & data we want to use
new agGrid.Grid(eGridDiv, gridOptions);
});
function completeSnap(){
html2canvas(document.body).then(function(canvas) {
document.body.appendChild(canvas);
});
}
function tableSnap(){
html2canvas(document.getElementById("myGrid")).then(function(canvas) {
document.body.appendChild(canvas);
});
}
</script>
</head>
<body>
<h1>Simple ag-Grid Example</h1>
<!-- the div ag-Grid will use to render it's data -->
<div id="myGrid" style="height: 115px;width:500px" class="ag-theme-fresh"></div>
<button onclick="completeSnap()">Snap IT</button>
<button onclick="tableSnap()">Table IT</button>
</body>
</html>
using the latest version on html2canvas (https://html2canvas.hertzen.com/dist/html2canvas.js).
html2canvas is not screenshoting the page, it will regenerate the entire DOM that you have requested. Somehow their plugin not works as well (often) on some DOM style properties. See this page for explanation.
Try this one, based on your question, this code will work
document.getElementById("myGrid").style.overflow = 'hidden';
html2canvas(document.getElementById("myGrid")).then(function(canvas) {
document.body.appendChild(canvas);
});
But, if you want to get all results, you can use this one.
document.getElementById("myGrid").style.height = 'auto';
document.getElementById("myGrid").style.overflow = 'show';
html2canvas(document.getElementById("myGrid")).then(function(canvas) {
document.body.appendChild(canvas);
});
Cheers
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>
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, i.e.
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>
N.B. 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.
I try to add a button to the last column of my Gridx, however, the button is not shown and above the other table data the grid just says "loading...".
Cell Widget is required and declared, widgetInCell is set and onCellWidgetCreated function added. When replacing the onCellWidgetCreated function with alert, an alert message for each row is shown and the "loading..." disappears. My feeling is that the onCellWidgetCreated function is wrong?
My code looks like the following and when comparing it against some examples on the Gridx website I cannot find the problem.
require([
"gridx/Grid",
"gridx/core/model/cache/Sync",
"dojo/store/Memory",
"dojo/domReady!",
"gridx/modules/CellWidget",
"dijit/form/Button"
], function(Grid, Cache, Memory,Button,CellWidget,domConstruct){
var store = new Memory({
idProperty:"CategoryID",
data: jsondata
});
var grid = new Grid({
id:"gridId",
store: store,
cacheClass: Cache,
structure: [
{
id: "0",
field: "CategoryID",
name: "Kategorie (ID)",
width: "100px"
},
{
id: "1",
field: "CategoryName",
name: "Kategoriename"
},
{
id: "2",
field: "Attributes",
name: "Attribute"
},
{
id: "3",
field: "Actions",
name: "Aktion",
widgetsInCell: true,
onCellWidgetCreated: function(cellWidget, column){
var btn = new Button({
label: "Click me!"
});
btn.placeAt(cellWidget.domNode);
}
}
],
modules: [
CellWidget
]
});
grid.placeAt("aGrid");
grid.startup();
}
);
I came across anotheer problem with VirtualVScrolling and found out that this was due to a defective gridx css file which contained a custom layout.
When using the standard css file, "onCellWidgetCreated" worked for me as well.
I'm using the dojo grid cell formatter to display an inner grid within another grid. Even though the inner grid is added, it does not display on the HTML page cause its height and width are 0px.
My JSP page and the JS page where the grids are created is shown below. Any help will be appreciated.
My guess is that calling grid.startup() in the cell formatter is probably not the right place. But where should I move the startup() call to -or- is there something else that needs to be done to get the inner grid to render correctly.
----JSP file ----
<script type="text/javascript"> dojo.require("portlets.ListPortlet"); var <portlet:namespace/>args = { namespace: '<portlet:namespace/>', listDivId: 'listGrid' }; var <portlet:namespace/>controller = new portlets.ListPortlet(<portlet:namespace/>args); dojo.addOnLoad(function(){ <portlet:namespace/>controller.init(); }); </script>
</div>
----JS file ----
dojo.declare("portlets.ListPortlet", null, {
constructor: function(args){
dojo.mixin(this,args);
this.params = args;
},
init: function(){
var layout = [[
{field: 'site', name: 'Site', width: '30px' }
{field: 'name', name: 'Full Name', width: '100px'},
{field: 'recordStatus', name: 'Status', width: '80px' }
],[
{field: '_item', name: ' ', filterable: false, formatter: this.formatNotesTable, colSpan: 3 }
]];
this.grid = new dojox.grid.EnhancedGrid({
autoHeight: true,
autoWidth: true,
selectable: true,
query:{
fromDate: start,
toDate: end
},
rowsPerPage: 10
});
this.grid.placeAt(dojo.byId(this.listDivId));
this.dataStore = new dojox.data.JsonRestStore({target: dataURL, idAttribute: idAttribute});
this.grid.setStructure(layout);
this.grid.startup();
},
formatNotesTable(rowObj) {
var gridData = {
identifier:"id",
items: [
{id:1, "Name":915,"IpAddress":6},
{id:2, "Name":916,"IpAddress":7}
]
};
var gridStructure = [{
cells:[
[
{ field: "Name",
name: "Name",
},
{ field: "IpAddress",
name: "Ip Address" ,
styles: 'text-align: right;'
}
]
]
}];
var gridStore = new dojo.data.ItemFileReadStore( { data: gridData} );
var cpane = new dijit.layout.ContentPane ({
content: "inner grid should be displayed below"
});
var subgrid = new dojox.grid.DataGrid({
store: gridStore,
structure: gridStructure,
style: {width: "325px", height: "300px"}
});
subgrid.placeAt(cpane);
subgrid.startup();
return cpane;
}
}
I solved my problem by using a dojox.layout.TableContainer inside the EnhancedGrid.