I have an AG Grid with a dropdown control.
I’m following the pattern of using dashAgGridFunctions.js (like below) and the cellEditorParams property of the column.
This basically works, but I want the user to be able to enter a value that is not in the dropdown as well.
So the idea is, the dropdown will show the most common values for the given column from database results, but the user can also enter any text they want.
Is this possible/straightforward?
I haven’t written any javascript in quite a while, so I’m hoping this is a common pattern that already exists.
Thanks in advance.>
var dagfuncs = window.dashAgGridFunctions = window.dashAgGridFunctions || {};
dagfuncs.dynamicTrueFalseOptions = function(params) {
return {
values: [‘True’, ‘False’],
};
}dagfuncs.DCC_Dropdown = class {
// gets called once before the renderer is usedinit(params) {
// create the cell
this.params = params;
this.ref = React.createRef();// function for when Dash is trying to send props back to the component / server var setProps = (props) => { if (props.value) { // updates the value of the editor this.value = props.value; // re-enables keyboard event delete params.colDef.suppressKeyboardEvent // tells the grid to stop editing the cell params.api.stopEditing(); // sets focus back to the grid's previously active cell this.prevFocus.focus(); } } this.eInput = document.createElement('div') // renders component into the editor element ReactDOM.render(React.createElement(window.dash_core_components.Dropdown, { options: params.values, value: params.value, ref: this.ref, setProps, style: {width: params.column.actualWidth}, }), this.eInput) // allows focus event this.eInput.tabIndex = "0" // sets editor value to the value from the cell this.value = params.value;}
// gets called once when grid ready to insert the element
getGui() {
return this.eInput;
}focusChild() {
// enter keyboard event
const keyboardEvent = new KeyboardEvent(‘keydown’, {
code: ‘Enter’,
key: ‘Enter’,
charCode: 13,
keyCode: 13,
view: window,
bubbles: true
});// needed to delay and allow the component to render setTimeout(() => { var inp = this.eInput.getElementsByClassName('Select-control')[0] inp.tabIndex = '1' inp.focus() // disables keyboard event this.params.colDef.suppressKeyboardEvent = (params) => { const gridShouldDoNothing = params.editing return gridShouldDoNothing; } // shows dropdown options inp.dispatchEvent(keyboardEvent) }, 100)}
// focus and select can be done after the gui is attached
afterGuiAttached() {
// stores the active cell
this.prevFocus = document.activeElement// adds event listener to trigger event to go into dash component this.eInput.addEventListener('focus', this.focusChild()) // triggers focus event this.eInput.focus();}
// returns the new value after editing
getValue() {
return this.value;
}// any cleanup we need to be done here
destroy() {
// sets focus back to the grid’s previously active cell
this.prevFocus.focus();
}
}
