Dear Bryntum Gantt:
I was hoping you could help me write correct code in my custom column (AssignedToColumn.js) -- to select an "assignee" from a dropdown (type: 'combo') edit? I have not been able to get this to work correctly, and therefore wanted to ask if you could send me a code snippet of how to make this work?
What I'm currently trying to do is use the editor property in custom column (AssignedToColumn.js) as shown in the code below. I was trying to use the
type: 'combo'
for the assignee id and name. Within the assignee property -- I need to "edit" the assigneeId, which would be the assignee.id. See the assignee field below. You will see that we have an "id", "firstName", "lastName", and "avatar" in that structure.
How would I gain access to these items, such that I can use the id (valueField) and name (displayField) for this combo? Or is that not possible? I was hoping to use the assignee firstName and lastName as the "name", and use the id for the assigneeId field to update (edit).
Could you please give me some working code -- to show me how I am supposed to do this correctly? Please see my code below. I have commented where I think I need help within your editor property? Or is there a better way to do this?
I was hoping that you could help me to finish off this code to use as a dropdown (type: 'combo') -- to display the name (first and last name) -- but use the id to update my backend with -- which field is the assigneeId (assignee.id)? Can you please help me with this? I really need to be able to edit the column (assignee) -- but can't seem to get it to work correctly.
I will look forward to you help with this. Thank you very much!!
AssignedToColumn.js -- custom column class
import { Column, ColumnStore } from '@bryntum/gantt'
class AssignedToColumn extends Column {
static get $name() {
return 'AssignedToColumn'
}
static get type() {
return 'assignedcolumn'
}
static get isGanttColumn() {
return true
}
static get defaults() {
return {
field: 'assignee',
text: 'Assigned To',
htmlEncode: false,
width: 100,
showAvatars: true,
editor: {
type: 'combo',
editable: true,
valueField: 'id',
displayField: 'name',
// how do I properly access all the 'assignee' records here?
// want to use id (assignee.id) to select from dropdown for edit (and save as assigneeId)?
//And display the first and last name of the assignee in the dropdown for selection?
},
filterable: {
filterField: {
editable: true,
},
filterFn: ({ value, record }) => {
value = value.toLowerCase()
const firstName = record.assignee?.firstName?.toLowerCase()
const lastName = record.assignee?.lastName?.toLowerCase()
const fullName =
`${record.assignee?.firstName} ${record.assignee?.lastName}`.toLowerCase()
if (
(firstName && firstName.includes(value)) ||
(lastName && lastName.includes(value)) ||
fullName.includes(value)
) {
return true
}
return false
},
},
}
}
renderer({ record }) {
return record.assignee
? `${record.assignee.firstName} ${record.assignee.lastName}`
: ''
}
}
ColumnStore.registerColumnType(AssignedToColumn)