Our state of the art Gantt chart


Post by Qwerty »

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.

Post by Qwerty »

I did some investigation and it seems like the best way to get this working right now is to use beforeTaskEdit to replace the task editor with our own react component and then set all the data on the task record provided by the event.

This seems like a perfectly fine solution.

Post by pmiklashevich »

Yes, that's correct!

Pavlo Miklashevych
Sr. Frontend Developer


Post by Qwerty »

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?

Post by pmiklashevich »

Pavlo Miklashevych
Sr. Frontend Developer


Post by Qwerty »

Thanks for opening the ticket Pavel,

Do you have any idea what kind of time frame we could see this feature release (weeks/months/this year)? We have almost finished our testing of the library and this is the only remaining requirement left.

Post by pmiklashevich »

We're going to have it done in 3-6 months roughly

Pavlo Miklashevych
Sr. Frontend Developer


Post by Qwerty »

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
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();
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?

Post by sergey.maltsev »

Hi!

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')
You will see console output on initialization.

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'
        }
    ]
});
Don't forget to import Widget and BryntumWidgetAdapterRegister from bundle.


What exactly are you trying to do with your code?

Post by Qwerty »

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
                        {
                            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} />
            },
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:
 
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>
    );
  }
}

Post Reply