Support Forum
We have a bunch of react components for form fields that we would like to be able to use in the task edit popup window. I had a look through the code and docs and saw there is a widget system that allows adding extra form types but the widgets have to return a string which is rendered but they do not allow providing a react component and having it rendered in the edit form.
Some other plain JS libraries allow components from frameworks to be rendered like this https://www.ag-grid.com/javascript-grid-components/#registering-framework-components
Do you have any plans for supporting this use case? This is quite important to our ability to use the library.
Some other plain JS libraries allow components from frameworks to be rendered like this https://www.ag-grid.com/javascript-grid-components/#registering-framework-components
Do you have any plans for supporting this use case? This is quite important to our ability to use the library.
I'm currently looking at getting react component editors in the grid columns and I can see there is a similar set of events for cancelling the default process but it seems less simple to insert a custom element here as it has to be rendered in the spot of the cell as well as deal with the fact that the cell will be destroyed and recreated if it is scrolled out of view.
Do you have any suggestions for a way to modify the cell editor to be able to render react components?
Do you have any suggestions for a way to modify the cell editor to be able to render react components?
It's not supported at the moment I'm afraid. I've created a feature request: https://app.assembla.com/spaces/bryntum/tickets/9043-support-rendering-react-components-instead-of-grid-cell-editors/details
Pavlo Miklashevych
Sr. Frontend Developer
Hi Pavel,
I saw version 1.2 now has support for react components in cell editors. I gave this a test following the examples but I was unable to get any cell editors to work. From the example it looks like the editor property takes a function which returns a react component. This didn't work for me so I attempted to simplify things but I was unable to get any code running as a custom editor
I slightly modified this from the basic demo
When clicking on the name cell the regular editor opens and nothing is output in the console. Have I misunderstood the documentation/examples or is there a bug here?
I saw version 1.2 now has support for react components in cell editors. I gave this a test following the examples but I was unable to get any cell editors to work. From the example it looks like the editor property takes a function which returns a react component. This didn't work for me so I attempted to simplify things but I was unable to get any code running as a custom editor
I slightly modified this from the basic demo
import { Gantt, ProjectModel } from '../../build/gantt.module.js?436952';
import shared from '../_shared/shared.module.js?436952';
/* eslint-disable no-unused-vars */
const project = new ProjectModel({
transport : {
load : {
url : '../_datasets/launch-saas.json'
}
}
});
new Gantt({
adopt : 'container',
project : project,
columns : [
{
type : 'name',
field : 'name', width : 250,
editor: () => console.log('test')
}
]
});
project.load();
Hi!
editor in this case is just a config parameter which is not a function to be used at runtime.
If you use
You will see console output on initialization.
The code below can be used to create your own editor.
Don't forget to import Widget and BryntumWidgetAdapterRegister from bundle.
What exactly are you trying to do with your code?
editor in this case is just a config parameter which is not a function to be used at runtime.
If you use
editor : console.log('test')
The code below can be used to create your own editor.
class MyEditor extends Widget {
construct(config = {}, ...args) {
console.log('My editor create');
super.construct(config, args);
}
}
BryntumWidgetAdapterRegister.register('myEditor', MyEditor);
const project = new ProjectModel({
transport : {
load : {
url : '../_datasets/launch-saas.json'
}
}
});
new Gantt({
adopt : 'container',
project : project,
columns : [
{
type : 'name',
field : 'name',
width : 250,
editor : 'myEditor'
}
]
});
What exactly are you trying to do with your code?
Hi,
Thanks for the example code. This has got my basic test of printing to the console working. What I was actually trying to do in the end was get a react component rendered.
The react example code has this
I have attempted something similar
When I click on this cell instead of seeing an instance of ReactFieldWrapper I just see a regular text input editor and no errors.
This is the source for the ReactFieldWrapper component:
Thanks for the example code. This has got my basic test of printing to the console working. What I was actually trying to do in the end was get a react component rendered.
The react example code has this
{
field : 'draggable',
text : 'Draggable<div class="small-text">(React editor)</div>',
width : 120,
align : 'center',
editor : ref => <DemoEditor ref={ref}/>,
renderer : ({ value }) => value ? 'Yes' : 'No'
}
I have attempted something similar
{
field: `custom:${statusField.custom_field_id}`,
text: 'Status',
renderer: this.statusRenderer,
editor: ref => <ReactFieldWrapper ref={ref} />
},
This is the source for the ReactFieldWrapper component:
import React from 'react';
import PropTypes from 'prop-types';
export default class ReactFieldWrapper extends React.Component {
constructor() {
super();
this.state = {
value: null
};
}
// Called by gantt when editing has finished
getValue = () => {
this.state.value
}
// Called by gantt when editing has started
setValue = (value, cellEditorContext) => {
this.setState({ value });
}
isValid = () => {
return true;
}
focus = () => {
}
render() {
console.log('test')
return (
<h1> test </h1>
);
}
}