Adding Gantt Task from AngularJs controller & Highlighting it

[Anand]

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.

 

 

 

[Veselin Tsvetanov]

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

 

 

[Anand]

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

[Veselin Tsvetanov]

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

[Anand]

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.

[Veselin Tsvetanov]

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