Is there an update to the MVC example for gantt? it doesnt

Gantt
#1

hi
In this article, dhtmlx.com/blog/using-dhtmlx … p-net-mvc/ it shows making an MVC application for a gantt chart.

But the example doesnt quite work, there are missing steps, many folks who wrote on that page said they (like me) followed each step perfectly, 100% and it doesnt work.

the example shows a full but empty gantt by the end of step 1. but that does not show up. only the top part of the gantt, with only 2 words, Mar Apr .

the goal in my case, to construct the frame and manually build up the json array. I only display gantt data, have no need to save it.

[code](function () {
// add month scale
gantt.config.scale_unit = “week”;
gantt.config.step = 1;
gantt.templates.date_scale = 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.subscales = [
{ unit: “day”, step: 1, date: “%D” }
];
gantt.config.scale_height = 50;

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

})();[/code]

Now I realized, i used Nuget to install dhtmlx gantt, which by the way seems to be missing the hdhmlx.css file ?

will try the download version also…

#2

no, didnt matter with the download version. same

modified the file main.js so it only includes this much:

gantt.config.start_date = new Date(2013, 02, 31); gantt.config.end_date = new Date(2013, 03, 09); // gantt.config.xml_date = "%Y-%m-%d %H:%i:%s"; // format of dates in XML gantt.init("ganttContainer"); // initialize gantt

and then? now it shows the top of the gantt with task name start time Duration + and the right monthly columns but only the top half can be seen. the box is so small it bisects all of this text so only the top vertical half is visible, line goes thru the center of the + symbol there across, as if a size setting needs to be increased

#3

ok the problem was the size,

step 1 says:

change this to: width: 1000px; height: 600px;

and now in the main.js

gant.config.scale_height= 50;

now it shows up as an empty gantt frame as expected, height 100% made it 5px or so

#4

Hi,
gantt adjusts it’s sizes to the size of container, so when you use a relative size(percentage) for it, e.g.

you need to make sure that the parent of that container itself have some height, otherwise you'll get 100% of zero.

In the demo, the container is put directly into the element which does not have a default height, thus the default height is zero.
In order to display gantt, you need to expand the body element to 100% of the browser window, this is why following style is added to _Layout.cshtml in the first step of the tutorial:html, body { height: 100%; padding: 0px; margin: 0px; overflow: hidden; }If you miss it, the gantt will appear collapsed as it happened in your case