This is a migrated thread and some comments may be shown as answers.
Adding Gantt Task from AngularJs controller & Highlighting it
5 Answers 19 Views
This is a migrated thread and some comments may be shown as answers.
Anand
Top achievements
Rank 1
Anand asked on 08 Nov 2016, 12:53 PM

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.

 

 

 

5 Answers, 1 is accepted

Sort by
0
Veselin Tsvetanov
Telerik team
answered on 10 Nov 2016, 08:58 AM
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.
 
0
Anand
Top achievements
Rank 1
answered on 17 Nov 2016, 06:30 AM

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

0
Veselin Tsvetanov
Telerik team
answered on 17 Nov 2016, 12:59 PM
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.
0
Anand
Top achievements
Rank 1
answered on 05 Jan 2017, 10:23 AM

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.
0
Accepted
Veselin Tsvetanov
Telerik team
answered on 09 Jan 2017, 10:09 AM
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.
Tags
Gantt
Asked by
Anand
Top achievements
Rank 1
Answers by
Veselin Tsvetanov
Telerik team
Anand
Top achievements
Rank 1
Share this question
or