[REACT] : Unable to access data inside a custom tab in TaskEdit popup

[bhriguj]

Hi,

We are working with Bryntum Gantt, and want to add a custom tab in the task edit. Within the tab, we have two fields (textfield) which need to show activity data. The data that needs to be shown in an Array of Objects, and even though we are able to access all other data fields, this specific field (which is an array of objects) is not accessible.

Field that needs to be rendered within the custom tab:
ActivityCodes : [
{Code_Value: '20', Code_Name: 'Responsibility'},
{Code_Value: '01', Code_Name: 'Printing'}
]

import { TaskEdit, TaskEditConfig } from '@bryntum/gantt';

const getActivityCodeTabTaskEditConfig: () => object | boolean | Partial<TaskEditConfig> = () => {
    return {
      newTab          : {
                // Tab is a FormTab by default
                title         : 'ACTIVITY CODE',
                weight        : 100,
                items         : {
                  field1 : {
                    type   : 'textfield',
                    weight : 710,
                    label  : 'Description',
                    name   : 'acitivityCodes', // Name of the field matches data field name, so value is 
                                 // loaded/saved automatically - Does not display anything
                    renderer    : ({ value } : {value: any}) => {
                              console.log('value', value) // logs nothing 
                              return value;
                    },
                }
                }
              },
    }
  }

  export default getActivityCodeTabTaskEditConfig;

[marcio]

Hello bhriguj,

Just to confirm, there is a typo in the name of the property that you've shared, it's activityCodes and not acitivityCodes. If you fix that, the issue remains??

[bhriguj]

Hi Marcio,

It is a typo and I have tried it with the correct spellings, and the issue still persists. All other fields from the task data are accessible except for this field. I have also tried using it with a Grid column (instead of a textfield), and I was still not able to access the data within the renderer or otherwise. I can share that implementation too, if you'd like to see.

[marcio]

Hey bhriguj,

Yes, an example would help a lot, you can check the guidelines here viewtopic.php?f=1&t=772

Also, you can check in our advanced demo how to add a custom field to a TaskModel (just to be sure that is also set correctly) https://bryntum.com/products/gantt/examples/advanced/

We'll be waiting for the sample project.

[bhriguj]

Hey Marcia, thanks for a quick reply.

Just to be clear, the code I have provided is for a workable example, so I think am injecting the customizable tab correctly, because other data fields show up correctly. Below, I am going to provide two examples :

Example 1. The customizable tab showing 'name' and 'percentDone' from the task data. Overall code is the exact same and only the data fields have been changed to show that the customizable tab works correctly (overall). (see attachment 1 for additional info)

Example 2. The customizable tab showing 'Code_Value' and 'Code_Name' from the task data. Overall code is the exact same and only the data fields have been changed to show that the customizable tab isn't showing the data in the 'activityCodes' field. (see attachment 2 for additional info.)

Example 1 -

import { TaskEdit, TaskEditConfig } from '@bryntum/gantt';

const getActivityCodeTabTaskEditConfig: () => object | boolean | Partial<TaskEditConfig> = () => {
    return {
	newTab          : {
                // Tab is a FormTab by default
                title         : 'ACTIVITY CODE',
                weight        : 100,
                items         : {
                  field1 : {
                    type   : 'textfield',
                    weight : 710,
                    label  : 'Activity Name',
                    name   : 'name', // Name of the field matches data field name, so value is loaded/saved automatically,
                     renderer    : ({ value } : {value: any}) => {
                               console.log('value') // logs nothing
                               return value;
                    },
                    flex : 1
                },
                field2 : {
                  type   : 'textfield',
                  weight : 710,
                  label  : 'Percentage Done',
                  name   : 'percentDone', // Name of the field matches data field name, so value is loaded/saved automatically,
                  renderer    : ({ value } : {value: any}) => {
                             console.log('value') // logs nothing
                             return value;
                    },
                  flex: 1
                  }
                }
              },
        }
   }

Example 2 -

import { TaskEdit, TaskEditConfig } from '@bryntum/gantt';

