I like the ag-Grid because it's less buggy, fast and works with many frameworks.
So I tried the Tree Data, no need to tell the link between parents and children, simply lay down the data in structure, specify some options, Bingo! But, when I plug in my API, it tells me
"TypeError: rowData is undefined"
from inside of ag-grid.js even though Watch clearly shows it has the array. There are some answered Question here regarding customization with internal api. Mine is not.
I then use the official demo as a base, set up a Fiddler to grab the raw data in JSON replace demo data to make it hardcoded for a test to determine if it's problem with own API or something else. Here is the Plunker. Note it's totally based on the official javaScript Demo of Tree Data, Tree Data Example, the first one.
In case you don't want to see Plunker, here is my .js:
var columnDefs = [
{headerName: "Client", field: "Client", cellRenderer: 'group'},
{headerName: "Program", field: "Program"}
/*{headerName: "Group", field: "xgroup", cellRenderer: 'group'}, // cellRenderer: 'group'}, -- this "group" is one of the default value option for built-in cellRenderer function, not field.
//{headerName: "Athlete", field: "athlete"},
//{headerName: "Year", field: "year"},
{headerName: "Country", field: "country"}
*/
];
var myData = [
{
'Client': 'Goodle',
'Program': 'no grid',
'kids': []
},
{
'Client': 'Facebrook',
'Program': 'grids',
'kids': [
{
'Client': 'Facebrook',
'Program': 'ag-Grid'
},
{
'Client': 'Facebrook',
'Program': 'ui-grid'
}
]
}
/*{xgroup: 'Group A',
participants: [
/*{athlete: 'Michael Phelps', year: '2008', country: 'United States'},
{athlete: 'Michael Phelps', year: '2008', country: 'United States'},
{athlete: 'Michael Phelps', year: '2008', country: 'United States'}*/
/*]},
{xgroup: 'Group B', athlete: 'Sausage', year: 'Spaceman', country: 'Winklepicker',
participants: [
{athlete: 'Natalie Coughlin', year: '2008', country: 'United States'},
{athlete: 'Missy Franklin ', year: '2012', country: 'United States'},
{athlete: 'Ole Einar Qjorndalen', year: '2002', country: 'Norway'},
{athlete: 'Marit Bjorgen', year: '2010', country: 'Norway'},
{athlete: 'Ian Thorpe', year: '2000', country: 'Australia'}
]},
{xgroup: 'Group C',
participants: [
{athlete: 'Janica Kostelic', year: '2002', country: 'Crotia'},
{athlete: 'An Hyeon-Su', year: '2006', country: 'South Korea'}
]}*/
];
var gridOptions = {
columnDefs: columnDefs,
rowData: myData,
rowSelection: "single",
enableSorting: "true", unSortIcon: "true",
enableColResize: "true",
enableRangeSelection: "true",
suppressCellSelection: "false",
showToolPanel: "true",
supressCopyRowsToClipboard: true,
supressCellSelection: false,
getNodeChildDetails: getNodeChildDetails,
onGridReady: function(params) {
params.api.sizeColumnsToFit();
}
};
function getNodeChildDetails(rowItem) {
if (rowItem.Client) {
return {
group: true,
// open C be default
//expanded: rowItem.ClientName === 'Group C',
// provide ag-Grid with the children of this group
children: rowItem.kids,
// this is not used, however it is available to the cellRenderers,
// if you provide a custom cellRenderer, you might use it. it's more
// relavent if you are doing multi levels of groupings, not just one
// as in this example.
//field: 'group',
// the key is used by the default group cellRenderer
key: rowItem.Client
};
} else {
return null;
}
}
function onFilterChanged(value) {
gridOptions.api.setQuickFilter(value);
}
// setup the grid after the page has finished loading
document.addEventListener('DOMContentLoaded', function() {
var gridDiv = document.querySelector('#myGrid');
new agGrid.Grid(gridDiv, gridOptions);
});
HTML:
<html>
<head>
<!-- you don't need ignore=notused in your code, this is just here to trick the cache -->
<script src="https://ag-grid.com/dist/ag-grid/ag-grid.js"></script>
<script src="script.js"></script>
</head>
<body>
<input placeholder="Filter..." type="text"
onpaste="onFilterChanged(this.value)"
oninput="onFilterChanged(this.value)"
onchange="onFilterChanged(this.value)"
onkeydown="onFilterChanged(this.value)"
onkeyup="onFilterChanged(this.value)"/>
<div id="myGrid" class="ag-fresh" style="height: 450px; margin-top: 4px;"></div>
</body>
</html>
Need some experts!
You need to alter getNodeChildDetails to have this:
function getNodeChildDetails(rowItem) {
if (rowItem.Client && rowItem.kids && rowItem.kids.length > 0) {
As you have it you're telling the grid that any item with Client is a parent node, but what you really mean in your data is any item with Client AND kids is a parent.
Remember that the grid can have multiple levels so a child can be a parent too.
Related
On table creation, I am trying to HIDE a row of the table if a date is in the past. Appreciate the help big time! Unfortunately I can't figure out how to do this, and really could use the help. There is also a filter that I apply based on user drop down. I am using tabulator package as well as moment for date library
<script type="text/javascript" src="https://unpkg.com/tabulator-tables#4.9.3/dist/js/tabulator.min.js"></script>
<link href="https://unpkg.com/tabulator-tables#4.9.3/dist/css/materialize/tabulator_materialize.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js" integrity="sha512-qTXRIMyZIFb8iQcfjXWCO8+M5Tbc38Qi5WzdPOYZHIlZpzBHG3L3by84BBBOiRGiEb7KKtAOAs5qYdUiZiQNNQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<select id="filter-value">
<option value="">Select A Course</option>
<option value="">All</option>
<option value="Bronze">Bronze</option>
<option value="FirstAid">First Aid</option>
</select>
<script language="JavaScript">
//Define variables for input elements
var valueEl = document.getElementById("filter-value");
//Trigger setFilter function with correct parameters
function updateFilter() {
valueEl.disabled = false;
table.setFilter("course", "starts", valueEl.value);
// table.setFilter(filter, typeVal, valueEl.value);
// table.setFilter(filter, "like", valueEl.value);
}
//Update filters on value change
//document.getElementById("filter-field").addEventListener("change", updateFilter);
//document.getElementById("filter-type").addEventListener("change", updateFilter);
document.getElementById("filter-value").addEventListener("change", updateFilter);
//define some sample data
var tabledata = [
{ sortorder: "A100001", course: "Bronze Medallion with Emergency First Aid & CPR B Crash Course", price: "12", startdate: "Jan 21 2023" },
{ sortorder: "B300001", course: "Bronze Cross", price: "13", startdate: "May 12 1982", info: "Apr 4-May 2nd,<br /> 10am-4pm", pre: "" },
{ sortorder: "B300001", course: "Bronze Cross", price: "12", startdate: "Apr 12 1983", info: "", pre: "" },
{ sortorder: "C400001", course: "Christine Lobowski", price: "42", startdate: "May 22 1982", info: "", pre: "" },
{ sortorder: "A200001", course: "Bronze Medallion Recertification", price: "125", startdate: "Jan 8 1980", info: "", pre: "" },
{ sortorder: "D500001", course: "Margret Marmajuke", price: "16", startdate: "Jan 31 1999", info: "", pre: "" },
];
//create Tabulator on DOM element with id "example-table" RENDER THE TABLE
var table = new Tabulator("#example-table", {
height: 605, // set height of table (in CSS or here), this enables the Virtual DOM and improves render speed dramatically (can be any valid css height value)
data: tabledata, //assign data to table
layout: "fitDataFill",
groupBy: "course",
resizableColumns: false,
responsiveLayout: "collapse",
responsiveLayoutCollapseStartOpen: false,
columns: [ //Define Table Columns
{ formatter: "responsiveCollapse", width: 30, minWidth: 30, hozAlign: "center", resizable: false, headerSort: false },
{ title: "Sort Order", field: "sortorder" },
{ title: "Course", field: "course", width: 350, responsive: 0, headerSort: false },
{ title: "Price", field: "price", hozAlign: "left", headerSort: false },
{ title: "Start Date", field: "startdate", hozAlign: "center", headerSort: false, sorter: "date", cssClass:"date" },
{ title: "Course Information", field: "info", formatter: "html", headerSort: false },
{ title: "Pre-requisites", field: "pre", headerSort: false },
],
initialSort: [
{ column: "startdate", dir: "asc" }, //sort by this first asc desc
{ column: "sortorder", dir: "asc" }, //sort by this second you will see this on screen
],
initialFilter: [
{ field: "startdate", type: ">", value: "" }
],
});
You're comparing strings. I think any string will be '> ""' (or the opposite, no string will be '> ""' - either way, you're not going to get what you want)
Convert those dates to moment()'s (prolly with a mutator at data insertion might be best) and then use a datetime formatter to display them how you want and you will be able to compare/filter/sort them as numbers properly
I have a form with two chained comboboxes. The first chained combobox dictates the values that appear in the second. I have forceSelection:true on the second combobox so that when a user changes the first combo, the second will be set blank because it no longer will be a valid option. The chained combos function as expected but when I load a record into this form using getForm().loadRecord(record) the value for the first combo is set properly but the second is not unless I set forceSelection:false.
The following fiddle should make things pretty clear: sencha fiddle
Clicking "Load Record" should load in Fruits/Apple, but only Fruits is shown. Clicking "Load Record" a second time achieves the desired result. If you comment out forceSelection: true it works as expected but then the chained combos don't function as desired. Is there anything I'm doing wrong here?
It is not so easy. What is happening when you are running form.loadRecord(rec).
you set the FoodGroup combobox
you set the FoodName combobox. BUT the value is not there, because your filter did not switch to appropriate food groups. That is why commenting force selection helps. (That is why commenting filter also help).
turned on the filter of food names. Store now have new values.
You are clicking the button second time. The first combobox value is the same, filters are not trigged (triggered?), you already have appropriate values in the second store and the value is selected.
How to fix:
The fix is ugly. You can listen on store 'refresh' (it means the filters are triggered) and then set the second value (or set the values again).
Ext.define('Fiddle.view.FormModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.fiddle-form-model',
stores: {
foodgroups: {
fields: ['name'],
data: [{
foodgroupname: 'Fruits'
}, {
foodgroupname: 'Vegetables'
}]
},
foods: {
fields: ['foodgroupname', 'foodname'],
filters: {
property: 'foodgroupname',
value: '{selectedFoodgroup.foodgroupname}'
},
data: [{
foodname: 'Apple',
foodgroupname: 'Fruits'
}, {
foodname: 'Banana',
foodgroupname: 'Fruits'
}, {
foodname: 'Lettuce',
foodgroupname: 'Vegetables'
}, {
foodname: 'Carrot',
foodgroupname: 'Vegetables'
}]
}
}
});
Ext.define('Fiddle.view.Form', {
extend: 'Ext.form.Panel',
xtype: 'fiddle-form',
viewModel: {
type: 'fiddle-form-model'
},
title: 'Combos',
items: [{
xtype: 'combo',
itemId: 'FoodGroup', // To access FoodGroup
displayField: 'foodgroupname',
bind: {
store: '{foodgroups}',
selection: '{selectedFoodgroup}'
},
valueField: 'foodgroupname',
forceSelection: true,
name: 'foodgroup',
fieldLabel: 'Food Group',
value: 'Vegetables'
}, {
xtype: 'combo',
itemId: 'FoodName', // To access FoodName
bind: {
store: '{foods}'
},
queryMode: 'local',
forceSelection: true, //COMMENTING THIS OUT ACHIEVES DESIRED LOAD RECORD BEHAVIOR
displayField: 'foodname',
valueField: 'foodname',
name: 'food',
fieldLabel: 'Food',
value: 'Carrot'
}],
buttons: [{
text: 'Load Record',
handler: function (btn) {
// OUR UGLY FIX
var form = btn.up('form'),
foodGroupComboBox = form.down('combobox#FoodGroup'),
foodNameComboBox = form.down('combobox#FoodName'),
record = Ext.create('Ext.data.Model', {
foodgroup: 'Fruits',
food: 'Apple'
});
foodNameComboBox.getStore().on('refresh', function (store) {
form.loadRecord(record);
}, this, {
single: true
})
form.loadRecord(record);
}
}]
});
Ext.application({
name: 'Fiddle',
launch: function () {
var form = new Fiddle.view.Form({
renderTo: document.body,
width: 600,
height: 400
});
}
});
I need to autosize the columns width based on content. All columns resize just fine except for the groupColumnDef, for some reason the actualSize value is a lot smaller than what it should be.
I did not set minWidth/width/maxWidth in the column def.
What could be the issue?
// grid.component.html
<div style="text-align:center">
ag-grid Example
</div>
<ag-grid-angular #agGrid style="width: 100%; height: 500px;" class="ag-theme-balham" [gridOptions]="gridOptions"
(gridReady)="onGridReady($event)">
</ag-grid-angular>
// employee.ts
export interface Employee {
name: string;
age: number;
country: string;
year: number;
date: number;
month: string;
ssn: number;
address: string;
zipCode: number;
occupation: string;
employer: string;
employerAddress: string;
mobNum: number;
}
// grid-component.ts
import { Component, OnInit } from '#angular/core';
import { GridOptions } from 'ag-grid-community';
import { Employee } from './models/employee';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class GridComponent implements OnInit {
gridOptions: GridOptions;
constructor() {}
ngOnInit() {
this.setGridOptions();
}
setGridOptions() {
this.gridOptions = {
suppressColumnVirtualisation: true
} as GridOptions;
}
onGridReady(params) {
this.setData();
}
setData() {
this.gridOptions.api.setColumnDefs(this.getColumnDefinitions());
this.gridOptions.api.setRowData(this.getData());
this.autoSizeAll();
this.gridOptions.api.refreshCells();
}
getColumnDefinitions(): Array<any> {
return [
{
field: 'name',
headerName: 'Name'
},
{
field: 'age',
headerName: 'Age'
},
{
field: 'country',
headerName: 'Country'
},
{
headerName: 'Birth Day',
children: [
{
headerName: 'Year',
field: 'year'
},
{
headerName: 'Month',
field: 'month'
},
{
headerName: 'Date',
field: 'date'
}
]
},
{
field: 'ssn',
headerName: 'Social Security Number'
},
{
field: 'address',
headerName: 'Address'
},
{
field: 'zipCode',
headerName: 'Zip Code'
},
{
headerName: 'Occupation Details',
children: [
{
field: 'occupation',
headerName: 'Occupation'
},
{
field: 'employer',
headerName: 'Employer'
},
{
field: 'employerAddress',
headerName: 'Employer Address'
},
]
},
{
field: 'mobNum',
headerName: 'Mobile Number'
}
];
}
getData(): Employee[] {
return [
{
name: 'Mary Smith',
age: 25,
country: 'Australia',
year: 1990,
date: 14,
month: 'March',
ssn: 1234542792102229,
address: '31 Rainbow Rd, Towers Hill, QLD 4820 31 Rainbow Rd, Towers Hill, QLD 4820',
zipCode: 11350,
occupation: 'Engineer',
employer: 'MicroSoft',
employerAddress: '245 Rainbow Rd, Microsoft, Towers Hill, QLD 4820',
mobNum: 7156662910
},
{
name: 'Jeff Martin',
age: 30,
country: 'UK',
year: 1987,
date: 24,
month: 'December',
ssn: 1234542792102229,
address: '31 Rainbow Rd, Towers Hill, QLD 4820',
zipCode: 11350,
occupation: 'UI/UX Designer',
employer: 'Facebook India',
employerAddress: '17 Rainbow Rd, Towers Hill, QLD 4820',
mobNum: 7158462910
}
];
}
autoSizeAll() {
const allColumnIds = [];
this.gridOptions.columnApi.getAllColumns().forEach((column: any) => {
allColumnIds.push(column.colId);
});
this.gridOptions.columnApi.autoSizeColumns(allColumnIds);
}
}
Here what I have done is
In html - Bind gridOptions and onGridReady event
In Component
Initialize the grid options and set suppressColumnVirtualisation = true.
When the grid is ready set data to the grid by setting the column definitions and then row data.
Get the column ids of all the columns in the grid and set them in grid api autoSizeColumns.
autoSizeColumns() looks only at the cells already rendered on the screen. Therefore the column width is set based on what it sees. This happens due to column virtualization. So the columns not visible on the screen will not auto size.
This behavior can be bypassed simply by setting suppressColumnVirtualisation = true
Note that grid use this column virtualization to improve the
performance of the grid when there are large amount of columns to be
rendered.
It's like this (but start from 1):
Please note the number is for the row element of grid instead of row data of the source. So the number shown in the first cell of each rows should indicate the position of the current row (which starts from 1 for the first row) regardless the row data and the sorting criteria.
Update: The result is like this: https://jsfiddle.net/wp6o350z/
<script src="https://unpkg.com/ag-grid/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: 200px;width:500px;" class="ag-theme-balham"></div>
<script type="text/javascript" charset="utf-8">
// specify the columns
var columnDefs = [
{headerName: "#", field: "row", width: 30 },
{headerName: "Make", field: "make", width: 100 },
{headerName: "Model", field: "model", width: 100},
{headerName: "Price", field: "price", width: 100}
];
// specify the data
var rowData = [
{row: 1, make: "Toyota", model: "Celica", price: 35000},
{row: 2, make: "Ford", model: "Mondeo", price: 32000},
{row: 3, make: "Porsche", model: "Boxter", price: 72000},
{row: 4, make: "Toyota", model: "Celica", price: 35000},
{row: 5, make: "Ford", model: "Mondeo", price: 32000},
{row: 6, make: "Porsche", model: "Boxter", price: 72000},
{row: 7, make: "Toyota", model: "Celica", price: 35000},
{row: 8, make: "Ford", model: "Mondeo", price: 32000},
{row: 9, make: "Porsche", model: "Boxter", price: 72000}
];
// 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>
The problems in this sample are:
The row number is defined in the data, which is not supported in real case. Maintaining a row is difficult and slow since inserting from the beginning will need to update many rows.
Since the row number is defined in the data, after sorting you won't see the row number is randomized. I still want to see the row number start from 1 from the beginning.
Basically it's easier to be part of the grid feature, and many other grids (not limited to JS grids) support this. I'm wondering if it's easy to do it in with ag-grid.
Ag-grid now has a "valueGetter" for cells that takes an expression, so you can just use
columnDefs: [
{
headerName: "Row",
valueGetter: "node.rowIndex + 1"
},
(other columns)
]
In order to have it refresh after sorting, you need to call refreshCells:
onSortChanged(e: AgGridEvent) {
e.api.refreshCells();
}
If you are filtering, you would do the same thing on the 'filterChanged' event.
One way that we can use is:
create a custom component that implements "ICellRendererAngularComp" interface
refer to https://www.ag-grid.com/javascript-grid-cell-rendering-components/#example-rendering-using-angular-components
and implements agInit method like below:
import { ICellRendererAngularComp } from 'ag-grid-angular';
import { Component } from '#angular/core';
#Component({
selector: 'app-ag-grid-row-number',
templateUrl: './ag-grid-row-number.component.html',
styleUrls: ['./ag-grid-row-number.component.scss']
})
export class AgGridRowNumberComponent implements ICellRendererAngularComp {
rowNumber: number;
refresh(params: any): boolean {
return true;
}
agInit(params: import('ag-grid-community').ICellRendererParams): void {
this.rowNumber = params.rowIndex + 1;
}
afterGuiAttached?(params?: import('ag-grid-community').IAfterGuiAttachedParams): void {
}
}
In your view:
{{ rowNumber }}
finally in your list component:
public columnDefs = [
{headerName: 'row number', cellRendererFramework: AgGridRowNumberComponent},
... ]
Is there a way to get the results from a Dojo Grid to a report or PDF? Cant really find any info on that. Maybe convert the records in the Dojo Grid into HTML and then to a report?
This is what I am doing right now. Just need to figure out a way to get the results of the grid into html or some sort of report (PDF maybe)
HTML
id="gridNoColumnSets_impediments" class="gridclassGrid"
gridNoColumnSets_impediments = new (declare([Grid, Selection, ColumnSet]))({
// use Infinity so that all data is available in the grid
bufferRows: Infinity,
cellNavigation: false,
escapeHTMLInData: false,
showHeader: true,
noDataMessage: "No results for this search",
loadingMessage: "Loading data...",
selectionMode: "single",
}, "gridNoColumnSets_impediments");
gridNoColumnSets_impediments.on(".field-id:mouseover", selectStateimpediments);
var ColumnSets_impediments = [
[
[
{label: 'id', field: 'id', sortable: false},
{label: 'ID__', field: 'ID__'},
{label: 'IMPEDIMENT', field: 'IMPEDIMENT'},
{label: 'OTHER_NAME', field: 'OTHER_NAME'},
{label: 'RIVER', field: 'RIVER'},
{label: 'COUNTY', field: 'COUNTY'},
{label: 'HU_NAME', field: 'HU_NAME'},
{label: 'DAM_TYPE', field: 'DAM_TYPE'},
{label: 'OWNER', field: 'OWNER'},
{label: 'STATE_AGCY', field: 'STATE_AGCY'},
{label: 'FED_AGCY', field: 'FED_AGCY'}
]
],
];
gridNoColumnSets_impediments.set("columnSets", ColumnSets_impediments);
function updateGridimpediments(featureSet) {
var data = arrayUtils.map(featureSet.features, function (entry, i) {
return {
ID__: entry.attributes.ID__,
id: entry.attributes.OBJECTID,
IMPEDIMENT: entry.attributes.IMPEDIMENT,
OTHER_NAME: entry.attributes.OTHER_NAME,
RIVER: entry.attributes.RIVER,
COUNTY: entry.attributes.COUNTY,
HU_NAME: entry.attributes.HU_NAME,
DAM_TYPE: entry.attributes.DAM_TYPE,
OWNER: entry.attributes.OWNER,
STATE_AGCY: entry.attributes.STATE_AGCY,
FED_AGCY: entry.attributes.FED_AGCY
};
});
// If you use a store...
dataStore = new Memory({
"data": data,
"idProperty": "id"
});
gridNoColumnSets_impediments.set("store", dataStore);
gridNoColumnSets_impediments.startup();
}