Example does not work

[Christof]

I downloaded the example and loaded it on my test server. The gantt chart loads initially empty. When I click "Add Task" I get an error in the console "Uncaught TypeError: Cannot read property 'start' of undefined kendo.all.min.js:52".

 I tried in Chrome and Firefox, same problem.

 

Any help on what's wrong here?

[Dimitar Terziev]

Hi Christof,

I have tried to replicate the experienced problem, but to no avail. Here is a video showing the behaviour at my end when the demos are downloaded and the default gantt demo is loaded. Could you please clarify whether you have made any modifications to the demo prior to testing it?

Regards,
Dimitar Terziev
Telerik

 

 

[Christof]

Hi Dimitar

Thanks for your reply. I did not modify the demo. In the debug tools, there are no files that could not be loaded and there are no other errors in the console.

Since I don't really need to be able to create tasks in the browser, I went ahead and built an own example that loads the tasks from a JS array. So far everything else worked fine.

What's the best way to modify the behaviour of the chart in JS beyond the scope of what's available per default? Can I extend the JS components in some way and override some default behaviours? Here are some things I'm looking to do (per clients request):

• change background color of the rows in the left area of the chart (title, taskId, etc.) according to parent task. e.g. the phase "development" would be green, as well as the background color of it's tasks, whereas a phase "construction" would be blue.
• custom columns in left area of the chart with calculated values
• change column width of the timeline part of the chart
• add a table with some summary data at the bottom of the chart

I am quite comfortable with doing heavy lifting in JavaScript if there's a good way to extend/hook into the framework.

Any help on this?

Thanks.

Christof

[Christof]

Here is an example of a chart I need to create.

Like I said, I don't need out-of-the-box support for all this, I just need to be able to build upon the existing functionality.

Another question: if I was to extend the chart to display this way, would the PDF Export still work? How is it implemented?

[Dimitar Terziev]

Hi Christof,

Regarding your requirements:

• change background color of the rows in the left area of the chart (title, taskId, etc.) according to parent task. e.g. the phase "development" would be green, as well as the background color of it's tasks, whereas a phase "construction" would be blue. - In order to achieve such functionality the dataBound event is the appropriate hook for such modification. Here is a dojo snippet showing how to customize the color of the rows depending on the percentage complete value of the tasks. It is based on the following help article.
• custom columns in left area of the chart with calculated values - you could add custom columns and bind them to the desired  fields of the dataItem. :

• $customColumn = new \Kendo\UI\GanttColumn();
  $customColumn ->field("myCustomField")
              ->title("MyCustomColumnTitle")
              ->editable(true)
              ->sortable(true);

• change column width of the timeline part of the chart - The size of the time slot headers is controlled via the  slotSize property.
• add a table with some summary data at the bottom of the chart - such functionality is not supported out of the box from the gantt widget. You could append a custom DOM element to the bottom of the widget.

Regards,
Dimitar Terziev
Telerik

 

 

[Christof]

Hi Dimitar

 Thanks for your reply. I was able to apply my changes using the dataBound hook and custom attributes.

 

Cheers