We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Icons for Gantt not getting displayed/Unable to find out events

Hello,

I'm able to produce chart on the page,but no icons getting displayed. Not sure where to find and place the icons/images in project. Another problem is,there is no documentation on events e.g. 

1) when i click add task below,how to enter that into database
2) Is there any way so that i can open up my custom popup e.g. for task
2) When i edit predecessor,how to store it into database.

There are so many operations which needs to be handled in order to enter them into database. Can somebody please guide me a way to implement this?

7 Replies

JS Jonesherine Stephen Syncfusion Team October 5, 2016 10:52 AM UTC

Hi Manish, 
Please find the response below 
Query1: But no icons getting displayed. Not sure where to find and place the icons/images in project  
Solution: In Gantt, the icons/images gets referred from common Images folder. So we need to include this folder in the Themes folder where we have included “ej.widgets.core.min.css” file. 
 
Location: [InstalledLocation]\Syncfusion\EssentialStudio\14.x.x.xx\JavaScript\samples\web\content\ejthemes\common-images 
Query2: Another problem is, there is no documentation on events 
Solution: 
Please find our online documentation regarding events in Gantt 
Query 3:  when I click add task below, how to enter that into database, When I edit predecessor, how to store it into database. 
Solution: 
We have prepared the work around and updated the Gantt on add, edit, delete and drag/drop action. By using the Gantt client side events “actionComplete”,”rowDragStop” we have updated the Gantt on add,edit,delete and drag/drop action.  
Please find the code example below: 
[cshtml] 
         
 @(Html.EJ().Gantt("Gantt"). 
       TaskIdMapping("TaskId"). 
       ClientSideEvents(eve => 
       { 
           eve.ActionComplete("actionComplete");        
           eve.RowDragStop("rowDragStop"); 
       }). 
    ) 
    @(Html.EJ().ScriptManager()) 
    <script type="text/javascript">        
        function rowDragStop(args) { 
            //To update the database on drop action 
            var cloneData = $.extend ({}, args.draggedRow.item); 
            cloneData = args.draggedRow.item; 
            cloneData[args.model.parentTaskIdMapping] = args.targetRow.item[args.model.taskIdMapping]; 
            var data = cloneData; 
                        $.ajax({ 
                type: "POST", 
                url: '/Gantt/Update', 
                data: data, 
                dataType: "json",                 
            });                   
        }; 
      
        function actionComplete(args) {          
            //To update on indent,outdent and taskbar editing action 
            if (args.requestType == "indent" || args.requestType == "outdent" || args.requestType == "recordUpdate") { 
                 
                var data = args.data.item; 
                $.ajax({ 
                    type: "POST", 
                    url: '/Gantt/Update', 
                    data: data, 
                    dataType: "json", 
                }) 
            } 
            //To update the database while adding new record 
            if (args.requestType == "save" && args.addedRecord) { 
                var data = args.addedRecord.item;                
                $.ajax({ 
                    type: "POST", 
                    url: '/Gantt/Add', 
                    data: data, 
                    dataType: "json", 
                }); 
            } 
            //To update the database on delete action 
            if (args.requestType == "delete") {                
                var data = args.data.item;                
                $.ajax({ 
                    type: "POST", 
                    url: '/Gantt/Delete', 
                    data: data, 
                    dataType: "json", 
                }); 
                if (args.data.hasChildRecords) { 
                    deleteChildRecords(args.data); 
                } 
            } 
 
        }    
     
        //Delete inner level child records 
        function deleteChildRecords(record) { 
            var childRecords = record.childRecords, 
                length = childRecords.length, 
                count, currentRecord; 
            for (count = 0; count < length; count++) { 
                currentRecord = childRecords[count]; 
                var data = currentRecord.item;               
                $.ajax({ 
                    type: "POST", 
                    url: '/Gantt/Delete', 
                    data: data, 
                    dataType: "json", 
                }); 
               if (currentRecord.hasChildRecords) { 
                    deleteChildRecords(currentRecord); 
                } 
            } 
        } 
    </script> 
We have also prepared the sample for your reference. Please find the sample from below location: 
 
Query4: Is there any way so that i can open up my custom popup e.g. for task 
Solution: Please let us know whether we need to customize the Gantt tooltip or Gantt dialog edit. It will be help full for us to serve you better. 
Please let us know if you require further assistance on this. 
Regards, 
Jone sherine P S 



MD Manish dhariwal October 6, 2016 12:03 PM UTC

Thank you Jone for your response. I implemented this code. Now,i'm able to update entries while dates/name etc changes. But,When i drag and drop the task or make indent/outdent the task,its not giving me proper results. Its getting updated on UI,but i'm not getting values on update.See the code below:
............
.TaskIdMapping("TaskID")
 .TaskNameMapping("TaskName")
.StartDateMapping("EstimatedStartDate")
.EndDateMapping("EstimatedEndDate")
.ChildMapping("SubTasks")
...........................
ClientSideEvents(e=>
{
    e.ActionComplete("ActionComplete");
    e.RowDragStop("rowDragStop");
})
.....

My functions are as follows:

function rowDragStop(args) {        
        var cloneData = $.extend({}, args.draggedRow.item);
        cloneData = args.draggedRow.item;
        cloneData[args.model.parentTaskIdMapping] = args.targetRow.item[args.model.taskIdMapping];
        updateTasks(cloneData);
    };
    function ActionComplete(args) {
        if (args.requestType == "indent" || args.requestType == "outdent" || args.requestType == "recordUpdate") {
            updateTasks(args.data.item);
        }
    }
    function updateTasks(Task) {
        $.ajax({
            type: "POST",
            url: 'Update',
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify(Task),
            dataType: "json",
            success: function (e) {

            }
        })
    }

