type_renderers

redefines functions responsible for displaying different types of tasks

Available only in PRO Edition

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 class='project-left'></div>",
        "<div class='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:

{}

Related samples

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.

Related sample:  Classic Look

Back to top