Our pure JavaScript Scheduler component


Post by sygmatel »

Hi !

I recently upgraded to Scheduler v4.1.0 and I got an new error rising since then when using the GroupFeature.

Here is the error in the console :

error.png
error.png (81.84 KiB) Viewed 1470 times

The error is thrown when my wrapper updates (using ComponentDidUpdate) and tries to update the scheduler stores with my Redux store data.

erro2r.png
erro2r.png (32.43 KiB) Viewed 1470 times

Since I don't have any error when I disable the feature, it seems to be a problem with my data structure dans the group feature, maybe during the initial sorting ?

Here is how i set the group feature :

      <BryntumScheduler
        ref={schedulerRef}
        [...]
        
groupFeature={{ field: 'agency', }} />

Here are my models.

	// Resources
	resources: {
              fields: [
                {name: 'id', dataSource: '@id'},
                {name: 'firstName', dataSource: 'firstName'},
                {name: 'lastName', dataSource: 'lastName'},
                {name: 'agency', dataSource: 'productionCenter.name'},
              ],
         }
         
// Events fields: [ {name: 'id', dataSource: '@id'}, {name: 'name', dataSource: 'oT.address.label'}, {name: 'startDate', dataSource: 'startDate'}, {name: 'endDate', dataSource: 'endDate'}, {name: 'duration', dataSource: 'estimatedDuration'}, {name: 'eventColor', dataSource: 'interventionProgression.color', defaultValue: '#9e9e9e'}, {name: 'eventStyle', defaultValue: 'plain'}, {name: 'durationUnit', defaultValue: 's'}, ],

As you can see I try to group using the agency field which is mapped from a subnested object property of my resources objects. My resource model has a 'productionCenter' field and I want to group them using the name of that productionCenter.

I also attached JSON sample of the data so you can have a look at it if needed.
As i said, this is a new error. The group feature worked well before I updated from v4.1.0-beta-3 to v4.1.0.

Thanks in advance for the help !

Attachments
data.zip
(38.63 KiB) Downloaded 66 times

Post by saki »

Would you please post also the showcase that we can run, investigate and debug?


Post by sygmatel »

Hi Saki !

i tried to create a runnable showcase based on your React + Redux example but I can't reproduce the issue. Any idea where this error could come from ?
Tell me what other info I could gave you to help debug this.

Also noticed that the [shift] + click on resources header throws the same error so this confirms my opinion that I comes from the sorting required for grouping.

By the way is there any way to disable the [shift] + clicking control ?


Post by mats »

Very hard to say with so little info.

By the way is there any way to disable the [shift] + clicking control ?

Afraid not, but we definitely want to help fix this bug. Will be easy once we have a clear test case.


Post by sygmatel »

Hi mats !
I actually found out that the issue comes from the ResourceInfoColumn renderer. Indeed, I use a custom renderer (using your renderer function) which return a React component to render the resource cells which could explain the "Cannot convert a Symbol value [eg React Component] to a string". When I don't config the renderer function I don't have any error and the Group feature works well.

Here is my columns config :

        columns={[{
          type: 'resourceInfo',
          width: 200,
          renderer: params => <ResourceItem showWorkload={schedulerConfig.resources.showWorkload} {...params} />,
          editor: false,
          sortable: false,
          enableHeaderContextMenu: false,
          enableCellContextMenu: false,
          showColumnPicker: false,
          htmlEncode : false
        }]}
       

However, I was able to use React component in the renderer function in Scheduler v4.0.8 and in your simple demo you only define HTML through JSX for the resource cell renderer, not React Component.

Is it then possible to use React Component in the resourceInfo renderer in v4.1.0 ? What is the proper way to do it ?

Already tried to set the htmlEncode property to false but it's not working either.


Post by sygmatel »

Well, I actually managed to make it works using a template column type and replacing the renderer function by the template function.

        columns={[{
          type: 'template',
          width: 200,
          template: record => <ResourceItem showWorkload={schedulerConfig.resources.showWorkload} {...record} />,
          editor: false,
          sortable: false,
          enableHeaderContextMenu: false,
          enableCellContextMenu: false,
          showColumnPicker: false,
          htmlEncode : false
        }]}
        

Post by mats »

Ok that's the right approach, ResourceInfoColumn is a pre-built column not intended to be overridden like that. Thanks for sharing your solution! :)


Post Reply