DHTMLX Ганта группа та же задача подряд расширить Распад вопрос

Question

Я использую диаграммы Ганта, в котором данные будут в следующем формате

A 
    A1 1/4/2016 
    A1 2/4/2016 
    A2 4/4/2016 
B 
    B1 4/4/2016 
    B2 5/4/2016 

Я хочу, чтобы сгруппировать те же задачи, чтобы отобразить в одной строке

я достиг этого, но когда я развернуть несколько категорий данных диаграммы не отображается должным образом

Как вы можете видеть, Audi05 должен отображать один ряд ниже.

Вот мой заказной код:

/* Custom Code */ 
gantt.getGlobalTaskIndex = function (id) { 
    dhtmlx.assert(id, "Invalid argument"); 
    if (index_list.length!=0 && _.where(index_list,{id:id}).length > 0){ 
     return _.where(index_list,{id:id})[0].pos; 
    } 

    var ord = this._order; 
    for(var i= 0, count = ord.length; i < count; i++) 
     if(ord[i] == id) 
     return i; 

    return -1; 
}; 
/* End */ 




gantt._render_grid_item = function (item) { 
if (!gantt._is_grid_visible()) 
    return null; 
/* Issue in the Custom Code */ 
    var index = index_list.length; 
    if(item.vehicle_id) 
    { 
     var isExist=task_list.some(function (el) { 
      var res=(el.id===item.vehicle_id); 
       return res; 
         }); 
      if(!isExist){ 
       task_list.push({'id':item.vehicle_id}); 
      } 
      else{ 
       return null; 
      } 
    } 
/* End */ 
var columns = this.getGridColumns(); 
var cells = []; 
var width = 0; 
for (var i = 0; i < columns.length; i++) { 
    var last = i == columns.length - 1; 
    var col = columns[i]; 
    var cell; 

    var value; 
    if (col.name == "add") { 
     value = "<div class='gantt_add'></div>"; 
    } else { 
     if (col.template) 
      value = col.template(item); 
     else 
      value = item[col.name]; 

     if (value instanceof Date) 
      value = this.templates.date_grid(value, item); 
     value = "<div class='gantt_tree_content'>" + value + "</div>"; 
    } 
    var css = "gantt_cell" + (last ? " gantt_last_cell" : ""); 

    var tree = ""; 
    if (col.tree) { 
     for (var j = 0; j < item.$level; j++) 
      tree += this.templates.grid_indent(item); 

     var has_child = this._has_children(item.id); 
     if (has_child) { 
      tree += this.templates.grid_open(item); 
      tree += this.templates.grid_folder(item); 
     } else { 
      tree += this.templates.grid_blank(item); 
      tree += this.templates.grid_file(item); 
     } 
    } 
    var style = "width:" + (col.width - (last ? 1 : 0)) + "px;"; 
    if (dhtmlx.defined(col.align)) 
     style += "text-align:" + col.align + ";"; 
    cell = "<div class='" + css + "' style='" + style + "'>" + tree + value + "</div>"; 
    cells.push(cell); 
} 
var css = item.$index % 2 === 0 ? "" : " odd"; 
css += (item.$transparent) ? " gantt_transparent" : ""; 

css += (item.$dataprocessor_class ? " " + item.$dataprocessor_class : ""); 

if (this.templates.grid_row_class) { 
    var css_template = this.templates.grid_row_class.call(this, item.start_date, item.end_date, item); 
    if (css_template) 
     css += " " + css_template; 
} 

if (this.getState().selected_task == item.id) { 
    css += " gantt_selected"; 
} 
var el = document.createElement("div"); 
el.className = "gantt_row" + css; 
el.style.height = this.config.row_height + "px"; 
el.style.lineHeight = (gantt.config.row_height) + "px"; 
el.setAttribute(this.config.task_attribute, item.id); 
el.innerHTML = cells.join(""); 
return el; 
}; 
gantt.open = function (id) { 
    task_list=[]; 
    gantt._set_item_state(id, true); 
    this.callEvent("onTaskOpened", [id]); 
}; 

gantt.close = function (id) { 
    task_list=[]; 
    gantt._set_item_state(id, false); 
    this.callEvent("onTaskClosed", [id]); 
}; 



    gantt._get_task_coord = function(task, to_start, x_correction){ 
to_start = to_start !== false; 
x_correction = x_correction || 0; 
var isMilestone = (this._get_safe_type(task.type) == this.config.types.milestone); 

var date = null; 

if(to_start || isMilestone){ 
    date = (task.start_date || this._default_task_date(task)); 
}else{ 
    date = (task.end_date || this.calculateEndDate(this._default_task_date(task))); 
} 
var x = this.posFromDate(date), 
    //y = this.getTaskTop(task.id); 
    /* Custom code */ 
    y = this.getTaskTop(task); 

    if(task.vehicle_id) 
    { 
     var isExist=vehicle_list.some(function (el) { 
     var res=(el.id===task.vehicle_id); 
      return res; 
        }); 
     if(!isExist){ 
      vehicle_list.push({'id':task.vehicle_id,'y':y}); 
     } 
     else{ 
     y = _.where(vehicle_list, {id:task.vehicle_id})[0].y; 
     } 
    } 

/* End */ 

if(isMilestone){ 
    if(to_start){ 
     x -= x_correction; 
    }else{ 
     x += x_correction; 
    } 
} 
return {x:x, y:y}; 
}; 



     gantt.getTaskPosition = function(task, start_date, end_date){ 
var x = this.posFromDate(start_date || task.start_date); 
var x2 = this.posFromDate(end_date || task.end_date); 
x2 = Math.max(x, x2); 
//var y = this.getTaskTop(task.id); 
var y = this.getTaskTop(task); // Custom code 
var height = this.config.task_height; 
return { 
    left:x, 
    top:y, 
    height : height, 
    width: Math.max((x2 - x), 0) 
}; 
}; 

Answer 1

Пожалуйста, проверьте образец с подобным способом отображения задач и подзадач: http://docs.dhtmlx.com/gantt/samples/04_customization/18_subtasks_displaying.html