Page 1 of 1

[REACT] Scheduler custom column component

Posted: Wed Aug 10, 2022 5:17 pm
by ofirk

Hi,
im receiving the following warning in my app:
BryntumSchedulerComponent development warning!
"columns" is a static config option for component constructor only. No runtime changes are supported!

in my Scheduler config object i have a columns property with custom renderers:

{
    columns: [
        {
            headerRenderer: this.columnHeaderRenderer, 
            field: 'name', 
            width: 165, 
            editor: false, 
            renderer: this.columnRenderer
        }
    ]
}

the renderers return some JSX:

  columnRenderer = ({ value, record }) => {
    return (
      <div>
        <Link label={value} id={record.id} />
        <span>{record.time}</span>
      </div>
    )
  }
  columnHeaderRenderer = ({ value, record }) => {
    return (
      `<div>
        <div class="column-header-resource">${this.resourcesHeaderLabel}</div>
        <div class="column-header-percent">
            <span class="column-header-percent">${this.props.data.percent.toString()}%</span>
            <span>${this.totalLabel}</span>
            </div>
      </div>`
    );
  }

what could be the issue?


Re: [REACT] Scheduler custom column component

Posted: Wed Aug 10, 2022 6:48 pm
by marcio

Hey ofirk,

Probably is the same situation as described in this post viewtopic.php?p=105431#p105431.

Perhaps wrapping the config in a useMemo will work for you?? If that solution mentioned in the post doesn't work for you, could you please share a sample project (without the node_modules folder) so we can debug the code better and check a possible solution?

Also, as the message says, configs are not supposed to be updated during runtime, to work like that, you need to check the properties section, that are the ones that are possible to be updated during runtime.


Re: [REACT] Scheduler custom column component

Posted: Wed Aug 10, 2022 7:55 pm
by ofirk
marcio wrote: Wed Aug 10, 2022 6:48 pm

Hey ofirk,

Probably is the same situation as described in this post viewtopic.php?p=105431#p105431.

Perhaps wrapping the config in a useMemo will work for you?? If that solution mentioned in the post doesn't work for you, could you please share a sample project (without the node_modules folder) so we can debug the code better and check a possible solution?

Also, as the message says, configs are not supposed to be updated during runtime, to work like that, you need to check the properties section, that are the ones that are possible to be updated during runtime.

Thanks marcio, but suppose the column renderer function/component needs to receive props and update in runtime, how would i keep it updated via bryntum props api? i couldnt find a reference for this case in the docs, perhaps you could point me in the right direction?


Re: [REACT] Scheduler custom column component

Posted: Wed Aug 10, 2022 8:03 pm
by marcio

Hi ofirk,

Not sure if I understand correctly, but the renderer/headerRenderer will be configured once, after that, every time the store gets updated, it'll trigger a Bryntum's render event, which will run the functions provided (columnRenderer and columnHeaderRenderer) with the updated values, so you won't need to set that direct as a prop.

If you need to update some information, you update the record in the Store, and all the UI should be updated automatically.

Let me know if that clarifies your question.


Re: [REACT] Scheduler custom column component

Posted: Wed Aug 10, 2022 8:26 pm
by ofirk

Ok i think i get it now, i didnt configure any store data for that column header. i figured i could receive props externally to the grid.
so if i understand correctly i need to create a store field for the column header and pass whatever the renderer consumes, as data updates to the grid's store.

Thanks.


Re: [REACT] Scheduler custom column component

Posted: Thu Aug 11, 2022 9:07 pm
by ofirk

Hi again, now updating the column store is working and updating the column header but i noticed a new issue,
when i click on an event in the gantt and then click on the gantt background i receive this error in the console:

Uncaught TypeError: DomDataStore.get(...).row.removeCls is not a function
    at Scheduler.onElementClick (scheduler.module.js?66cd:110962:1)
    at Scheduler.onElementClick (scheduler.module.js?66cd:164215:1)
    at functionChainRunner (scheduler.module.js?66cd:40665:1)
    at plugInto.<computed> [as onElementClick] (scheduler.module.js?66cd:40638:1)
    at Scheduler.onHandleElementClick (scheduler.module.js?66cd:110941:1)
    at Scheduler.handleEvent (scheduler.module.js?66cd:110770:1)
    at HTMLDivElement.handler (scheduler.module.js?66cd:17856:1)

my component looks something like this:

export class Scheduler extends React.PureComponent {

  constructor(props) {
    super(props);
    this.columns = this.getColumns();
  }
  
componentDidUpdate(){ const scheduler = this.schedulerRef?.schedulerInstance; const newSchedulerData = [...scheduler.columns.data] newSchedulerData[0].total = this.props.data.total scheduler.columns.data = newSchedulerData }
getColumns = () => [ { headerRenderer: this.columnHeaderRenderer, renderer: this.columnRenderer, field: 'name', width: 165, editor: false, }, ]
columnHeaderRenderer = (data) => { return ( `<div> <div class="column-header-total"> <span class="column-header-total-value">${data.column?.data?.total ?? ''}%</span> </div> </div>` ); }
columnRenderer = ({ value, record }) => { return ( <div> <Link label={value} id={record.id} /> <span>{` (${record.t})`}</span> </div> ) }
getSchedulerConfig = () => { ... columns: this.columns .... }
setSchedulerRef = (r) => { this.schedulerRef = r; };
render(){ return ( <BryntumScheduler ref={this.setSchedulerRef} {...this.getSchedulerConfig()} /> ) }

on componentDidUpdate i update the columns store with the new data.
if i remove the column store update logic im not receiving the above error.


Re: [REACT] Scheduler custom column component

Posted: Thu Aug 11, 2022 9:39 pm
by marcio

Have you tried to use the data property instead of columns.data?? https://www.bryntum.com/docs/scheduler/api/Grid/view/GridBase#property-data

componentDidUpdate(){
	const scheduler = this.schedulerRef?.schedulerInstance;
	const newSchedulerData = [...scheduler.data]
	newSchedulerData[0].total = this.props.data.total
	scheduler.data = newSchedulerData
}

Re: [REACT] Scheduler custom column component

Posted: Thu Aug 11, 2022 10:09 pm
by ofirk

I tried it now but changing data property does not trigger headerRenderer function.
i just puts the new 'total' field in the first element of the scheduler.data array.


Re: [REACT] Scheduler custom column component

Posted: Fri Aug 12, 2022 11:35 pm
by marcio

I see, could you please set up a minimal case project with all your configuration?? With that will be a lot easier to debug and find the proper way to help you there.