Group task undefined


#1

Hi,
When i try to group tasks, the group folder is set to “undefined” like this:
image
I did everything like this sample: https://docs.dhtmlx.com/gantt/samples/02_extensions/08_tasks_grouping.html
Thanks in advance,
Sara


#2

Hi Sara,
please share your example so somebody could check what might be wrong with it

Gantt takes text for the group folder from the property of group object specified in group_text parameter of gantt.groupBy method

gantt.groupBy({
    relation_property: "priority",
    groups: [
        {key:1, label: "High"},
        {key:2, label: "Normal"},
        {key:3, label: "Low"}
    ],
    group_id: "key",
    group_text: "label" // <-- HERE, label will be taken from group.label
});

Make sure this parameter points to the right property of your group objects


#4
<script type="text/javascript">
	var tasks = { 
	
data: [
{ "id": 310,"text": "Redline","type": "task", "start_date": "22-01-2019 00:00", "duration": 2, "order": 20, "progress": 0, "parent": 308, "open": false, "owner_id": "Olivier", "color": "#8500AF", "priority": "2", "statut": " ",  "stage": "Redline"},{ "id": 311,"text": "CdP","type": "milestone", "start_date": "15-01-2019 00:00", "duration": 0, "order": 30, "progress": 0, "parent": 308, "open": false, "owner_id": "", "color": "#b9b9b9", "priority": "2", "statut": " ", "stage": "CdP"},{ "id": 315,"text": "Redline","type": "task", "start_date": "22-01-2019 00:00", "duration": 3, "order": 20, "progress": 0, "parent": 313, "open": false, "owner_id": "Olivier", "color": "#8500AF", "priority": "2", "statut": " ", "stage": "Redline"},{ "id": 316,"text": "CdP","type": "milestone", "start_date": "15-01-2019 00:00", "duration": 0, "order": 30, "progress": 0, "parent": 313, "open": false, "owner_id": "", "color": "#b9b9b9", "priority": "2", "statut": " ",  "stage": "CdP"},{ "id": 320,"text": "Dessin de production","type": "task", "start_date": "03-02-2019 00:00", "duration": 2, "order": 20, "progress": 0, "parent": 318, "open": false, "owner_id": "Jasmin", "color": "#CE3B00", "priority": "2", "statut": " ", "stage": "Dessin de production"}
],
links: [
{ id: 540, source: 361, target: 391, type: "0", lag: 0},{ id: 541, source: 391, target: 396, type: "0", lag: 0},{ id: 544, source: 492, target: 565, type: "0", lag: 0},{ id: 546, source: 560, target: 542, type: "0", lag: 0},{ id: 547, source: 507, target: 547, type: "0", lag: 0},{ id: 548, source: 422, target: 361, type: "0", lag: 0},{ id: 549, source: 532, target: 512, type: "0", lag: 0},{ id: 550, source: 512, target: 522, type: "0", lag: 0},{ id: 553, source: 448, target: 422, type: "0", lag: 0}
]
		};
	gantt.serverList("stage", [
		{key:"MV + CL", label: "MV + CL"},
		{key:"Redline", label: "Redline"},
        {key:"Dessin initial", label: "Dessin initial"},
		{key:"CdP", label: "CdP"},
		{key:"Dessin de production", label: "Dessin production"},
		{key:"Correction", label: "Correction"},
		{key:"OFA", label: "OFA"}
	]);
	gantt.serverList("owner_id", [
		{key:"Jean Pierre", label: "JeanPierre"},
		{key:"Sylvain", label: "Sylvain"},
        {key:"Chloe", label: "Chloe"},
		{key:"Olivier", label: "Olivier"},
		{key:"Jasmin", label: "Jasmin"},
		{key:"Feng", label: "Feng"}
	]);
	
	
	gantt.config.order_branch = true;
	gantt.config.grid_width = 420;
	gantt.config.row_height = 24;
	gantt.config.grid_resize = true;
	
	gantt.locale.labels.column_stage =
		gantt.locale.labels.section_stage = "Stage";
		gantt.locale.labels.column_owner =
		gantt.locale.labels.section_owner = "Owner";

		gantt.locale.labels.section_resources = "Resources";
		function byId(list, id) {
		for (var i = 0; i < list.length; i++) {
			if (list[i].key == id)
				return list[i].label || "";
		}
		return "";
	}
		gantt.config.columns = [
			{name: "nom", tree: true, width: 180, resize: true},
			{name: "start_date", align: "center", width: 80, resize: true},
			{name: "duration", width: 60, label: "Duree", align: "center"},
			
            {
			name: "stage", width: 80, align: "center", label: "Etat", template: function (item) {
				return byId(gantt.serverList('stage'), item.stage)
			}
		},
		{
			name: "owner", width: 80, align: "center", label: "Ressource", template: function (item) {
				return byId(gantt.serverList('owner_id'), item.owner_id)
			}
		},
			{name: "add", width: 44}
        ];
        gantt.config.lightbox.sections = [
		{name: "description", height: 38, map_to: "text", type: "textarea", focus: true},
		{name: "owner", height: 22, map_to: "owner_id", type: "select", options: gantt.serverList("owner_id")},
		{name: "stage", height: 22, map_to: "stage", type: "select", options: gantt.serverList("stage")},
		{name: "time", type: "duration", map_to: "auto"}
	];
	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.parse(tasks);

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

		}
	}
</script>

Thanks!


#5

Hi,

If I’ve copied everything correctly, your config should give you undefined labels even without task grouping:
http://snippet.dhtmlx.com/a21f7fd58

Try setting a template for the first column of your grid:
http://snippet.dhtmlx.com/a482c3456

code:

gantt.config.columns = [
	{name: "nom", tree: true, width: 180, resize: true, template: function(task){return task.text}},
	{name: "start_date", align: "center", width: 80, resize: true},
	{name: "duration", width: 60, label: "Duree", align: "center"},	
        {
		name: "stage", width: 80, align: "center", label: "Etat", template: function (item) {
			return byId(gantt.serverList('stage'), item.stage)
		}
	},
	{
		name: "owner", width: 80, align: "center", label: "Ressource", template: function (item) {
			return byId(gantt.serverList('owner_id'), item.owner_id)
		}
	},
	{name: "add", width: 44}
];

#6

Thank you very much! It work!