Hi
I edited this post and will make 2 separate posts for my issues.
I am trying to load a gantt chart from a database. I am a beginner in PHP and DHTMLX. Sorry in advance if I am missing something.
My question is How can I get the grouping data from the database? Replacing the hard coded (bold below) gantt.serverList…
Thanks in advance for any help.
===================
gantt2.php file
===================
===================
index.php file
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="../codebase/dhtmlxgantt.js?v=6.1.1"></script>
<script src="../codebase/ext/dhtmlxgantt_grouping.js?v=6.1.1"></script>
<link rel="stylesheet" href="../codebase/dhtmlxgantt.css?v=6.1.1">
<link rel="stylesheet" href="common/controls_styles.css?v=6.1.1">
<style type="text/css">
style stuff here.....
</style>
</head>
<body>
<div class="gantt_control">
<input type='button' id='default' onclick="showGroups()" value="Tree">
<input type='button' id='training_type' onclick="showGroups('training_type')" value="Group by Training">
<input type='button' id='location' onclick="showGroups('location')" value="Group by Location">
<input type='button' id='work_package_status' onclick="showGroups('work_package_status')" value="Group by Work Package Status">
</div>
<div id="gantt_here" style='width:100%; height:100%;'></div>
<script type="text/javascript">
**gantt.serverList("training_type", [**
** {key: 1, “label”: “Curriculum”},**
** {key: 2, “label”: “SCOT”},**
** {key: 3, “label”: “ICW”},**
** {key: 4, “label”: “Tech Doc”},**
** {key: 5, “label”: “Engineering Briefs”},**
** {key: 6, “label”: “JCPTS”},**
** {key: 7, “label”: “GFI Request”}**
** ]);**
** gantt.serverList(“delivered_status”, [**
** {key: 1, “label”: “Yes”},**
** {key: 2, “label”: “No”}**
** ]);**
** gantt.serverList(“location”, [**
** {key: 1, “label”: “CSEDS”},**
** {key: 2, “label”: “Dahlgren”},**
** {key: 3, “label”: “AOMTC/Korea”},**
** {key: 4, “label”: “Australia”},**
** {key: 5, “label”: “Japan”},**
** {key: 6, “label”: “Korea”},**
** {key: 7, “label”: “Maizuru”},**
** {key: 8, “label”: “Moorestown”},**
** {key: 9, “label”: “Norway”},**
** {key: 10, “label”: “Syracuse, NY”},**
** {key: 11, “label”: “Dahlgren / NJ”},**
** {key: 12, “label”: “CSEDS, NJ Ph 1 Dahlgren, Va Ph 2”}**
** ]);**
** gantt.serverList(“work_package_status”, [**
** {key: 1, “label”: “Approved”},**
** {key: 2, “label”: “Deferred”},**
** {key: 3, “label”: “Planning”},**
** {key: 4, “label”: “Rejected”},**
** {key: 5, “label”: “Submitted”}**
** ]);**
gantt.config.order_branch = true;
gantt.config.order_branch_free = true;
gantt.config.sort = true;
gantt.config.grid_width = 420;
gantt.config.row_height = 24;
gantt.config.grid_resize = true;
gantt.locale.labels.column_training_type = gantt.locale.labels.section_training_type = "Training Type";
gantt.locale.labels.column_delivered_status = gantt.locale.labels.section_delivered_status = "Delivered";
gantt.locale.labels.column_location = gantt.locale.labels.section_location = "Location";
gantt.locale.labels.column_work_package_status = gantt.locale.labels.section_work_package_status = "Work Package Status";
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: "text", label: "Task name", tree: true, width: '*'},
{name: "training_type", align: "center", width: 55,
template: function (item) {return byId(gantt.serverList('training_type'), item.training_type)
}},
{name: "delivered_status", align: "center", width: 55,
template: function (item) {return byId(gantt.serverList('delivered_status'), item.delivered_status)
}},
{name: "location", align: "center", width: 55,
template: function (item) {return byId(gantt.serverList('location'), item.location)
}},
{name: "work_package_status", align: "center", width: 55,
template: function (item) {return byId(gantt.serverList('work_package_status'), item.work_package_status)
}},
{name: "add", width: 40}
];
gantt.config.lightbox.sections = [
{name: "description", height: 38, map_to: "text", type: "textarea", focus: true},
{name: "training_type", height: 22, map_to: "training_type", type: "select", options: gantt.serverList("training_type")},
{name: "delivered_status", height: 22, map_to: "delivered_status", type: "select", options: gantt.serverList("delivered_status")},
{name: "location", height: 22, map_to: "location", type: "select", options: gantt.serverList("location")},
{name: "work_package_status", height: 22, map_to: "work_package_status", type: "select", options: gantt.serverList("work_package_status")},
{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.templates.scale_cell_class = function(date){
if(date.getDay()==0||date.getDay()==6){
return "weekend";
}
};
gantt.templates.task_cell_class = function(item,date){
if(date.getDay()==0||date.getDay()==6){
return "weekend" ;
}
};
//gantt.config.xml_date = "%Y-%m-%d %H:%i";
gantt.init("gantt_here");
gantt.load("src/gantt2.php");
var dp=new gantt.dataProcessor("src/gantt2.php");
dp.init(gantt);
function showGroups(listname) {
if (listname) {
var relation = listname == 'usergroups' ? 'user' : listname;
gantt.groupBy({
groups: gantt.serverList(listname),
relation_property: relation,
group_id: "key",
group_text: "label"
});
} else {
gantt.groupBy(false);
}
}
</script>
</body>
===================