Adding Gantt Task from AngularJs controller & Highlighting it

6 posts, 1 answers
  1. Anand
    Anand avatar
    5 posts
    Member since:
    May 2016

    Posted 08 Nov 2016 Link to this post

    Hello,

     This is My gantt config Object

    $scope.ganttOptions = {

    dataSource: tasksDataSource,
    views: ["day",{type: "week", selected: true},"month"],
    footer: false,
    columns: [
    {field: "title", title: "Title", editable: true},
    {field: "assignedTo", title: "Assigned To", editable: true}
    ],
    toolbar: [
    {name: "append"},
    {name: "pdf"}
    ],
    height: 400,
    add:addTask

    }

     

    How to add Custom Task  and Highlight it?

    I am using this function

    function addTask(e){
    var number= Math.floor((Math.random() * 5000) + 1);

    e.preventDefault()

    if(e.task.parentId){

    var customTaskObject = {
    "id": number,
    "parentId":e.task.parentId,
    "title": "Sample Child Task",
    "start": e.task.start,
    "end": e.task.end,
    "summary": false,
    "expanded": true,
    "PercentComplete":"",
    "originalTaskObject":"",
    "orderId": e.task.orderId
    }

    }

    else{
    console.log("No Parent Selected")
    parentTaskId=0;
    var customTaskObject = {
    "id": number,
    "parentId":null,
    "title": "Sample Task",
    "start": e.task.start,
    "end": e.task.end,
    "summary": false,
    "expanded": true,
    "PercentComplete":"",
    "originalTaskObject":"",
    "orderId": e.task.orderId,
    }

    $scope.gantt.dataSource.add(customTaskObject)
    }

    The Above code is adding the Task only in the last position even after selecting "Add Above" option.

    What is the issue here? and how to highlight the latest added task (I tried Select method by getting index value..but it is not highlighting the correct task).

     

    PS:Without e.preventDefault() method it is working absolutely fine,but i want to add Task through controller with custom field names.

     

     

     

  2. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    516 posts

    Posted 10 Nov 2016 Link to this post

    Hi Anand,

    To highlight the newly created task you could access its row by TaskID and then select it:
    var tr = $("span:contains('" + number + "')" ).closest('tr');
    gantt.select(tr);

    Simple implementation of the above could be found in the following Dojo.

    Concerning the second part of your question, the DataSource add() method always inserts an item at the bottom of the current list. If you need to take into account the Insert above / below options, you will need to avoid preventing the default action.

    Moreover, I would recommend you to move you custom implementation to the change event handler of the DataSource, instead of the add event handler of the Gantt. Here you could find a simple implementation of the above. Note that the changes are made directly on the inserted Task and the event is not prevented. 

    I hope that this helps you. If you have any further questions, please do not hesitate to contact us.

    Regards,
    Veselin Tsvetanov
    Telerik by Progress
     
    Build rich, delightful, *native* Angular 2 apps with Kendo UI for Angular 2. Try it out today! Kendo UI for Angular 2 (currently in beta) is a jQuery-free toolset, written in TypeScript, designed from the ground up to offer true, native Angular 2 components.
     
  3. Anand
    Anand avatar
    5 posts
    Member since:
    May 2016

    Posted 17 Nov 2016 in reply to Veselin Tsvetanov Link to this post

    Hello Veselin Tsvetanov,

     

    Thanks for replying.

    I understood the onChange event handler,but still i am stuck 

    so basically, after adding task(without event.preventDefault)..it calls onChange Method. Inside the onChange method

     

    if (e.action == 'add') {

    e.task="Changed Task Name"

    }   //This Code works fine

     

    but 

     

    if (e.action == 'add') {

     

     $http.post("apiUrl.com")
        .then(function(response) {

        e.task=response.name;

        e.id=response.id    //These changes are not reflecting on Gantt, (I am getting id from server response only).

        });

     

    }

     

    Please tell me what i am doing wrong in this ?or is there any other way i should approach?

     

    PS: Please reply asap.

    Thank you

  4. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    516 posts

    Posted 17 Nov 2016 Link to this post

    Hello Anand,

    The changes are not respected, because you are getting the information from an AJAX call, which is asynchronous. This means, that your $http.post() call is made, but before the response is received, the Task has already been processed and saved with its default settings. 

    Please note that in the DataSource change event, the event argument object does not have fields for task or id. you will have to access first the newly created item (task), which has title and id, as shown in the sample sent.

    Regards,
    Veselin Tsvetanov
    Telerik by Progress
    Kendo UI is ready for Visual Studio 2017 RC! Learn more.
  5. Anand
    Anand avatar
    5 posts
    Member since:
    May 2016

    Posted 05 Jan Link to this post

    Hello Veselin Tsvetanov,

    So how can I add a new Task on selected position() into Gantt after calling the AJAX call ? 

    My scenario:-

    On clicking Add button, it should make the ajax call and then add into Gantt chart on selected position(below/above).As I am getting Task ID from server response only.

    Could you please explain with sample code in angularJs?

    Ps:Sorry for Late response.
  6. Answer
    Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    516 posts

    Posted 09 Jan Link to this post

    Hello Anand,

    I am afraid, that the required customization of the Add Gantt task functionality could not be achieved, when having an AJAX within the change event handler. Therefore, I would suggest to get the Task ID directly on the server within the Update action.

    Regards,
    Veselin Tsvetanov
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top