textMatcher is not marked as "e" but trying to implement it in community version, in order to add some special capabilities to the filtering, doesn't have any affect:
columnDefs = [ {
field: 'country',
filter: 'agTextColumnFilter',
filterParams: {
defaultOption: 'contains',
textMatcher: ({ filter, value, filterText }) => {
// return true/false according to some decision
},
},
......
Is it only available in enterprise version or do I need to define something else in order to use it?
Related
As per https://www.ag-grid.com/angular-data-grid/filter-provided-simple/, if we want to have 2 inputs for a filter option, we need to have 'numberOfInputs: 2'
Ex:
this.columnDefs = [
{
field: 'age',
filter: 'agTextColumnFilter',
filterParams: {
filterOptions: [
{
displayKey: 'inRange',
numberOfInputs: 2,
}
]
}
}
];
But, this does not work in ag-grid-angular v26.0.0. Any help to resolve this will be very much appreciated.
Please note:
i) I cannot use agNumberColumnFilter as I had to manipulate the comparator (used textCustomComparator) which was not possible as explained in Why is the ag-grid filter comparator not executing?
ii) I have put displayName & predicate function for filterOptions, but no use.
I am having problems using ag-grid valueFormatter and column filters (https://www.ag-grid.com/javascript-data-grid/filtering/).
I have a simple colDef:
{
headerName: 'My column',
field: 'myData',
hide: true,
valueFormatter: this.formatterBooleanToHuman,
},
the formatterBooleanToHuman is a simple code to change true to Yes and false to No.
It works as expected, the issue is that we are using column filters, and when I click on the filter I have true and false to select, if I select any of them, nothing returns from the filters because the value now is actually Yes and No.
I couldn't manage to have both of them working together. To have the column filter working properly I need to remove the valueFormatter, but I would like to have both working.
I tried to apply the valueFormatter function to filterParams.valueFormatter, it did change the values on the filter but something is failing, I am getting 2 No and 1 Yes, and none of them filter.
Any suggestions?
UPDATE:
So, I found a solution, but I am not convinced it is the right way to do it.
get getcolumnDef(): Array<ColDef> {
return [
{
headerName: 'Boolean Column',
field: 'booleanValue',
hide: true,
valueFormatter: this.formatterBooleanToHuman,
filterParams: {
valueGetter: (params) => this.filterBooleanValueGetter(params, 'booleanValue')
}
}
];
}
private filterBooleanValueGetter(params: ValueGetterParams, propertyName: string) {
let isDeleted = false;
const hasValue = !!params && !!params.data && params.data[propertyName];
if (hasValue) {
isDeleted = String(params.data[propertyName]) === 'true';
}
return isDeleted ? 'Yes' : 'No';
}
So, the valueGetter works as expected and makes my filter work, I just think it is a bit "dirty" to have it to work like that, I haven't found anything on the docs saying this is the way it needs to be done. So suggestions are more than welcome.
valueFormatter applies only to data in grid. However even if the filter shows true and false instead of formatted values, it should work correctly. If filtering does not work, it may indicate some other error in your code. Maybe you depend on this in formatterBooleanToHuman method?
Anyway to format values in filter, you should define filterParams.valueFormatter like this:
{
// ...
valueFormatter: this.formatterBooleanToHuman,
filterParams: {
valueFormatter: this.formatterBooleanToHuman
}
}
For some reason, the value given to filter formatter is string instead of boolean (bug in ag-grid?), you need to adjust that.
See complete example here: https://plnkr.co/edit/o3sN3GodqQumVe09
I am trying to use a complex object to group my ag grid rows. Object of my rowdata looks like this -
const rowData= {
id : '123',
name: 'dummy',
category: 'A',
group : {
name : 'dummyGroup',
id : '456',
category: 'A'
}
}
Now, I am using group object to group the rows. And according to this documentation https://www.ag-grid.com/javascript-data-grid/grouping-complex-objects/ I am using keyCreator as keyCreator: params => params.value.name . My group object is uniquely identified by combination of id and catogory.
The problem that I am facing is, as I am using group.name in the keyCreator, if I have two row data object whose group.names are same but id and category are different, ag grid is grouping those rows together. I understand that this is the behavior from ag grid. So can I get any workaround for it? I need to show name on group row. But to identify the groups differently I need to use id+catogory in keyCreator. How can I achieve this ?
You need to utilise the groupRowInnerRenderer property so you can group by a combination of the id and category fields, while displaying the name as the group.
const gridOptions = {
groupDisplayType: 'groupRows',
groupRowInnerRenderer: function (params) {
return params.node.childrenAfterFilter[0].data.name;
},
columnDefs: [
{ field: 'id' },
{ field: 'name' },
{ field: 'category' },
{
field: 'group',
valueFormatter: groupValueFormatter,
rowGroup: true,
keyCreator: function (params) {
return params.value.id + params.value.category;
},
},
],
};
Demo.
I am using ag-grid enterprise 20.2 using server side and have a column where I would like to use the agSetColumnFilter filter type. The column and filter display fine, but when I go to check a filter checkbox it returns from filterModel empty and no checkboxes are changed.
{
headerName: 'header,
field: 'field',
width: 150,
filter: 'agSetColumnFilter',
filterParams: {
values: (valuesParams) => {
const values = Object.entries(field_values).map(e => e[1].id);
valuesParams.success(values);
},
},
},
I am guessing that there is a callback or something to update the filter (setModel?), but I have not been able to sort out what the API is. Could someone let me know how to do this?
This looks to be a bug in the software. I changed to rowModelType="infinite" leaving almost everything else the same and it now works.
So I have a Grid setup that works with the Enterprise Row Model.
The columns are very dynamic and so the column defs are not known until the first query for rows is made to the server. This all works fine, but how can I set a default sort state when the column defs are not set until after the request has succeeded?
Once the grid has been set-up with the column defs you can just set the sort on any column
gridOptions.columnApi.getColumn(COLUMN_NAME).setSort("asc")
Adding a sort attribute to your colDef works too.
Example:
const columnDefs = [
{
headerName: 'Created Date',
field: 'CreateDate',
sort: 'desc',
sortingOrder: ['desc','asc'] //optional but for better sorting behaviour
}
]
Try this
const sort = [
{
colId: "firstName",
sort: "asc",
},
{
colId: "lastName"
},
];
this.gridApi.setSortModel(sort);