Our state of the art Gantt chart


Post by ahmed.farahat »

Hi,

in your example on this link https://www.bryntum.com/examples/gantt/taskeditor/
you are showing an example of how to add some custom tabs with custom logic.

we want to use a custom react component instead of having to extend from a Grid or List classes like the example above, how can this be done?

and if not possible with react how can i just have a custom rendered, lets say for example i want to render a simple html inside this tab


Post by alex.l »

Hi ahmed.farahat,

It is not possible to use React components as one of widgets on a form/panel, as example only replace Grid.
But you can fully replace taskEditor to your own React based dialog.
We have guide here https://bryntum.com/docs/gantt/guide/Gantt/customization/taskedit#replacing-the-task-editor
And example for Scheduler that also might be useful https://bryntum.com/examples/scheduler/frameworks/react/javascript/custom-event-editor/build/
If you don't have a license, it's still possible to download trial and check /examples to get source code

It's possible to use HTML as a content for tab, please check https://bryntum.com/docs/gantt/guide/Gantt/customization/taskedit
and https://bryntum.com/docs/gantt/api/Core/widget/Container#config-html

All the best,
Alex


Post by ahmed.farahat »

Hi,

i am not sure how to use the Core.widget.Container#config-html as a content of custom tab in the Gantt, the links you sent just explain what is a container but not how to use it in this situation

using the code from your demos how can this be achieved for example

features: {
    taskEdit: {
      items: {
        filesTab: {
          type: "customTab",
          weight: 110,
        },
      },
    },
  },

now how can i define this custom container that shows some html string, i tried the following without success


class CustomTab extends Container {
  static get type() {
    return "customTab";
  }

  static get html() {
    return "this is a custom html";
  }
}

// Register this widget type with its Factory
CustomTab.initClass();

Post by ahmed.farahat »

another question is how can i also access the task id in this custom html, let say i want to render a string that says

  static get html() {
    return "this is a custom html" + taskID;
  }

Post by alex.l »

Sorry, I didn't expect you will define a custom class for that.
Basically you need to add html in a config.
Guide: https://bryntum.com/docs/gantt/guide/Gantt/customization/taskedit#add-custom-tabs-and-fields

And here is code snippet with both approaches


class CustomTab extends Container {
    // Factoryable type name
    static get type() {
        return 'customTab';
    }

static get configurable() {
    return {
        html : '<div style="color: green;">Hello world</div>'
    }
}
}
// Register this widget type with its Factory
CustomTab.initClass();

[...]
new Gantt({

features: {
    taskEdit: {
      items: {
        filesTab: {
          type: "customTab",
          title : 'New tab',
          weight: 110,
        },
        newConfigTab : {
            title : 'Just config',
            html : 'This text was defined in config '
        }
      },
    },
  },

listeners : {
    beforeTaskEditShow({ editor, taskRecord }) {
        const { filesTab } = editor.widgetMap;

        filesTab.html = `<h2>${taskRecord.name}</div>`;
    }
}
});

All the best,
Alex


Post by ahmed.farahat »

Thanks, and how i can have access to the current task id in this widget? for example

static get configurable() {
    return {
    	// how can i get task id here
        html : '<div style="color: green;">Hello world'+ taskId +'</div>'
    }
}

Post by alex.l »

You could define a method and pass taskId to your container instance. There is no taskId available at the moment of creating class instance, so just set it when you have it.

Code snippet I added shows how it can be handled with beforeTaskEditShow

All the best,
Alex


Post Reply