Our state of the art Gantt chart


Post by remyvillulles »

Hi,

I have a custom column which is extending from DurationColumn (which is by the way not documented but just mentioned somewhere else in the documentation)

/* istanbul ignore file */
import {
  DurationColumn,
} from "bryntum-gantt/gantt.umd.min";

export default class StatusColumn extends DurationColumn {
  static get type() {
    return "estimatedDuration";
  }

  renderer({
    record: {
      originalData: { estimatedDuration, duration },
    },
  }) {
    const durationFieldData = {
      width: 200,
      label: "Duration",
      value: "5 days",
      unit: "days",
    };
    // return new DurationField(durationFieldData);
    if (estimatedDuration) {
      return estimatedDuration;
    }
    if (duration) {
      return duration;
    }
    return "";
  }
}

Setting for this column are set like this:


{
        type: "estimatedDuration",
        text: intl.formatMessage(planningTableHead.projectTableDuration),
        locked: false,
        minWidth: 115,
        editor: true,
        draggable: false,
        unit: "days",
        listeners: {
          catchAll(event) {
            console.log(event);
            // All events on the button will pass through here
          },
        },
      },

However, it is impossible for us to edit the value of this column. The column is editable, but changing it value will reset to the previous one directly and no event is called (hence the usage of the catchAll) only destroy events.

What am I doing wrong?


Post by mats »

It's documented: https://bryntum.com/docs/gantt/#SchedulerPro/column/DurationColumn

You should call this after your custom class too:

ColumnStore.registerColumnType(DurationColumn);

Please provide a simple test case so we can see what's going on.


Post by remyvillulles »

Where should I call this bit of code you sent me?


Post by mats »

After you declared the class, as you can see in our source files:

export default class DurationColumn extends NumberColumn {

//region Config

static get $name() {
    return 'DurationColumn';
} 
....
}

ColumnStore.registerColumnType(DurationColumn);

Post by remyvillulles »

I'm sorry, I can't see any initClass in your code


Post by mats »

Sorry, typo - post updated.


Post by remyvillulles »

Yes I am calling this and the custom column is appearing. Issue is that the duration is not changing. We'd like to pass a callback to be able to handle the data update but we don't know how.

/* istanbul ignore file */
import { DurationColumn, DurationField } from "bryntum-gantt/gantt.umd.min";

export default class EstimatedDurationColumn extends DurationColumn {
  static set callback(value) {
    console.log(value);
  }

  static get type() {
    return "estimatedDuration";
  }

  static get isGanttColumn() {
    return true;
  }

  static get defaults() {
    return {
      text: "Duration",
      htmlEncode: false,
      editor: new DurationField({
        unit: "days",
        listeners: {
          change: e => {
            if (!e.oldValue) {
              return;
            }
            console.log(e);
            return e.value;
          },
        },
      }),
    };
  }

  renderer({
    record: {
      originalData: { estimatedDuration, duration },
    },
  }) {
    // return new DurationField(durationFieldData);
    if (estimatedDuration) {
      return estimatedDuration;
    }
    if (duration) {
      return duration;
    }
    return "";
  }
}

So we tried using a setter to set the value callback but it's not working, we'd like to be able to pass a value so that the DurationField event directly sends the new value to our React application


Post by mats »

Works fine for me. What version are you on?

export class DurationColumn2 extends DurationColumn {
    static get type() {
        return 'duration2';
    }

static get defaults() {
    return {
        editor : {
            type : 'duration',
            name : this.field,
            listeners : {
                change : () => {
                    debugger
                }
            }
        }
    };
}
}

ColumnStore.registerColumnType(DurationColumn2);

Post by remyvillulles »

Yes it does work, but when accessing the change. I'd like to send the data outside the gantt context. For that, I'd like to send a custom field (hence the set callback() at the top of the class. Would it work?


Post by pmiklashevich »

Hello,

Please explain your usecase. What problem you're solving? I don't see where you call your setter. I would recommend to apply minimal changes to one of our examples, and submit it as a testcase here. So we can have a clear picture of what you're doing. How to ask for help is described here: viewtopic.php?f=35&t=772

Best,
Pavel

Pavlo Miklashevych
Sr. Frontend Developer


Post Reply