I want to export aggrid data to Excel. But i want to export selected columns only. I didn't find any option to exclude columns while export.
Can anyone suggest how to export selected columns only.
You can define specific columns using the columnKeys parameter in exportDataAsExcel().
See the documentation here: https://www.ag-grid.com/javascript-grid/excel-export-api/#excelexportparams
Using 'columnKeys' in the params is the correct way to do this. For example you can grab your column field names and pass them in: In this example my field names are 'employeeNumber', 'firstLastName', and 'currentlyRequestedHours' which I grab from my columnDefs.
{
field: 'employeeNumber',
headerName: 'ID',
filter: 'text',
sortable: true,
filterParams: { suppressAndOrCondition: true },
},
{
autoHeight: true,
field: 'firstLastName',
headerName: 'Name',
sortable: true,
filter: 'text',
filterParams: { suppressAndOrCondition: true },
},
{
field: 'currentlyRequestedHours',
headerName: 'Pending Hours',
sortable: true,
valueFormatter: gridDateValueFormatter,
filter: 'agDateColumnFilter',
filterParams: { suppressAndOrCondition: true },
type: 'numericColumn',
}...
private params = {
columnKeys: ['employeeNumber', 'firstLastName', 'currentlyRequestedHours']
};
onBtExport() {
this.gridApi?.exportDataAsExcel(this.params);
}
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 trying to add a custom filter of using string similarity algorithm to the default text filters. Is there any way to do it?
class App extends Component {
constructor(props) {
super(props);
this.state = {
columnDefs: [
{
headerName: "Make",
field: "make",
sortable: true,
filter: true,
checkboxSelection: true,
},
...
],
...
}
}
}
In the code above, if I give true for the filter of Make column, the full list of default text filters are presented. But if I add filterParams.filterOptions as below
...
this.state = {
columnDefs: [
{
headerName: "Make",
field: "make",
sortable: true,
filter: "agTextColumnFilter",
filterParams: {
filterOptions: [
"similarTo",
{
displayKey: "similarTo",
displayName: "similar to",
test: function (filterValue, cellValue) {
...
return stringSimilarity > 0.8;
}
}
...]
}
}
... ]
}
Only "similarTo" filter is on the list of filters.
Is there any way to add this custom filter to the default text filters, including contains, not contains, equals, not equals, starts with, and ends with.
Ag grid comes up with a solution to add custom filters.
These documents are enough to understand how we can implement them.
DocumentLink : https://ag-grid.com/react-data-grid/filter-provided-simple/#custom-filter-options
I have an array with values array=[3,4].I have to display the ag-grid values if it matches with array values.This is what i tried so far:
Attached is the plunkr :https://plnkr.co/edit/fKrvfzFYjdLbTLjFkqpY?p=preview
var array=[3,4];
var columnDefs = [
{headerName: "Jobs",field: "job", width: 90},
{headerName: "Location", field: "loc", width: 120 },
{headerName: "Value", field: "value", width: 120 }];
var rowData =[{job:'Developer',loc:'X',value:1},
{job: 'Manager',loc:'Y',value:2},
{job: 'Musician',loc:'Z',value:3},
{job: 'Manager',loc:'A',value:4},
{job: 'Tester',loc:'B',value:5},
{job: 'DBA',loc:'C',value:6}
];
var gridOptions = {
defaultColDef: {
sortable: true
},
columnDefs: columnDefs,
animateRows: true,
enableRangeSelection: true,
rowData: rowData,
checkbox : true
};
How to display the grid when value field value matches with array values.
Here is a plunkr with a working example - https://plnkr.co/edit/xdwI0Tql9I5n71D4QSDy?p=preview
Add a custom cellRenderer function like so in the column definition of values column
{
headerName: "Value",
field: "value",
width: 120,
cellRenderer: params => array.includes(params.value) ? params.value : ''
}
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 } />
I have the following tagfield declaration:
{
xtype: 'tagfield',
fieldLabel: 'Sex',
labelAlign: 'right',
name: 'sex',
multiSelect: false,
queryMode: 'local',
displayField: 'sexName',
valueField: 'sex',
allowBlank: false,
flex: 1,
editable: true,
growMax: 45,
store: Ext.create('Ext.data.Store', {
autoLoad: true,
fields: ['sexName', 'sex'],
data: [{
sexName: 'mail',
sex: 'mail'
},{
sexName: 'femail',
sex: 'femail'
}]
})
}
When I try to set tagfield's value to a combobox, I would expect this to work but I get the following error in the console.
[E] Ext.form.field.ComboBox.doSetValue(): Cannot add values to non
multiSelect ComboBox Uncaught Error: Cannot add values to non
multiSelect ComboBox
What am I doing wrong?
Thanks for your help!
We have had similar problem. (We working with ExtJs 5 though)
We needed combo with free text input that allows only one value to be selected/entered at a time. So, we took TagField and set multiSelect to false.
It started behave weird and possibility of free text input has gone.
The solution, that I believe, will solve the problem of original question:
return multiSelect to be true again
add listener to change event and change the value to be the last selected by user
Using code example from question:
{
xtype: 'tagfield',
fieldLabel: 'Sex',
labelAlign: 'right',
name: 'sex',
multiSelect: true,
queryMode: 'local',
displayField: 'sexName',
valueField: 'sex',
allowBlank: false,
flex: 1,
editable: true,
growMax: 45,
listeners: {
change: function (field, newValue ,oldValue ,eOpts) {
newValue = newValue.filter(function(el) {
return el !== oldValue[0];
});
this.setValue(newValue );
}
}
},
...
}
The oldValue is an array that contains only one element (previous value). The newValue is an array that contains two elements: previous value and new selected value.