Refresh cell value after update with custom column

[Nualis]

Hi,

We've created a custom column as a test in our Vue project. However when we edit the cell within the Gantt, the edited value is not displayed directly (it still displays the original value). Only if you for instance sort the Gantt, the edited value is displayed. Do we need to add some more code to refresh the cell after the edit? In the example projects the custom columns are not editable, so we could not find the answer within the examples.

import { Column, ColumnStore } from '../../../../../../node_modules/bryntum-gantt';
export default class TypeColumn extends Column {
    static get type() {
        return 'typecolumn';
    }

    static get isGanttColumn() {
        return true;
    }

    static get defaults() {
        return {            
            text       : 'Type',
            editor     : {
                type : 'textfield'
            }          
    }
}
    renderer({ value}) {
        return value;        
    }
}

ColumnStore.registerColumnType(TypeColumn);

[mats]

You are not specifying the 'field' to edit? Docs: https://bryntum.com/docs/grid/#Grid/column/Column#config-field

[Nualis]

Hi,

Below is our config for the Gantt. The 'typecolumn' has the field from the JSON datafile specified. Is this what you are referring to?

import { ProjectModel} from 'bryntum-gantt';
import './gantt/columns/TypeColumn';

const ganttConfig = {
    autoHeight: true,
    project: new ProjectModel({
    }),

    columns: [
        { type: 'wbs', field: 'id' },
        { type: 'name', field: 'name' },
        { type: 'typecolumn', text: 'Type', field: 'type' },
        { type: 'startdate', field: 'startDate' },
        { type: 'enddate', field: 'endDate' },
        { type: 'effort' }
    ],

    subGridConfigs: {
        locked: {
            flex: 1
        },
        normal: {
            flex: 2,
            collapsed: false
        }
    },
    columnLines: false,
    features: {
        filter: true,
        nonWorkingTime: true,
        timeRanges: {
            showHeaderElements: true,
            showCurrentTimeLine: true
        },
        labels: {
            left: {
                field: 'name',
                editor: {
                    type: 'textfield'
                }
            }
        }
    }
}

export default ganttConfig;

[mats]

Try also defining this 'field' in your Task Model, and provide this model class to the Project:

https://bryntum.com/docs/gantt/#Gantt/model/ProjectModel#config-taskModelClass

[Nualis]

Hi,

Below the new configuration. The field is still not being updated however. Is this the correct way to configure it?

See also the screenshot of the ganttConfig from the Chrome dev console.

import { ProjectModel, TaskModel} from 'bryntum-gantt';
import './gantt/columns/TypeColumn';

class Task extends TaskModel{

    static get fields(){
        return [
            { name: 'id', dataSource: 'id' },
            { name: 'name', dataSource: 'name' },
            { name: 'typecolumn', dataSource: 'typecolumn' },
            { name: 'startDate', dataSource: 'startdate', type:'date', format : 'YYYY-MM-DDTHH:mm:ss.sssZ'},
            { name: 'endDate', dataSource: 'enddate', type:'date', format : 'YYYY-MM-DDTHH:mm:ss.sssZ'},
            { name: 'effort', type: 'string'}
         ];
    }
    static get defaults(){
        return {
            //only hours do make sense
            durationUnit: 'h'
        };
    }
}

const ganttConfig = {
    autoHeight: true,
    project: new ProjectModel({
        taskModelClass : Task
    }),


    columns: [
        { type: 'wbs', field: 'id' },
        { type: 'name', field: 'name' },
        { type: 'typecolumn', text: 'Type', field: 'type' },
        { type: 'startdate', field: 'startDate' },
        { type: 'enddate', field: 'endDate' },
        { type: 'effort' }
    ],

    subGridConfigs: {
        locked: {
            flex: 1
        },
        normal: {
            flex: 2,
            collapsed: false
        }
    },
    columnLines: false,
    features: {
        filter: true,
        nonWorkingTime: true,
        timeRanges: {
            showHeaderElements: true,
            showCurrentTimeLine: true
        },
        labels: {
            left: {
                field: 'name',
                editor: {
                    type: 'textfield'
                }
            }
        }
    }
}

export default ganttConfig;

[mats]

Typo, the field definition below should be name : 'type':

            { name: 'typecolumn', dataSource: 'typecolumn' },

[Nualis]

Hi,

Thanks. It's working now!

[rahulranjan]

Hi
Is Custom Fields cell edit is working ?

[mats]

Yes of course! Just define your new fields in your model and it will work fine

[MauriceLapre]

Hi,

I'm having an issue sort of like the above. I'm using an extended AssignmentModel, adding some custom fields like 'scheduled date':

class SpsAssignmentModel extends AssignmentModel {
    static get idField() {
        return "code";
    }

    static get fields() {
        return [
            { name : 'code', type : 'textfield', dataSource : 'code' },            
            { name : 'workorder', type : 'textfield', dataSource : 'workorder' },
            { name : 'activity', type : 'textfield', dataSource : 'activity' },
            { name : 'trade', type : 'textfield', dataSource : 'trade' },
            { name : 'department', type : 'textfield', dataSource : 'department' },
            { name : 'scheduler', type : 'textfield', dataSource : 'scheduler' },
            { name : 'scheduleddate', type : 'date', dataSource: 'scheduleddate' },
            { name : 'recordid', type : 'number' },
            { name : 'starttime', type : 'textfield', dataSource : 'starttime' },
            { name : 'endtime', type : 'textfield', dataSource : 'endtime' },            
            { name : 'comment', type : 'textfield', dataSource : 'comment' }
        ];
    } 
    [...] 

Then I've altered the resource assignment picker like in the demo, adding a column to change this scheduled date:

type : 'resourceavatar',
            editor : {
                type   : AssignmentField.type,
                
                picker : {
                    width : 500,    
                    // This config is applied over the provided picker grid's config
                    // Object based configs are merged. The columns, being an array is concatenated
                    // onto the provided column set.
                    grid : {
                        features : {
                            filterBar : true,
                            group     : 'resource.trade'
                        },
                        columns : [
                            // below is showing value but not editing correctly
                            { 
                                text      : 'Datum',
                                field     : 'assignment.scheduleddate',
                                type      : 'date',
                                format    : "DD-MM-YYYY",
                                editor :  { 
                                    type  : 'date',
                                    field : 'assignment.scheduleddate',
                                    format    : "DD-MM-YYYY"
                                },
                                width       : 100,
                                filterable  : false
                            
                            },                            
                        ]
                    }
                }
            }

This is working as far as it is displaying the value:

Bryntum Gantt - resource picker 001.png (24.01 KiB) Viewed 2248 times

But on double-click (editor), it's not showing the value and it's not editing the 'scheduled date' field:

Bryntum Gantt - resource picker 002.png (25.47 KiB) Viewed 2248 times

I must be missing something...

Could you have a look at this? Thank you!