Adding Gantt Task from AngularJs controller & Highlighting it

4 posts, 0 answers
  1. Anand
    Anand avatar
    2 posts
    Member since:
    May 2016

    Posted 08 Nov 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
    278 posts

    Posted 10 Nov 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. Kendo UI is VS 2017 Ready
  4. Anand
    Anand avatar
    2 posts
    Member since:
    May 2016

    Posted 17 Nov 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

  5. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    278 posts

    Posted 17 Nov 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.
Back to Top
Kendo UI is VS 2017 Ready