Is it possible to access the row size in a custom cell editor as it's possible in a custom cell renderer to manipulate the height of the rows? I'm using the react wrapper for the grid.
Hello,
It took me some time to understand your question. If I got you right, you want to increase row hight when you start editing to allow more content to fit in the cell. Am I right? This is very easy to achieve due to our GridRowModel. It provides rowHeight field. So by setting the record.rowHeight, you can change the height of the row. You can increase the height on beforeCellEditStart and reset it on when editor is closed. For that you can use beforeFinishCellEdit. But this event is triggered only when the data is changed, otherwise cancelCellEdit is fired. Unfortunately, the context is already destroyed at this phase. I created a ticket to introduce "beforeCancelCellEdit" event. https://github.com/bryntum/support/issues/1832
Meanwhile please use this workaround. But keep in mind it relies on private function, so might stop working at any time. Should be removed as soon as the ticket is fixed.
import CellEdit from '../../lib/Grid/feature/CellEdit.js';
import GridFeatureManager from '../../lib/Grid/feature/GridFeatureManager.js';
// REMOVE THE WORKAROUND WHEN https://github.com/bryntum/support/issues/1832 IS FIXED
class MyCellEditor extends CellEdit {
static get $name() {
return 'MyCellEditor';
}
// OVERRIDE PRIVATE FUNCTION
getEditorListeners() {
return Object.assign(super.getEditorListeners(), {
beforecancel : 'onEditorBeforeCancel'
});
}
onEditorBeforeCancel(context) {
Object.assign(context, {
grid : this.grid,
editorContext : context.source.cellEditorContext
});
return this.grid.trigger('beforeCancelCellEdit', context);
}
}
GridFeatureManager.registerFeature(MyCellEditor);
new Grid({
listeners : {
beforeCellEditStart({ editorContext }) {
editorContext.__oldRowHeight = editorContext.record.rowHeight;
editorContext.record.rowHeight = 100;
},
beforeFinishCellEdit({ editorContext }) {
editorContext.record.rowHeight = editorContext.__oldRowHeight;
},
// This is available due to override
beforeCancelCellEdit({ editorContext }) {
editorContext.record.rowHeight = editorContext.__oldRowHeight;
}
},
features : {
myCellEditor : true,
cellEdit : false
},
Best regards,
Pavel
The same is true for React. Just need to put the override to the React wrapper and the feature to the list of features there.
Grid/examples/react/_shared/src/lib/BryntumGrid.js
import { Grid, ObjectHelper, Widget, CellEdit, GridFeatureManager } from 'bryntum-grid/grid.umd';
// REMOVE THE WORKAROUND WHEN https://github.com/bryntum/support/issues/1832 IS FIXED
class MyCellEditor extends CellEdit {
static get $name() {
return 'MyCellEditor';
}
// PRIVATE OVERRIDE
getEditorListeners() {
return Object.assign(super.getEditorListeners(), {
beforecancel : 'onEditorBeforeCancel'
});
}
onEditorBeforeCancel(context) {
Object.assign(context, {
grid : this.grid,
editorContext : context.source.cellEditorContext
});
return this.grid.trigger('beforeCancelCellEdit', context);
}
}
GridFeatureManager.registerFeature(MyCellEditor);
// Defines a React component that wraps Bryntum Grid
class BryntumGrid extends Component {
/**
* @deprecated in favor of gridInstance
*/
get gridEngine() {
console.warn('gridEngine is deprecated. Use gridInstance instead.')
return this.gridInstance;
}
// defaults for grid. Feel free to adjust it
static defaultProps = {};
featureRe = /Feature$/;
/* #region Features */
features = [
'myCellEditorFeature', // FEATURE IS ADDED TO THE LIST
'cellEditFeature',
Grid/examples/react/javascript/basic/src/containers/Main.js
<BryntumGrid
ref={'grid'}
listeners={{
beforeCellEditStart({ editorContext }) {
editorContext.__oldRowHeight = editorContext.record.rowHeight;
editorContext.record.rowHeight = 100;
},
beforeFinishCellEdit({ editorContext }) {
editorContext.record.rowHeight = editorContext.__oldRowHeight;
},
// This is available due to override
beforeCancelCellEdit({ editorContext }) {
editorContext.record.rowHeight = editorContext.__oldRowHeight;
}
}}
myCellEditorFeature={true}
cellEditFeature={false}
Cheers!
Hi!
I can see all the events working as intended with your override. But how would I make the grid re-render to reflect the new 'rowHeight' in a react context since it wont actually change the displayed height only by setting 'rowHeight'.
Also, I need to set the height independently within the cellEditor since the height is dynamic.
With the cellEditor i can do with by accessing the 'size' object from the component props, and after changing 'size.height' i trigger 'refreshRows' on the grid.
Hello,
I checked the solution in the react/javascript/basic demo before give it to you. It worked the same good as for vanilla example. Please provide a testcase showing your issue and describe the problem more detailed. It seems I'm missing something. Please describe what you're trying to change, when, and why. https://www.bryntum.com/docs/grid/#Grid/data/GridRowModel#field-rowHeight is a data field, so when it gets changed, the grid displays the changes automatically.
Best,
Pavel
I have a column setup like this:
interface Renderer {
record: any,
value: Array<string>,
size: any,
cellElement: any,
}{
field: 'tags',
text: 'Tags',
flex: 1,
renderer: (data: Renderer): ReactElement => <Tags {...data} />,
editor: (ref: RefObject<any>): ReactElement => <TagsEdit ref={ref} />,
} <Grid
ref={grid}
// rowHeight={50}
autoHeight={true}
treeFeature={true}
store={new Store({
tree: true,
data: [],
})}
columns={columns}
renderRows={onRenderRows}
listeners={{
beforeCellEditStart ({ editorContext }): void {
editorContext.__oldRowHeight = editorContext.record.rowHeight;
editorContext.record.rowHeight = 400;
},
beforeFinishCellEdit ({ editorContext }): void {
editorContext.record.rowHeight = editorContext.__oldRowHeight;
grid.current.gridEngine.refreshRows();
},
beforeCancelCellEdit ({ editorContext }): void {
editorContext.record.rowHeight = editorContext.__oldRowHeight;
},
}}
myCellEditorFeature={true}
cellEditFeature={false}
/>And in <Tags /> component i can set the size of the cell within 'componenetDidMount' by accessing the 'this.props.size', and I would like to do something similar in <TagsEdit> component =)
Hi hypergenekim,
I am not 100% sure of your implementation, but I applied some change that will give you some idea what to do to have the rowHeight of the records edited available and changeable on your editor component.
I have applied some changes on DemoEditor that already exists to be easier on https://www.bryntum.com/examples/grid/react/javascript/basic/build/index.html demo.
For this example wasn't necessary to use the overrides, you have to just change the Grid/examples/react/javascript/basic/src/components/DemoEditor.js file like this:
First, add a new state config cellEditorContext:
state = {
...
cellEditorContext : null
};
after that, you can change the setValue method to:
// here the cellEditorContext parameter is available with all data about the current editing record
// it will be available globally for your state
setValue(value, cellEditorContext = this.state.cellEditorContext) {
this.setState({
value,
cellEditorContext
});
// just for test: if editor value is true, change the height to 100 but if false, change to 200
this.state.cellEditorContext.record.rowHeight = value ? 100 : 200;
}
After that you can run the app and change the values on ORIGINAL 6 column to see columns changing the height:
Please let us know if this is what you was looking for.
This works perfectly, thanks!