const getActivityCodeTabTaskEditConfig: () => object | boolean | Partial<TaskEditConfig> = () => {
    return {
	newTab          : {
                // Tab is a FormTab by default
                title         : 'ACTIVITY CODE',
                weight        : 100,
                items         : {
                  field1 : {
                    type   : 'textfield',
                    weight : 710,
                    label  : 'Code Value',
                    name   : 'activityCodes[0].Code_Value', // Name of the field matches data field name, so value is loaded/saved 		 
                                   automatically,
                    renderer    : ({ value } : {value: any}) => {
                               console.log('value') // logs nothing
                               return value;
                     },
                    flex : 1
                },
                field2 : {
                  type   : 'textfield',
                  weight : 710,
                  label  : 'Code Name',
                  name   : 'activityCodes[0].Code_Name', // Name of the field matches data field name, so value is loaded/saved 
                                automatically,
                  renderer    : ({ value } : {value: any}) => {
                             console.log('value') // logs nothing
                             return value;
                    },
                  flex: 1
                  }
                }
              },
        }
   }

How can I get the rendered to show the data that is available? Currently it logs nothing. Additionally, is there any special way to access the data stored in an array on the data field.

[tasnim]

Hi,
Have you defined those fields in taskStore?

https://bryntum.com/products/gantt/docs/api/Gantt/model/TaskModel

class MyTaskModel extends TaskModel {
  static get fields() {
      return [
          { name: 'importantDate', type: 'date' }
      ]
  }

Please upload your test case here which we can run with npm i and npm start so we can debug it and give you the solution right ASAP.
This will boost the assistance

Good Luck ,
Tasnim

[bhriguj]

Hi Tasnim,

I have not defined the fields in the taskStore. Where and how will I do that, if that is required? What is the ideal way to access the data within the renderer in a custom tab?

[tasnim]

Please check the docs link to set your custom fields to taskStore/taskModel https://bryntum.com/products/gantt/docs/api/Gantt/model/TaskModel#subclassing-the-taskmodel-class

Or Another way you could set

project : {
	...
	taskStore : {
		fields : ['customfield']
	}
}

[bhriguj]

Tasnim,

I have reproduced the issue in the demo. As suggested, I have extended the Task Model with the data field that I want to render, but I am still unable to access the task data within the renderer inside a custom tab utilizing 'Grid'. The data field that I want to render is an array of object with two properties 'Code_Name' and 'Code_Value', so what will be the correct way to add it to the Task Model, and access the same data inside the custom tab.

Relevant Code - TaskModel.ts

class YourTask extends TaskModel {
static get fields() {
    return [
        { name : 'activityCodes' }
    ];
}

Relevant Code - Custom Tab

        features : {
            baselines : true,
            taskEdit : {
              items : {
                  newTab          : {
                    title         : 'ACTIVITY CODE',
                    weight        : 100,
                    items         : {
                      Grid        : {
                        type      : 'grid',
                        columns   : [
                          {
                            text  : 'Description',
                            renderer    : ( {record} ) => {
                                      console.log('record', record);
                                      // console.log('value', value)
                                      return record;
                                    },
                            editor: {
                              readOnly : true
                            },
                            flex  : 2
                          },
                          {
                            text  : 'Code Value',
                            // field : 'Code_Value',
                            editor: {
                              readOnly : true
                            },
                            renderer    : ({ record }) => {
                              console.log('record', record)
                              // console.log('value', value)
                              return record;
                            },
                            flex  : 1
                          }
                ]}}},
              }
          }
        },

I have attached the file with the code that you can run with this example https://bryntum.com/products/gantt/examples/msprojectimport/

[tasnim]

Hello,

To make those data visible in the grid, you need to load data into the store.
You could use beforeTaskEditShow for this

    listeners : {
        beforeTaskEditShow(event) {
            const { editor : { widgetMap }, taskRecord } = event;
            const { activityCodesTab } = widgetMap;
            activityCodesTab.widgetMap.grid.store.loadData(taskRecord.activityCodes);
        }
    },

And here is the tabs code

                activityCodesTab : {
                    title : 'Activity Code',
                    items : {
                        grid : {
                            type: 'grid',
                            weight : 100,
                            flex : '1 1 auto',
                            columns : {
                                data : {
                                    description : {
                                        text : 'Description',
                                        width : '50%',
                                        field : 'description',
                                    },
                                    codeValue : {
                                        text : 'Code Value',
                                        field : 'codeValue'
                                    }
                                }
                            }
                        }
                    }
                },

To save data you need to collect all the updated data and set it back to the record (on save).

Please check docs
https://bryntum.com/products/gantt/docs/api/Gantt/feature/TaskEdit#event-beforeTaskEditShow