Thanks, that worked!
There is a small change I’d like to make. It looks like the filter applied whenever you click out of the filter box. I’d like to make the Apply button work for this instead. When clicking outside the box, I’d like for the text to go back to whatever the filterText was originally (like how the regular filtering handles it). Do you know of a way to accomplish this?
Try this one:
dagfuncs.PersonFilter = forwardRef((props, ref) => {
const [filterText, setFilterText] = useState(null);
// expose AG Grid Filter Lifecycle callbacks
useImperativeHandle(ref, () => {
return {
doesFilterPass(params) {
const { api, colDef, column, columnApi, context } = props;
const { node } = params;
// make sure each word passes separately, ie search for firstname, lastname
let passed = true;
filterText
.toLowerCase()
.split(' ')
.forEach((filterWord) => {
const value = props.valueGetter({
api,
colDef,
column,
columnApi,
context,
data: node.data,
getValue: (field) => node.data[field],
node,
});
if (value.toString().toLowerCase().indexOf(filterWord) < 0) {
passed = false;
}
});
return passed;
},
isFilterActive() {
return filterText != null && filterText !== '';
},
getModel() {
if (!this.isFilterActive()) {
return null;
}
return { value: filterText };
},
setModel(model) {
setFilterText(model == null ? null : model.value);
},
afterGuiDetached() {
if (filterValue != filterText) {
var oldValue = filterText || ''
setFilterText('unused string that will never be typed because it needs to render as new')
setFilterText(oldValue)
}
}
};
});
var filterValue = JSON.parse(JSON.stringify(filterText));
setProps = ({value}) => {
filterValue = value
};
useEffect(() => {
props.filterChangedCallback();
}, [filterText]);
function buttonOnApply(){
setFilterText(filterValue)
};
function buttonOnRemove(){
setFilterText('')
};
return React.createElement(
'div',
{},
[
React.createElement(window.dash_core_components.Input, {type:'text', placeholder:'enter text', value:filterText, setProps, debounce: true}),
React.createElement('button', {onClick:buttonOnApply}, 'Apply'),
React.createElement('button', {onClick:buttonOnRemove}, 'Remove Filter'),
]
)
});
Thanks again @jinnyzor !
My only issue now is that whenever I add some testing code to check when rows are processed (below), it looks like the filter is running an update whenever it clears out the text (since its running the setFilterText). I was trying to disconnect the filterText from the overall filtering text so that I can only run setFilterText when the Apply button is pressed. I think I need to make a Parent Component that will handle this interaction, but I’m unsure if thats the route to go, and if so, I can’t quite figure out how to wire things up correctly. Or maybe there is a way to save the text globally? Do you have any suggestions?
doesFilterPass(params) {
console.log('doesFilterPass??');
The issue I was running into was the component wasnt rerendering unless the filterText changed.
Here is a version that might work:
dagfuncs.PersonFilter = forwardRef((props, ref) => {
const [filterText, setFilterText] = useState(null);
const [oldValue, setOldValue] = useState(null);
// expose AG Grid Filter Lifecycle callbacks
useImperativeHandle(ref, () => {
return {
doesFilterPass(params) {
const { api, colDef, column, columnApi, context } = props;
const { node } = params;
// make sure each word passes separately, ie search for firstname, lastname
let passed = true;
filterText
.toLowerCase()
.split(' ')
.forEach((filterWord) => {
const value = props.valueGetter({
api,
colDef,
column,
columnApi,
context,
data: node.data,
getValue: (field) => node.data[field],
node,
});
if (value.toString().toLowerCase().indexOf(filterWord) < 0) {
passed = false;
}
});
return passed;
},
isFilterActive() {
return filterText != null && filterText !== '';
},
getModel() {
if (!this.isFilterActive()) {
return null;
}
return { value: filterText };
},
setModel(model) {
setFilterText(model == null ? null : model.value);
},
afterGuiDetached() {
if (filterValue != filterText) {
setFilterText('unused string that will never be typed because it needs to render as new')
setFilterText(oldValue || '')
}
}
};
});
var filterValue = JSON.parse(JSON.stringify(filterText));
setProps = ({value}) => {
filterValue = value
};
useEffect(() => {
if ('unused string that will never be typed because it needs to render as new' != filterText && (oldValue || '') != filterText) {
setOldValue(filterText)
props.filterChangedCallback();
}
}, [filterText]);
function buttonOnApply(){
setFilterText(filterValue)
};
function buttonOnRemove(){
setFilterText('')
};
return React.createElement(
'div',
{},
[
React.createElement(window.dash_core_components.Input, {type:'text', placeholder:'enter text', value:filterText, setProps, debounce: true}),
React.createElement('button', {onClick:buttonOnApply}, 'Apply'),
React.createElement('button', {onClick:buttonOnRemove}, 'Remove Filter'),
]
)
});
Thanks again @jinnyzor !
I tested this out and it was able to do everything I was looking for. I’ll take some time to go through this code and learn why it works. Thanks again for all the help!
Overall it looks like the original docs can be reproduced with some enhancements. It would be good to have this be an official example for a new “Filter Component” section (under the Dash AG-Grid Components section) on the Plotly site. I can help contribute to this if you think its a good idea.
Hello @jinnyzor
I was testing out a few things and noticed that I am not able to take advantage agMultiColumnFilter (I have ag-grid enterprise). Whenever I try it out, I get this error “Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.”
I tried to place the component in the dashAgGridComponentFunctions.js file but that also didn’t work. Does dash allow a custom filter component to be used inside multiple filter components? I want to make sure its supported before I try too many things.
Below is the new column definition for the athlete field.
{ 'field': 'athlete', 'minWidth': 150,
'filter': 'agMultiColumnFilter',
'filterParams':{
'filters':[
{
'filter':{'function': 'PersonFilter' }
},
{
'filter':'agTextColumnFilter'
}
]
}
},
Filters is not connected to iterate through.
You can pass the whole filterParams a function I think and return exactly what you are looking for.
I’m sorry, I’m not sure what you mean exactly. The filters list does get iterated through if I provide default filter components. Its only when I add mine in that an error occurs.
Are you saying something like this? That filterParams can be a function?
{ 'field': 'athlete', 'minWidth': 150,
'filter': 'agMultiColumnFilter',
'filterParams':{
'function': [<return list of filter components>]
}
}
So far, moving the custom filter component to dashAgGridComponentFunctions.js works the “most” as in things render and clicks register, just no filtering is happening. Its saying I’m missing methods.
I would do something like this:
{ 'field': 'athlete', 'minWidth': 150,
'filter': 'agMultiColumnFilter',
'filterParams':{
'function': 'mycustomFilters(params)'
}
}
js file
PersonFilter = function (params) // definition
dagfuncs.mycustomFilters = function (params) {
return { 'filters':[
{
'filter': PersonFilter
},
{
'filter':'agTextColumnFilter'
}
]
}
}
This worked, thanks again!
I wouldn’t have expected this would be the way but I’m glad its possible. I’ll include this is the example I plan to make.
Hello @jinnyzor,
I tried to build a custom filter similar as above. Sadly, I don’t get it completely to work.
I have an infinite row model and hope to pass the filter parameter to the filterModel. When I use my custom filter, I can see that a new request is triggered, but the filter is not passed. In my dev tools I found that the methods “setModel()” and “getModel()” are missing AG Grid: Framework component is missing the method getModel()
I am not sure how to fix it and hope you might be able to help.
My filter looks like the following:
const [useImperativeHandle, useState, useEffect, forwardRef, Component] = [React.useImperativeHandle, React.useState, React.useEffect, React.forwardRef, React.component];
dagcomponentfuncs.SelectFilter = forwardRef((props, ref) => {
const [select, setSelect] = useState('all');
// Select options are the options passed in params
var selectOptions = props.select_options
// expose AG Grid Filter Lifecycle callbacks
useImperativeHandle(ref, () => {
console.log('test');
return {
doesFilterPass(params) {
console.log('filter passed');
return true;
},
isFilterActive() {
console.log('filter is active');
return true;
},
getModel() {
console.log("get model");
if (!this.isFilterActive()) {
return null;
}
console.log(select);
return { value: select };
},
setModel(model) {
console.log('model')
console.log(model);
},
};
});
useEffect(() => {
props.filterChangedCallback();
}, [select]);
setProps = ({value}) => {
// Click event on change we set the filterValue
console.log(value);
filterValue = value;
setSelect(props.value);
};
// Create the layout
var radio_items = [];
// Iterate over the items and make radio buttons
for (item in selectOptions) {
radio_items.push(React.createElement(window.dash_mantine_components.Radio, selectOptions[item]));
};
// make the filter
var RadioFilter = React.createElement(
'div',
{},
[
React.createElement(window.dash_mantine_components.RadioGroup, { orientation: 'vertical', setProps, debounce: true}, radio_items),
]
);
return RadioFilter;
});
Hello @simon-u,
This needs to be in the dagfuncs namespace dashAgGridFunctions, not dashAgGridComponentFunctions
Try it there and let me know.
Thank you for the swift answer. That was my mistake! Now it is working and I get my filter through to dash. Thank you.