Example does not work

6 posts, 0 answers
  1. Christof
    Christof avatar
    11 posts
    Member since:
    Apr 2015

    Posted 28 Apr 2015 Link to this post

    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?

  2. Dimitar Terziev
    Admin
    Dimitar Terziev avatar
    1266 posts

    Posted 30 Apr 2015 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. UI for ASP.NET AJAX banner
  4. Christof
    Christof avatar
    11 posts
    Member since:
    Apr 2015

    Posted 30 Apr 2015 in reply to Dimitar Terziev Link to this post

    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

  5. Christof
    Christof avatar
    11 posts
    Member since:
    Apr 2015

    Posted 30 Apr 2015 in reply to Christof Link to this post

    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?

  6. Dimitar Terziev
    Admin
    Dimitar Terziev avatar
    1266 posts

    Posted 04 May 2015 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  7. Christof
    Christof avatar
    11 posts
    Member since:
    Apr 2015

    Posted 22 May 2015 in reply to Dimitar Terziev Link to this post

    Hi Dimitar

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

     

    Cheers

Back to Top
UI for ASP.NET AJAX banner