Group by not showing summary-row or summary bar

Gantt
#1

Hi I am trying to use the grouping but can not figure out why I do not get the summary-row or summary-bar to display. When I click the button it sorts the data by the group but does not actually group each item.

I am retrieving data from a database and using serverlist to populate training_type and location.

Thank in advance for your help!

css:
.summary-row,
.summary-row.odd {
background-color: #EEEEEE;
font-weight: bold;
}

.gantt_grid div,
.gantt_data_area div {
  font-size: 12px;
}

.summary-bar {
  opacity: 0.4;
}

Buttons:


function showGroups(listname) {
  if (listname) {
    gantt.groupBy({
      groups: gantt.serverList(listname),
      relation_property: listname,
      group_id: "key",
      group_text: "label"
    });
    gantt.sort("start_date");
  } else {
    gantt.groupBy(false);

  }
}



gantt.locale.labels.column_training_type = gantt.locale.labels.section_training_type = "Training Type";
gantt.locale.labels.column_location = gantt.locale.labels.section_location = "Location";

gantt.config.columns = [

	{name: "text",                label: "Task Name", tree: true, width: 175},
	{name: "start_date",          label: "Start Date",            width: 75},  

{name: "training_type",       label: "Training Type",       align: "center", width: 70, template: function (item) {return byId(gantt.serverList('training_type'), item.training_type)  }},
 
	{name: "location",            label: "Location",            align: "center", width: 65, template: function (item) {return byId(gantt.serverList('location'), item.location)		}},       
{name: "add", width: 40}
];

gantt.config.lightbox.sections = [

{name: "text",  height: 20, map_to: "text", type: "textarea", focus: true},
{name: "start_date",  height: 20, map_to: "start_date",  type: "time",     single_date: true},
{name: "training_type", height: 20, map_to: "training_type", type: "select", options: gantt.serverList("training_type")},
{name: "location", height: 20, map_to: "location", type: "select",   options: gantt.serverList("location")},

gantt.templates.grid_row_class =
gantt.templates.task_row_class = function (start, end, task) {
if (task.$virtual)
return “summary-row”
};

gantt.templates.task_class = function (start, end, task) {
  if (task.$virtual)
    return "summary-bar";
};




gantt.init("gantt_here");
  gantt.sort("start_date");
gantt.load("src/gantt2.php");

var dp=new gantt.dataProcessor("src/gantt2.php");   
dp.init(gantt);
#2

Hello Ron,
The grouping extension hides the project tasks and it is by design:

The ‘project’ tasks from the original dataset won’t be displayed in the grouping mode, however they will be available via API.
https://docs.dhtmlx.com/gantt/desktop__grouping.html#groupingtasks

If you want to change it, you need to turn projects into tasks when you group tasks and turn them back into projects when you disable grouping. Here is an example of how it might be implemented:
http://snippet.dhtmlx.com/1b36da45e
However, when you group tasks, the tree structure is not saved. Unfortunately, there is no solution to change that. The dev team will implement it someday, but I cannot give you an ETA.

#3

Hello Ron,
The dev team added the feature that allows saving the tree structure in the group mode:
https://docs.dhtmlx.com/gantt/whatsnew.html#x6629x80x6630x:~:text=Grouping%20tasks%20functionality%20now%20can%20preserve%20the%20original%20Gantt%20tree%20structure%20inside%20groups%3A

You can see how it works in the following sample:
https://docs.dhtmlx.com/gantt/samples/?sample='02_extensions/28_tasks_grouping_save_tree_structure.html'&filter=''