Gantt group info

Hi

I edited this post and will make 2 separate posts for my issues. :frowning:

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

<?php include ("../codebase/connector/db_mysqli.php"); include ("../codebase/connector/gantt_connector.php"); // Mysql $dbtype = "MySQLi"; $res=mysqli_connect("right", "user", "password","table_name"); $gantt = new JSONGanttConnector($res, $dbtype); $gantt->render_links("gantt_links", "id", "source,target, type"); $gantt->render_table("gantt_tasks", "id", "start_date,duration,text,end_date,parent,progress,sortorder,color,training_type,country,baseline,masl,lm_plan_startdate,lm_actual_startdate,actual_delivery_date,location,work_package_status,work_package_req_approval_date,delivered_status,status_notes",""); ?>

===================

===================
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>

===================

Hello Ron,
You can try applying the following method:

1 Like

Thanks for your reply ramil, I will look into this and give it a try.

Thanks for the help ramil!

I was able to use the server list method.