I have rows of data and some columns may be empty. I want to insert a - on columns with no data.
Is there a way to place default value of cells if no data is returned for that column?
Something like this?
columnDefs: [
{name: 'ColumnA', field: 'columnA', default: '-'}
]
I've tried this and it didnt work:
columnDefs: [
{name: 'ColumnA',
field: 'columnA',
valueSetter: params=>{
if(params.value === ''){
return '-'
}
}}
]
columnDefs: [
{name: 'ColumnA',
field: 'columnA',
valueFormatter: params=>{
if(params.value === ''){
return '-'
}
}}
]
Related
Is there a way to add a column filter for empty values?
I see we can filter for equal, not equal, ... but I'd like to have an option to filter a column so it returns rows where the column is empty or null.
I had the same issue with empty cells
You should use 'Blank option'
const filterOptions = [
'empty',
{
displayKey: 'blanks',
displayName: 'Blanks',
test: function (filterValue, cellValue) {
return cellValue == undefined;
},
hideFilterInput: true,
},
'equals',
'notEqual',
'lessThan',
'lessThanOrEqual',
'greaterThan',
'greaterThanOrEqual',
'inRange'
];
columnDef = [
{
headerName: 'someValue', field: 'someValue',
filter: 'agNumberColumnFilter',
filterParams: {
filterOptions: filterOptions
}
},]
'empty' - is equal to 'Please choose option'
more inforamtion you can find here: https://www.ag-grid.com/javascript-grid-filter-provided-simple/#blank-cells-date-and-number-filters
I m using Nestjs + sequelize-typescript + postgresql.
I would like to select rows in table that content contains specific word. this is my code :
async findUsers(searchedWord: string): Promise<users[]> {
return await this.USER_REPOSITORY.findAll({
attributes: [ 'id', 'name' ],
where: {
content: '%'+ searchedWord +'%'
},
order: [ [ 'id', 'ASC' ] ]
});
}
}
but this method didn't work ! Any suggestions ?
I have to implement editable/non-editable of the corresponding cells in a particular row depending on datatype selection. When we select datatype="NUMERIC" then it should be editable particular that cell in a row only under Min and Max column instead of full column.
Example
```
$scope.gridOptions.onCellValueChanged = function(event) {
if (event.colDef.field === 'validation_type') {
if (event.newValue.name === 'NUMERIC') {
event.columnApi.getColumn('min_value').editable = true;
}
}
}
```
Then it allow all cells of that column editable. But as per my requirement it should be editable only one particular cell. Please suggest.
Screenshots:
The easiest place to do this is in your column definitions:
const columnDefs = [
// ...
{
headerName: 'Data Type',
field: 'validation_type',
},
{
headerName: 'min',
field: 'min_value',
editable: function(params) {
// allow `min_value` cell to be edited for rows with correct `validation_type`
return params.node.data.validation_type === 'NUMERIC';
},
},
{
headerName: 'max',
field: 'max_value',
editable: function(params) {
return params.node.data.validation_type === 'NUMERIC';
},
},
// ...
];
How to hide the column in AG-Grid and also it should not be displayed in Tool Panel...
var columnDefs = [{ headerName: "Stone_ID", field: "Stone_ID", width: 100, hide: "true" }]
You can set the column property of suppressToolPanel to true to achieve that.
var columnDefs = [
{
headerName: "Stone_ID",
field: "Stone_ID",
width: 100,
hide: true,
suppressToolPanel: true
}
]
If you are looking for dynamically show/hide columns follow below:
You can use either setColumnVisible or setColumnsVisible.
NOTE: those functions expect a colKey(s) which is related to the field you set in columnDefs.
columnDefs = [
{
headerName: "Name",
field: "name", // => that!
width: 150
},
{
headerName: "Last Name",
field: "last_name", // => that!
width: 150
},
// ...
];
When using setColumnVisible you can show/hide a single column
gridOptions.columnApi.setColumnVisible('name', false) //In that case we hide it
When using setColumnsVisible you can show/hide multiple columns
gridOptions.columnApi.setColumnsVisible(['name', 'last_name'], true) //In that case we show them
To do this programatically you can use:
Hide columns:
this.agGrid.columnApi.setColumnsVisible(["COL_ID_1", "COL_ID_2"], false);
Show columns:
this.agGrid.columnApi.setColumnsVisible(["COL_ID_1", "COL_ID_2"], true);
To do this for a whole column group you can use:
const group = this.columnApi.getColumnGroup("MY_GROUP");
group.children.forEach(child => this.columnApi.setColumnsVisible(child, false));
Posting late but It may helpful for others with some extra details:
If you want to hide your column on the grid you can use hide property to hide that column from the grid.
Only hide from grid colDef example:
colMainDef = [
{
headerName: 'Approved',
field: 'status',
hide: true
}]
But the same column will still be accessible on the side menu panel if you want to hide it from the side menu you can use one more property suppressColumnsToolPanel by making this true it will hide the column from the side menu.
Hide column from the grid as well as from side panel colDef example:
colMainDef = [
{
headerName: 'Approved',
field: 'status',
suppressColumnsToolPanel: true,
hide: true,
}]
Hope this will helps to hide/show columns as per your requirements.
var columnDefs = [{ headerName: "Stone_ID", field: "Stone_ID", width: 100, hide: true }]
{
...,
hide: true,
suppressColumnsToolPanel: true
}
In the package.json:
"dependencies": {
"#ag-grid-community/angular": "^24.1.0",
"#ag-grid-enterprise/all-modules": "^24.1.0",
...
}
hide: should get the value true, not the string "true" (like width: gets 100, not "100")
Just add "hide: true" in your column definition.
Ex:
var columnDefs = [{ headerName: "ABC", field: "XYZ", hide: true }]
hide column on load
{
headerName: 'ROE',
field: 'roe',
width: 100,
hide: true
},
based on selection you can show/hide it using
example
this.gridColumnApi.setColumnVisible('roe',true);
We can hide column dynamically in the following way using onColumnVisible listen event
const onColumnVisible = useCallback(params => {
if (params.source === 'toolPanelUi') {
const colId = params.column ? [ params.column.colId ] : params.columns.map(col => col.colId)
const value = columns.map(v => {
if (v.colId === colId.find(c => c === v.colId)) {
params.visible ? v.hide = false : v.hide = true
}
return v
})
if (value) {
setColumns(value)
}
}
}, [ gridParams, setColumns ])
<Grid onColumnVisible={onColumnVisible } />
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();
}