Our state of the art Gantt chart


Post by ducminh1511 »

Hello friends,

I am having an issue, how can I get task data by clicking on that task. Here is my code, thanks for your help.

Attachments
support_gantt_chart.zip
(458.93 KiB) Downloaded 62 times

Post by saki »

This is what you're looking for:

  features: {
    taskDrag: {
      validatorFn(records) {
        const isValid = records[0].color === '#303331';
        // ... etc.

The correct function signature is to be found in docs: https://bryntum.com/docs/gantt/#Gantt/feature/TaskDrag#config-validatorFn


Post by ducminh1511 »

Hi Saki,

You seem to be misunderstanding my question. You review my question and I have posted my source code below


Post by alex.l »

Hi ducminh1511,

taskClick event has a param taskRecord https://bryntum.com/docs/gantt/#Gantt/view/Gantt#event-taskClick

All the best,
Alex


Post by ducminh1511 »

Hi Alex,

Do you have any specific examples, I don't know how to use it. Here is my source code, can you help me fix it to work. Thank you.

Attachments
support_gantt_chart.zip
(458.9 KiB) Downloaded 65 times

Post by mats »

Try this in our advanced demo:

gantt.on('taskclick', ({
    taskRecord
}) => console.log(taskRecord))

Then click a task and look in the console.


Post by ducminh1511 »

Did I do it correctly, I am seeing such an error

Attachments
taskclick.png
taskclick.png (51.94 KiB) Viewed 766 times

Post by mats »

No, that's not valid JS. First create the Gantt, then run the statement I posted above.


Post by ducminh1511 »

I find the library really difficult :( Can you edit it on the source code I submitted so I can learn and access it faster.


Post by mats »

I find the library really difficult

You need to go a bit slower, read more in our documentation and guides and study the sources of our many examples. Then you will learn it quickly.

Add this

  listeners: {
      taskclick: ({
          taskRecord
      }) => console.log(taskRecord))
  }

to your config block:

export default {
    //   dependencyIdField: "sequenceNumber",
    listeners: {
        taskclick: ({
            taskRecord
        }) => console.log(taskRecord))
},
columns: [{
        type: 'name',
        field: 'name',
        text: '名前',
        width: 1
    }],
    subGridConfigs: {
        locked: {
            collapsed: true
        },
    },
    features: {
        taskDrag: {
            validatorFn(taskRecords, date, duration, newResource) {
                const firstDraggedTask = taskRecords[0], // or better use a loop
                    isValid = firstDraggedTask.color === '#303331';
                return {
                    valid: newResource.available && isValid,
                };
            },
        },
        taskResize: {
            validatorFn(record) {
                console.log('taskRecord1111111', record);
                return record.taskRecord.originalData.color != '#303331';
            },
        },
        taskClick: {},
        taskEdit: false,
        // taskEdit: {
        //   items: {
        //     generalTab: {
        //       // change title of General tab
        //       title: "Common",
        //       items: {
        //         customDivider: {
        //           html: "",
        //           dataset: {
        //             text: "Custom fields",
        //           },
        //           cls: "b-divider",
        //           flex: "1 0 100%",
        //         },
        
// colorField: { // type: "colorfield", // name: "color", // ref: "colorField", // label: "Color", // flex: "1 0 50%", // cls: "b-inline", // }, // }, // }, // notesTab : false, // predecessorsTab : false, // successorsTab : false, // resourcesTab : false, // advancedTab : false // }, // }, timeRanges: { // showCurrentTimeLine: { // name: "今日", // }, showCurrentTimeLine: true, }, viewPreset: { // base: "weekAndDay", base: 'weekAndDay', tickWidth: 52, headers: [ // { // unit: 'month', // dateFormat: 'YYYY年 MMM', // }, { unit: 'week', dateFormat: 'YYYY年 MMM', }, { unit: 'day', dateFormat: 'ddd', }, { unit: 'day', dateFormat: 'D', }, ], }, eventColor: null, dependencies: false, }, taskRenderer: ({ taskRecord, renderData }) => { if (taskRecord.color) { renderData.style += `background-color:${taskRecord.color}`; } if (taskRecord.isLeaf && !taskRecord.isMilestone) { return taskRecord.name; } }, project };

Post Reply