Skip to content

Instantly share code, notes, and snippets.

@jcsjcs

jcsjcs/load_grid.html

Last active August 5, 2017 08:16
Show Gist options
  • Save jcsjcs/9acd390bec34201025402bcb9aadd69f to your computer and use it in GitHub Desktop.
Save jcsjcs/9acd390bec34201025402bcb9aadd69f to your computer and use it in GitHub Desktop.
Download ZIP
AG Grid valueGetter always returns blank
Raw
load_grid.html
<html>
<head>
<script src="dist/ag-grid-enterprise.js"></script>
</head>
<body>
<h1>Simple ag-Grid Example</h1>
<div id="myGrid" style="height: 100%;" class="ag-blue" data-gridurl="/list/menu_definitions/grid" data-grid="grid">
<script type="text/javascript">
(function() {
const hrefSimpleFormatter = function hrefSimpleFormatter(params) {
const val = params.value;
return `<a href="${val.split('|')[0]}">${val.split('|')[1]}</a>`;
};
const translateColDefs = function translateColDefs(columnDefs) {
const newColDefs = [];
let newCol = {};
columnDefs.forEach((col) => {
newCol = {};
for (const attr in col) {
if (attr === 'cellRenderer') {
// Take string value of attr and change to js function
if (col[attr] === 'hrefSimpleFormatter') {
newCol[attr] = hrefSimpleFormatter;
}
// ... several more renderers...
} else if (attr === 'cellEditor') {
// ... more string -> function converters
} else if (attr === 'valueGetter') {
if (col[attr] === 'blankWhenNull') {
newCol.valueGetter = function(params) { return params.value? params.value: ""; }; // THIS ALWAYS RETURNS ''.
} else {
// newCol[attr] = col[attr];
}
} else {
newCol[attr] = col[attr];
}
};
newColDefs.push(newCol);
});
return newColDefs;
};
document.addEventListener('DOMContentLoaded', function() {
var gridDiv = document.querySelector('#myGrid');
var gridOptions = {
enableColResize: true,
enableSorting: true,
enableFilter: true,
suppressScrollLag: true,
enableRangeSelection: true,
enableStatusBar: true,
suppressAggFuncInHeader: true,
};
new agGrid.Grid(gridDiv, gridOptions);
jsonLoad( function(data) {
var newColDefs;
newColDefs = translateColDefs(data.columnDefs);
gridOptions.api.setColumnDefs(newColDefs);
gridOptions.api.setRowData(data.rowDefs);
});
});
})();
function jsonLoad(callback) {
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://localhost:9293/grid_json'); // by default async
xhr.responseType = 'json'; // in which format you expect the response to be
xhr.onload = function() {
if(this.status == 200) {// onload called even on 404 etc so check the status
callback(this.response);
}
};
xhr.onerror = function() {
console.log('loading data error');
};
xhr.send();
}
</script>
</body>
</html>
Raw
result_of_grid_json.json
{
"columnDefs": [
{
"headerName": "",
"width": 60,
"suppressMenu": true,
"suppressSorting": true,
"suppressMovable": true,
"suppressFilter": true,
"enableRowGroup": false,
"enablePivot": false,
"enableValue": false,
"suppressCsvExport": true,
"suppressToolPanel": true,
"valueGetter": "[{\"text\":\"Functional Area\",\"is_submenu\":true,\"items\":[{\"text\":\"edit functional area\",\"url\":\"/security/functional_areas/functional_areas/$col0$/edit\",\"col0\":\"functional_area_id\",\"icon\":\"fa-edit\",\"title\":\"Properties\",\"popup\":true},{\"text\":\"delete functional area\",\"url\":\"/security/functional_areas/functional_areas/$col0$\",\"col0\":\"functional_area_id\",\"prompt\":\"Are you sure?\",\"method\":\"delete\",\"icon\":\"fa-remove\",\"hide_if_present\":\"program_id\"}]},{\"text\":\"sep01\",\"is_separator\":true},{\"text\":\"Program\",\"is_submenu\":true,\"items\":[{\"text\":\"new program\",\"url\":\"/security/functional_areas/programs/$col0$/new\",\"col0\":\"functional_area_id\",\"icon\":\"fa-plus\"},{\"text\":\"edit program\",\"url\":\"/security/functional_areas/programs/$col0$/edit\",\"col0\":\"program_id\",\"icon\":\"fa-edit\",\"hide_if_null\":\"program_id\"},{\"text\":\"delete program\",\"url\":\"/security/functional_areas/programs/$col0$\",\"col0\":\"program_id\",\"prompt\":\"Are you sure?\",\"method\":\"delete\",\"icon\":\"fa-remove\",\"hide_if_null\":\"program_id\",\"hide_if_present\":\"id\"},{\"text\":\"re-order program functions\",\"url\":\"/security/functional_areas/programs/$col0$/reorder\",\"col0\":\"program_id\",\"icon\":\"fa-sort\",\"title\":\"Re-order\",\"popup\":true,\"hide_if_null\":\"id\"}]}, {\"text\":\"sep02\",\"is_separator\":true},{\"text\":\"Program Function\",\"is_submenu\":true,\"items\":[{\"text\":\"new program function\",\"url\":\"/security/functional_areas/program_functions/$col0$/new\",\"col0\":\"program_id\",\"icon\":\"fa-plus\",\"hide_if_null\":\"program_id\"},{\"text\":\"edit program function\",\"url\":\"/security/functional_areas/program_functions/$col0$/edit\",\"col0\":\"id\",\"icon\":\"fa-edit\",\"hide_if_null\":\"id\"},{\"text\":\"delete program function\",\"url\":\"/security/functional_areas/program_functions/$col0$\",\"col0\":\"id\",\"prompt\":\"Are you sure?\",\"method\":\"delete\",\"icon\":\"fa-remove\",\"hide_if_null\":\"id\"},{\"text\":\"restrict program function to specific users\",\"url\":\"/security/functional_areas/program_functions/$col0$/link_users\",\"col0\":\"id\",\"icon\":\"fa-lock\",\"hide_if_null\":\"id\"}]}]",
"colId": "action_links",
"cellRenderer": "crossbeamsGridFormatters.menuActionsRenderer"
},
{
"headerName": "F. Id",
"field": "functional_area_id",
"hide": false,
"headerTooltip": "F. Id",
"enableValue": true,
"valueGetter": "blankWhenNull",
"cellClass": "grid-number-column",
"width": 100
},
{
"headerName": "P. Id",
"field": "program_id",
"hide": false,
"headerTooltip": "P. Id",
"enableValue": true,
"valueGetter": "blankWhenNull",
"cellClass": "grid-number-column",
"width": 100
},
{
"headerName": "PF. Id",
"field": "id",
"hide": false,
"headerTooltip": "PF. Id",
"enableValue": true,
"enableRowGroup": true,
"enablePivot": true,
"valueGetter": "blankWhenNull",
"cellClass": "grid-number-column",
"width": 100
},
{
"headerName": "Group name",
"field": "group_name",
"hide": false,
"headerTooltip": "Group name",
"enableRowGroup": true,
"enablePivot": true,
"valueGetter": "blankWhenNull"
},
{
"headerName": "Program function name",
"field": "program_function_name",
"hide": false,
"headerTooltip": "Program function name",
"enableRowGroup": true,
"enablePivot": true,
"valueGetter": "blankWhenNull"
},
{
"headerName": "Url",
"field": "url",
"hide": false,
"headerTooltip": "Url",
"enableRowGroup": true,
"enablePivot": true,
"valueGetter": "blankWhenNull"
},
{
"headerName": "Program function sequence",
"field": "program_function_sequence",
"hide": false,
"headerTooltip": "Program function sequence",
"enableValue": true,
"valueGetter": "blankWhenNull",
"cellClass": "grid-number-column",
"width": 100
},
{
"headerName": "Restricted user access",
"field": "restricted_user_access",
"hide": false,
"headerTooltip": "Restricted user access",
"enableRowGroup": true,
"enablePivot": true,
"valueGetter": "blankWhenNull",
"cellRenderer": "crossbeamsGridFormatters.booleanFormatter",
"cellClass": "grid-boolean-column",
"width": 100
},
{
"headerName": "Active",
"field": "pf_active",
"hide": false,
"headerTooltip": "Active",
"enableRowGroup": true,
"enablePivot": true,
"valueGetter": "blankWhenNull",
"cellRenderer": "crossbeamsGridFormatters.booleanFormatter",
"cellClass": "grid-boolean-column",
"width": 100
},
{
"headerName": "Functional area name",
"field": "functional_area_name",
"hide": false,
"headerTooltip": "Functional area name",
"enableRowGroup": true,
"enablePivot": true,
"rowGroupIndex": 1,
"rowGroup": true,
"valueGetter": "blankWhenNull"
},
{
"headerName": "Active",
"field": "f_active",
"hide": false,
"headerTooltip": "Active",
"enableRowGroup": true,
"enablePivot": true,
"valueGetter": "blankWhenNull",
"cellRenderer": "crossbeamsGridFormatters.booleanFormatter",
"cellClass": "grid-boolean-column",
"width": 100
},
{
"headerName": "Created at",
"field": "f_created_at",
"hide": false,
"headerTooltip": "Created at",
"enableRowGroup": true,
"enablePivot": true,
"valueGetter": "blankWhenNull"
},
{
"headerName": "Updated at",
"field": "f_updated_at",
"hide": false,
"headerTooltip": "Updated at",
"enableRowGroup": true,
"enablePivot": true,
"valueGetter": "blankWhenNull"
},
{
"headerName": "Program name",
"field": "program_name",
"hide": false,
"headerTooltip": "Program name",
"enableRowGroup": true,
"enablePivot": true,
"rowGroupIndex": 2,
"rowGroup": true,
"valueGetter": "blankWhenNull"
},
{
"headerName": "Active",
"field": "p_active",
"hide": false,
"headerTooltip": "Active",
"enableRowGroup": true,
"enablePivot": true,
"valueGetter": "blankWhenNull",
"cellRenderer": "crossbeamsGridFormatters.booleanFormatter",
"cellClass": "grid-boolean-column",
"width": 100
},
{
"headerName": "Created at",
"field": "p_created_at",
"hide": false,
"headerTooltip": "Created at",
"enableRowGroup": true,
"enablePivot": true,
"valueGetter": "blankWhenNull"
},
{
"headerName": "Updated at",
"field": "p_updated_at",
"hide": false,
"headerTooltip": "Updated at",
"enableRowGroup": true,
"enablePivot": true,
"valueGetter": "blankWhenNull"
},
{
"headerName": "Created at",
"field": "pf_created_at",
"hide": false,
"headerTooltip": "Created at",
"enableRowGroup": true,
"enablePivot": true,
"valueGetter": "blankWhenNull"
},
{
"headerName": "Updated at",
"field": "pf_updated_at",
"hide": false,
"headerTooltip": "Updated at",
"enableRowGroup": true,
"enablePivot": true,
"valueGetter": "blankWhenNull"
}
],
"rowDefs": [
{
"functional_area_id": 10,
"program_id": 12,
"id": null,
"functional_area_name": "A has second level",
"f_active": true,
"f_created_at": "2017-01-01 00:00:00 +0200",
"f_updated_at": "2017-01-01 00:00:00 +0200",
"program_name": "Second level (no 3rd level)",
"p_active": true,
"p_created_at": "2017-01-01 00:00:00 +0200",
"p_updated_at": "2017-01-01 00:00:00 +0200",
"group_name": null,
"program_function_name": null,
"url": null,
"program_function_sequence": null,
"restricted_user_access": null,
"pf_active": null,
"pf_created_at": null,
"pf_updated_at": null
},
{
"functional_area_id": 6,
"program_id": null,
"id": null,
"functional_area_name": "B has no second level",
"f_active": true,
"f_created_at": "2017-01-01 00:00:00 +0200",
"f_updated_at": "2017-01-01 00:00:00 +0200",
"program_name": null,
"p_active": null,
"p_created_at": null,
"p_updated_at": null,
"group_name": null,
"program_function_name": null,
"url": null,
"program_function_sequence": null,
"restricted_user_access": null,
"pf_active": null,
"pf_created_at": null,
"pf_updated_at": null
},
{
"functional_area_id": 2,
"program_id": 5,
"id": 38,
"functional_area_name": "Master files",
"f_active": true,
"f_created_at": "2017-01-01 00:00:00 +0200",
"f_updated_at": "2017-01-01 00:00:00 +0200",
"program_name": "accounts",
"p_active": true,
"p_created_at": "2017-01-01 00:00:00 +0200",
"p_updated_at": "2017-01-01 00:00:00 +0200",
"group_name": null,
"program_function_name": "list accounts",
"url": "/party_manager/account/list_accounts",
"program_function_sequence": 1,
"restricted_user_access": false,
"pf_active": true,
"pf_created_at": "2017-01-01 00:00:00 +0200",
"pf_updated_at": "2017-01-01 00:00:00 +0200"
},
{
"functional_area_id": 2,
"program_id": 5,
"id": 39,
"functional_area_name": "Master files",
"f_active": true,
"f_created_at": "2017-01-01 00:00:00 +0200",
"f_updated_at": "2017-01-01 00:00:00 +0200",
"program_name": "accounts",
"p_active": true,
"p_created_at": "2017-01-01 00:00:00 +0200",
"p_updated_at": "2017-01-01 00:00:00 +0200",
"group_name": null,
"program_function_name": "search accounts",
"url": "/party_manager/account/search_accounts_flat",
"program_function_sequence": 2,
"restricted_user_access": false,
"pf_active": true,
"pf_created_at": "2017-01-01 00:00:00 +0200",
"pf_updated_at": "2017-01-01 00:00:00 +0200"
},
{
"functional_area_id": 2,
"program_id": 5,
"id": 40,
"functional_area_name": "Master files",
"f_active": true,
"f_created_at": "2017-01-01 00:00:00 +0200",
"f_updated_at": "2017-01-01 00:00:00 +0200",
"program_name": "accounts",
"p_active": true,
"p_created_at": "2017-01-01 00:00:00 +0200",
"p_updated_at": "2017-01-01 00:00:00 +0200",
"group_name": null,
"program_function_name": "find accounts",
"url": "/party_manager/account/search_accounts_hierarchy",
"program_function_sequence": 3,
"restricted_user_access": false,
"pf_active": true,
"pf_created_at": "2017-01-01 00:00:00 +0200",
"pf_updated_at": "2017-01-01 00:00:00 +0200"
},
{
"functional_area_id": 2,
"program_id": 5,
"id": 41,
"functional_area_name": "Master files",
"f_active": true,
"f_created_at": "2017-01-01 00:00:00 +0200",
"f_updated_at": "2017-01-01 00:00:00 +0200",
"program_name": "accounts",
"p_active": true,
"p_created_at": "2017-01-01 00:00:00 +0200",
"p_updated_at": "2017-01-01 00:00:00 +0200",
"group_name": null,
"program_function_name": "new account",
"url": "/party_manager/account/new_account",
"program_function_sequence": 4,
"restricted_user_access": false,
"pf_active": true,
"pf_created_at": "2017-01-01 00:00:00 +0200",
"pf_updated_at": "2017-01-01 00:00:00 +0200"
},
{
"functional_area_id": 2,
"program_id": 5,
"id": 42,
"functional_area_name": "Master files",
"f_active": true,
"f_created_at": "2017-01-01 00:00:00 +0200",
"f_updated_at": "2017-01-01 00:00:00 +0200",
"program_name": "accounts",
"p_active": true,
"p_created_at": "2017-01-01 00:00:00 +0200",
"p_updated_at": "2017-01-01 00:00:00 +0200",
"group_name": null,
"program_function_name": "list account types",
"url": "/party_manager/account/list_account_types",
"program_function_sequence": 5,
"restricted_user_access": false,
"pf_active": true,
"pf_created_at": "2017-01-01 00:00:00 +0200",
"pf_updated_at": "2017-01-01 00:00:00 +0200"
},
{
"functional_area_id": 2,
"program_id": 5,
"id": 43,
"functional_area_name": "Master files",
"f_active": true,
"f_created_at": "2017-01-01 00:00:00 +0200",
"f_updated_at": "2017-01-01 00:00:00 +0200",
"program_name": "accounts",
"p_active": true,
"p_created_at": "2017-01-01 00:00:00 +0200",
"p_updated_at": "2017-01-01 00:00:00 +0200",
"group_name": null,
"program_function_name": "new account type",
"url": "/party_manager/account/new_account_type",
"program_function_sequence": 6,
"restricted_user_access": false,
"pf_active": true,
"pf_created_at": "2017-01-01 00:00:00 +0200",
"pf_updated_at": "2017-01-01 00:00:00 +0200"
},
{
"functional_area_id": 2,
"program_id": 5,
"id": 44,
"functional_area_name": "Master files",
"f_active": true,
"f_created_at": "2017-01-01 00:00:00 +0200",
"f_updated_at": "2017-01-01 00:00:00 +0200",
"program_name": "accounts",
"p_active": true,
"p_created_at": "2017-01-01 00:00:00 +0200",
"p_updated_at": "2017-01-01 00:00:00 +0200",
"group_name": null,
"program_function_name": "add acc to party_role",
"url": "/party_manager/account/add_account_party_role",
"program_function_sequence": 7,
"restricted_user_access": false,
"pf_active": true,
"pf_created_at": "2017-01-01 00:00:00 +0200",
"pf_updated_at": "2017-01-01 00:00:00 +0200"
},
{
"functional_area_id": 2,
"program_id": 5,
"id": 45,
"functional_area_name": "Master files",
"f_active": true,
"f_created_at": "2017-01-01 00:00:00 +0200",
"f_updated_at": "2017-01-01 00:00:00 +0200",
"program_name": "accounts",
"p_active": true,
"p_created_at": "2017-01-01 00:00:00 +0200",
"p_updated_at": "2017-01-01 00:00:00 +0200",
"group_name": null,
"program_function_name": "find accs for party role",
"url": "/party_manager/account/find_account_party_role",
"program_function_sequence": 8,
"restricted_user_access": false,
"pf_active": true,
"pf_created_at": "2017-01-01 00:00:00 +0200",
"pf_updated_at": "2017-01-01 00:00:00 +0200"
}
]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment