Hi guys,
I have horizontal scroll bar on my gantt chart, however I do not have a vertical one. So when there are tasks running below the page I cannot see or get to them.
From what i have read the vertical and horizontal scroll should be their by default. I could only get the horizontal scroll by setting the following property gantt.config.autosize = “y”; If I tried to set this to gantt.config.autosize = “xy”; I get no scroll bars.
Can someone point me in the right direction - thanks. Main .js code below
[code](function () {
// Set the Gantt Properties
gantt.config.grid_width = 400;
gantt.config.autosize = “y”;
gantt.config.columns = [
{ name: “text”, label: “Task name”, tree: true, width: ‘100’ },
{ name: “holder”, label: “Holder”, align: “center” },
{ name: “start_date”, label: “Start time”, align: “center” },
{ name: “end_date”, label: “End date”, align: “center” },
{ name: “progress”, label: “Progress”, align: “center” },
{ name: “add”, label: “”, width: 44 }
];
gantt.config.show_progress = true;
//gantt.config.fit_tasks = true;
gantt.config.task_height = 25;
gantt.config.order_branch = true;
// set the timescale
function setScaleConfig(value) {
switch (value) {
case "1":
gantt.config.scale_unit = "day";
gantt.config.step = 1;
gantt.config.date_scale = "%d %M";
gantt.config.subscales = [];
gantt.config.scale_height = 27;
gantt.templates.date_scale = null;
break;
case "2":
var weekScaleTemplate = function (date) {
var dateToStr = gantt.date.date_to_str("%d %M");
var endDate = gantt.date.add(gantt.date.add(date, 1, "week"), -1, "day");
return dateToStr(date) + " - " + dateToStr(endDate);
};
gantt.config.scale_unit = "week";
gantt.config.step = 1;
gantt.templates.date_scale = weekScaleTemplate;
gantt.config.subscales = [
{ unit: "day", step: 1, date: "%D" }
];
gantt.config.scale_height = 50;
break;
case "3":
gantt.config.scale_unit = "month";
gantt.config.date_scale = "%F, %Y";
gantt.config.subscales = [
{ unit: "day", step: 1, date: "%j, %D" }
];
gantt.config.scale_height = 50;
gantt.templates.date_scale = null;
break;
case "4":
gantt.config.scale_unit = "year";
gantt.config.step = 1;
gantt.config.date_scale = "%Y";
gantt.config.min_column_width = 50;
gantt.config.scale_height = 90;
gantt.templates.date_scale = null;
var monthScaleTemplate = function (date) {
var dateToStr = gantt.date.date_to_str("%M");
var endDate = gantt.date.add(date, 2, "month");
return dateToStr(date) + " - " + dateToStr(endDate);
};
gantt.config.subscales = [
{ unit: "month", step: 3, template: monthScaleTemplate },
{ unit: "month", step: 1, date: "%M" }
];
break;
}
}
setScaleConfig('2');
var func = function (e) {
e = e || window.event;
var el = e.target || e.srcElement;
var value = el.value;
setScaleConfig(value);
gantt.render();
};
var els = document.getElementsByName("scale");
for (var i = 0; i < els.length; i++) {
els[i].onclick = func;
}
// configure milestone description
gantt.templates.rightside_text = function (start, end, task) {
if (task.type == gantt.config.types.milestone) {
return task.text;
}
return "";
};
// add section to type selection: task, project or milestone
gantt.config.lightbox.sections = [
{ name: "description", height: 70, map_to: "text", type: "textarea", focus: true },
{ name: "type", type: "typeselect", map_to: "type" },
{ name: "time", height: 72, type: "duration", map_to: "auto" }
];
gantt.config.xml_date = "%Y-%m-%d %H:%i:%s"; // format of dates in XML
gantt.init("ganttContainer"); // initialize gantt
// Load Data from Gantt Tasks and GanntLinks Tables
gantt.load("/Project/GanttTasks/Data", "json");
// enable dataProcessor
var dp = new dataProcessor("/Project/GanttTasks/Save");
dp.init(gantt);
})();[/code]