Develop Reference

agGrid not defined using ag-grid-community

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

Add unique id to every row using ag-Grid

I used the ag-Grid plugin in javascript for my grid. My problem is figuring out how I can update the rows into database. How can I set a unique id to every row?
<div id="myGrid" style="height: 600px;" class="ag-theme-balham"></div>
<script type="text/javascript" charset="utf-8">
// 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: 'test', my_unique_id: '123'},
{make: "Ford", model: "Mondeo", price: 32000, my_unique_id: '42341'},
{make: "Porsche", model: "Boxter", price: 72000, my_unique_id: '567'}
];
// let the grid know which columns and what data to use
var gridOptions = {
columnDefs: columnDefs,
rowData: rowData
};
// 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);
</script>

On the definition of your columns columnDefs you need to add the key and, if you need, set hide: true to this data not appears on UI
var columnDefs = [
{headerName: "Make", field: "make"},
{headerName: "Model", field: "model"},
{headerName: "Price", field: "price"},
{headerName: "Key", field: "my_unique_id", hide = true},
];
See all properties for columns on ag-grid docs here: https://www.ag-grid.com/javascript-grid-column-properties/

I am not sure if you are aware of this, but ag-grid actually assigns a unique ID to every row, when the row data is set.
On of the ways to access the id for each row node would be to use the forEachNode() method, as specified within the ag-grid gridOptions API documentation. forEachNode() iterates all rows, and returns the data for each row.
Assuming you are using Vanilla JavaScript (without any frameworks such as React or Angular), you do the following to get the id
gridOptions.api.forEachNode(node => {
console.log(node.id);
// do the rest
});

{
headerName: "Num",
field: "id",
filter: true,
width: 150,
cellRendererFramework:(params)=>{
return <span>{params.rowIndex}</span>
}
},

How can I hide the pager in Kendo UI Grid when autoBind is set to false?

I have a Kendo UI Grid that has the "auto-bind" property set to false. I have also set the "pageable.alwaysVisible" property to false to hide the grid's pager when it's not needed.
The problem I'm having is that because the grid is not data bound when it first loads, the "alwaysVisible" property does not work and the pager is shown. At this stage I would expect the pager to be hidden as there is no data to be paged.
Is there anyway I can hide the pager on first load when the grid is not data bound?

It doesn't look like what you want is available out-of-the-box, but you could achieve it using a bit of CSS. This is probably a better approach than my previous answer, which in essence triggered the grid to bind itself anyway. How about hiding the pager initially until the grid is eventually bound, at which point it takes over management of the pager visibility?
<style>
#grid>.k-pager-wrap.k-grid-pager {
display: none;
}
</style>
<div id="grid"></div>
<button onclick="javascript:$('#grid').data('kendoGrid').dataSource.read()">Refresh</button>
<script>
$("#grid").kendoGrid({
columns: [
{ field: "productName" },
{ field: "category" }
],
dataSource: [
{ productName: "Tea", category: "Beverages" },
{ productName: "Coffee", category: "Beverages" },
{ productName: "Ham", category: "Food" },
{ productName: "Bread", category: "Food" }
],
pageable: {
pageSize: 3,
alwaysVisible: false
},
autoBind: false
});
</script>
Example here: https://dojo.telerik.com/EBaZAjAc

This looks like a quirk of the grid when it doesn't know that it has no data yet. Perhaps you could try pushing "no data" into your datasource in the first instance? The following snippet demonstrates your problem; un-commenting the last line fixes it:
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [
{ field: "productName" },
{ field: "category" }
],
dataSource: new kendo.data.DataSource(),
pageable: {
pageSize: 5,
alwaysVisible: false
},
autoBind: false,
});
//$("#grid").data("kendoGrid").dataSource.data([]);
</script>
Example here: https://dojo.telerik.com/OZAXugOt

You can use something like this:
dataBound: function(e){
if(e.sender.dataSource.total() <= e.sender.dataSource.pageSize()){
e.sender.pager.element.hide();
} else {
e.sender.pager.element.show();
}
Take a look at this example:
http://dojo.telerik.com/OhEDo

overflow issues in html2canvas

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

use of onCellWidgetCreated in Dojo Gridx (to add button to cell)

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.