For example, There is a task 'Parent(TaskID=01)' and which task 'Child(TaskID=02)'. Now when i outdent the Child,the data still shows the parentID as 01. Same issue occurs when i drag and drop the Task on another task. Am i missing something? As you can see, i've not mentioned parent id mapping in view because when i include it,its showing error in ej.web.all.min.js : can not read 'EstimatedStartDate' of null. 

Question : Please let us know whether we need to customize the Gantt tooltip or Gantt dialog edit. It will be help full for us to serve you better
 What i'm trying to do is,say for example if someone clicks on add,i wanted to open up my own popup. For that,i'm using this code:
function ActionBegin(args) {        
        if (args.requestType == "openAddDialog")                             
......
}
This code is getting executed successfully,but my popup is not getting displayed and only the default popup is coming. 

Regards,
Manish Dhariwal


JS Jonesherine Stephen Syncfusion Team October 7, 2016 08:54 PM UTC

Hi Manish, 
Please find the response below: 
Query1: There is a task 'Parent (TaskID=01)' and which task 'Child (TaskID=02)'. Now when i outdent the Child, the data still shows the parentID as 01. Same issue occurs when i drag and drop the Task on another task. Am i missing something? 
Solution: 
In Gantt, we need to map the “parentID” in self reference datasource to update the records on Indent/Outdent/drag&drop action then only the record will be updated accordingly.  
 
Query2: As you can see, i've not mentioned parent id mapping in view because when i include it, its showing error in ej.web.all.min.js : cannot read 'EstimatedStartDate' of null.  
Solution: We have analysed the reported issue with our sample. We are unable to reproduce the issue. Can you please share us the exact replication procedure. This would be helpful us to serve you. 
 
Query3: customize Gantt dialog add 
Solution: 
We can cancel the default add popup by using “actionBegin” client side event and we can append the custom dialog in it. But we can’t able to validate the added records while saving it.  
Please find the code example below: 
<script type="text/javascript"> 
function actionBegin(args) { 
            if (args.requestType == "openAddDialog") { 
                  // to cancel the default add popup 
                args.cancel = true; 
                $("#basicDialog").ejDialog({ 
                    // we can customize the pop here 
                }); 
 
            } 
        } 
</script> 
At present there is no support for custom dialog add in Gantt. Hence we have logged a feature report regarding these feature. This feature can be tracked through our Feature Management. It will be implemented in any of our upcoming main release.   
 
Please let us know if you need further assistance on this. 
Regards, 
Jone sherine P S 



MD Manish dhariwal October 12, 2016 02:27 PM UTC

Question : We have analysed the reported issue with our sample. We are unable to reproduce the issue. Can you please share us the exact replication procedure. This would be helpful us to serve you. 

Prepare the datasource as follows:

public partial class TaskData
    {
        public int TaskID { get; set; }
        public string TaskParentName { get; set; }
        public string TaskName { get; set; }
        public string Priority { get; set; }
        public Nullable<int> ParentID { get; set; }
        public Nullable<int> EstimatedHours { get; set; }
        public Nullable<System.DateTime> EstimatedStartDate { get; set; }
        public Nullable<System.DateTime> EstimatedEndDate { get; set; }      
        public List<int> LstResources { get; set; }
        public List<TaskData> Subtasks{ get; set; }
    }

Now there should be no mapping on view for parentid. And then create relation ship in such a way that Task 1 has subtask Subtask1. Now,outdent Subtask1.

What is expected : The parent Id for Subtask1(that is id of Task 1) should be removed. But when i get item by args.addedRecord.item inside ActionComplete,it still shows parentid. 

What i did : 

Cond.1  I removed all the parent ids from backend(DB). That is, there is no child parent relation ship. 

Now,added parentidmapping. Outdent Indent works as expected. But when i reload the page,it's showing the same error as explained previously - Cannot set property 'EstimatedEndDate' of undefined. The reason is,now one of the task has parentId. Obesrve the Cond. 1.

Bottom line is,its working as expected when there are no childs. It stops working when one of the task has parent id (With parent id mapping in place)

Error is in ej.web.all.min.js on line o.item[i.endDateMapping]=o.endDate. I've already defined the enddatemapping. Request you to provide any way to overcome this.

PFA view file.

Attachment: gantt_ac130948.rar


JS Jonesherine Stephen Syncfusion Team October 13, 2016 07:09 PM UTC

Hi Manish, 
Please find the response below: 
Things to be considered while rendering Gantt with SQL data: 
1.      The SQL datasource will be a self-reference datasource. So we should map the “parentId” to enable the parent-child hierarchy. 
2.      During Indent/Outdent /Add and drag&Drop action the parentId will be updated on the database. Then only we can retrieve the proper data (relationship) after reloading. 
3.      If parentId is not mapped the parent-child relationship would not be updated in the database. 
 
We have analysed the reported issue with our sample. We are unable to reproduce the issue. We have prepared the sample with v14.2.0.26 for your reference. 
Can please revert us by modifying the sample based on your application or your full project with us .And also share  your product version with us. This would be helpful for us to serve you. 
 
Regards, 
Jone sherine P S 



MD Manish dhariwal October 14, 2016 01:15 PM UTC

Thanks for your help.

I resolved the issue. The problem was that i was having main list of parents only. Childs where there in sublist. Gave full list and Gantt plotted as expected. Thanks a lot.


JS Jonesherine Stephen Syncfusion Team October 17, 2016 05:14 AM UTC

Hi Manish, 
Thanks for your update 
We are happy that issue has been resolved at your end. 
Please let us know if you have any concerns. 
Regards, 
Jone sherine P S 


Loader.
Up arrow icon