DHTMLX Gantt chart group same task in a row expand collapse issue - grouping

Question

I am using gantt chart in which the data will be in following format
A
A1 1/4/2016
A1 2/4/2016
A2 4/4/2016
B
B1 4/4/2016
B2 5/4/2016
I want to group the same tasks to display in single row
I have achieved this but when I expand multiple categories the chart data does not show properly
As you can see Audi05 should display one row below.
Here is my customized code:
/* 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

Please, check the sample with a similar way of displaying tasks and subtasks:
http://docs.dhtmlx.com/gantt/samples/04_customization/18_subtasks_displaying.html