Skip to main content

type_renderers

info

This functionality is available in the PRO edition only.

Description​

Redefines functions responsible for displaying different types of tasks

type_renderers: CustomTypeRenderers["type_renderers"]

Example​

gantt.config.type_renderers[gantt.config.types.project] = function(task,defaultRender){
    var main_el = document.createElement("div");
      var size = gantt.getTaskPosition(task);
      main_el.innerHTML = [
        "<div className='project-left'></div>",
        "<div className='project-right'></div>"
      ].join('');
      main_el.className = "custom-project";

      main_el.style.left = size.left + "px";
      main_el.style.top = size.top + 7 + "px";
      main_el.style.width = size.width + "px";

      return main_el;
};

Default value: {}

Details​

A function that renders tasks takes 2 parameters:

  • typeRenderer (task, defaultRender): HTMLElement | boolean | void | undefined - a function takes a task's object as a parameter and must return a DOM element that will be displayed instead of the task bar.
    • task - (Task) - the task object
    • defaultRender? - (TaskLayerRender) - optional, the default render function used in the dhtmlxGantt

Here are the possible type_renderers types:

  • type_renderers - (object) - a custom render function for the task type
    • task? - (typeRenderer) - optional, a custom render function for the task type
    • project? - (typeRenderer) - optional, a custom render function for the project type
    • milestone? - (typeRenderer) - optional, a custom render function for the milestone type
    • [typeName: string] - (typeRenderer | undefined) - optional, a custom render function for the custom task type

You can use this option to define a custom display for certain types of tasks. For example, the setting allows you to implement a more conservative view for the project or summary tasks.

note

sample Classic Look