Our state of the art Gantt chart


Post by rtbennett »

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)
Attachments
Screen Shot 2023-03-26 at 7.12.29 PM.png
Screen Shot 2023-03-26 at 7.12.29 PM.png (713.26 KiB) Viewed 120 times

Post by rtbennett »

To hopefully add a little more clarity -- I wanted to give to you a glimpse of what the payload/response looks like when sending updated data (for edits in cell). Note we are updating the "assigneeId". So my variable input (payload) will include this field. If you need help with what my data looks you can see this support forum for reference (which incidentally is the same custom column): viewtopic.php?p=119335&hilit=editable#p119335

See the attached screenshots for further reference on the payload and response -- when making my mutation request for edit (updates). Thanks. I hope this helps!

Attachments
Screen Shot 2023-03-26 at 7.47.34 PM.png
Screen Shot 2023-03-26 at 7.47.34 PM.png (380.56 KiB) Viewed 119 times
Screen Shot 2023-03-26 at 7.47.25 PM.png
Screen Shot 2023-03-26 at 7.47.25 PM.png (281.6 KiB) Viewed 119 times

Post by alex.l »

Hi,

You could use https://bryntum.com/products/gantt/docs/api/Grid/feature/CellEdit#event-beforeCellEditStart event to apply value to your editor field.
Btw, I see assignee is not an array, and your combo doesn't have any data specified, so from what values it should pick up value by valueField field name?

  1. You need to apply data for your combo with correct structure to pick up value from.
  2. To apply not trivial values as nested record, use beforeCellEditStart event listener.

All the best,
Alex


Post Reply