Premium support for our pure JavaScript UI components


Post 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?


Post 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.

Best regards,
Márcio


Post 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?


Post 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.

Best regards,
Márcio


Post 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.


Post 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.


Post 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
}

Best regards,
Márcio


Post 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.


Post 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.

Best regards,
Márcio


Post Reply