Column Order & Horizontal Scroll

edit-mode/function/ganttConfig.js

@@ -267,8 +267,6 @@ var allColumns = [
 	{ name: "action", label: colHeader, align: "left", min_width: 115, template: colContent, resize: true },
 	{ name: "kode_sortname", label: "Kode / Sortname", align: "center", min_width: 120, editor: editor.kode_sortname, resize: true },
 	{ name: "text", label: "Activity", tree: true, min_width: 150, editor: editor.text, resize: true },
-	{ name: "start_date", label: "Start Date", align: "center", min_width: 80, editor: editor.start_date, resize: true },
-	{ name: "end_date", label: "Finish Date", align: "center", min_width: 80, editor: editor.end_date, resize: true },
 	{
 		name: "planned_start", label: "Planned Start", align: "center", min_width: 80, editor: editor.planned_start, resize: true, template: function (text) {
 			if (!text.planned_start) {
@@ -285,6 +283,8 @@ var allColumns = [
 			return text.planned_end;
 		}
 	},
+	{ name: "start_date", label: "Start Date", align: "center", min_width: 80, editor: editor.start_date, resize: true },
+	{ name: "end_date", label: "Finish Date", align: "center", min_width: 80, editor: editor.end_date, resize: true },
 	{ name: "duration", label: "Duration (Day)", align: "center", min_width: 50, resize: true, editor: editor.duration },
 	{
 		name: "rencana_biaya", label: "Cost Planning", align: "right", min_width: 100, resize: true, template: function (text) {

edit-mode/function/ganttEvent.js

@@ -154,3 +154,30 @@ gantt.attachEvent("onTaskOpened", function (id) {
 gantt.attachEvent("onTaskClosed", function (id) {
     setGanttOpen()
 });
+
+gantt.attachEvent("onGanttScroll", function (left, top){
+  var left_date = gantt.dateFromPos(left)
+  var right_date = gantt.dateFromPos(left + gantt.$task.offsetWidth)
+  
+  gantt.config.start_date = gantt.config.start_date || gantt.getState().min_date;
+  gantt.config.end_date = gantt.config.end_date || gantt.getState().max_date;
+  
+  var min_allowed_date = gantt.date.add(gantt.config.start_date, 1, "day");
+  var max_allowed_date = gantt.date.add(gantt.config.end_date, -1, "day");
+
+  var repaint = false;
+  if (+left_date <= +min_allowed_date){
+    gantt.config.start_date = gantt.date.add(gantt.config.start_date, -1, "day");
+    repaint = true;
+  }
+  if (+right_date >= +max_allowed_date){
+    gantt.config.end_date = gantt.date.add(gantt.config.end_date, 1, "day");
+    repaint = true;
+  }
+  
+  if (repaint) {
+    setTimeout(function(){
+      gantt.render()
+    },20)
+  }
+});