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
close icon

How I can retrieve the updated values?

HI, working on Javascript Gantt version, I would like to know how to retrieve the updated values after made some changes in the editor.
Also I would provide an external json file with values, (gantt.json) something like this:

     //DATA SOURCE DECLARATION OF GANTT CONTROL
        var data = [
             {
                 "TaskID": 1,
                 "TaskName": "Parent Task 1",
                 "StartDate": "02/23/2014",
                 "EndDate": "02/27/2014",
                 "Progress": "40",
                 "Children": [
                      { "TaskID": 2, "TaskName": "Child Task 1", "StartDate": "02/23/2014", "EndDate": "02/27/2014", "Progress": "40" },
                      { "TaskID": 3, "TaskName": "Child Task 2", "StartDate": "02/23/2014", "EndDate": "02/27/2014", "Progress": "40", },
                      { "TaskID": 4, "TaskName": "Child Task 3", "StartDate": "02/23/2014", "EndDate": "02/27/2014", "Duration": 5, "Progress": "40", }
                 ]
             },
             {
                 "TaskID": 5,
                 "TaskName": "Parent Task 2",
                 "StartDate": "03/14/2014",
                 "EndDate": "03/18/2014",
                 "Progress": "40",
                 "Children": [
                      { "TaskID": 6, "TaskName": "Child Task 1", "StartDate": "03/02/2014", "EndDate": "03/06/2014", "Progress": "40" },
                      { "TaskID": 7, "TaskName": "Child Task 2", "StartDate": "03/02/2014", "EndDate": "03/06/2014", "Progress": "40", },
                      { "TaskID": 8, "TaskName": "Child Task 3", "StartDate": "03/02/2014", "EndDate": "03/06/2014", "Progress": "40", },
                      { "TaskID": 9, "TaskName": "Child Task 4", "StartDate": "03/02/2014", "EndDate": "03/06/2014", "Progress": "40" }
                 ]
             }
]

After I manage some data in the editor, putting some predecessors and changing some durations, the json file will be updated accordingly?
Or How I could retrieve the updated json? So to save it into a database file?

thank you

6 Replies

JS Jonesherine Stephen Syncfusion Team June 28, 2016 12:05 PM UTC

Hi Giorgio, 
Thanks for contacting Syncfusion support. 
In “model.dataSource” we can get the updated JSON records.  
Please find the code snippet below: 
<div id="Ganttcontainer" style="height:450px;width:100%;" /> 
<script type="text/javascript"> 
  $(function () { 
 
            $("#Ganttcontainer").ejGantt({ 
                dataSource: projectData, 
                editSettings: { 
                    allowEditing: true, 
                    allowAdding: true, 
                    allowDeleting: true, 
                    allowIndent: true, 
                    editMode: "cellEditing" 
                }, 
                
            }); 
        }); 
 
        function clickme() { 
            var ganttObj = $("#Ganttcontainer").data("ejGantt"); 
            //To get the Updated Json Records 
            var data = ganttObj.model.dataSource; 
            //To alert the Updated JSON data 
            alert(JSON.stringify(ganttObj.model.dataSource)); 
        } 
    </script> 
 
While editing in Gantt the JSON file will not be updated accordingly, we need to do this in server side with updated JSON data value. 
Please find our Knowledge base to update the Gantt Database on add, edit, delete operations below 
We have also prepared the sample based on this. Please find the sample from the below location  
Please let us know if you require further assistance on this.  
Regards             
Jone Sherine .P.S.   



GI giorgio June 29, 2016 01:27 PM UTC

Perfect.


GI giorgio replied to giorgio June 29, 2016 02:47 PM UTC

Perfect.

Hi, I have another little problem. I've seen that in the task editor I can enable only the fields I want.

for example
editDialogFields: [{ field: "startDate", editType: "dateedit" }, { field: "endDate", editType: "dateedit" }, { field: "duration", editType: "numericedit" }]

I want to include field 'predecessor', which edittype I must use?
Thanks


JS Jonesherine Stephen Syncfusion Team June 30, 2016 05:47 AM UTC

Hi Giorgio,  
For default fields, default editType will be applied. So no need for declaring editType in those fields 
Please find the code snippet below:  
<div id="Ganttcontainer" style="height:450px;width:100%;" />  
<script type="text/javascript">  
  $(function () {  
  
            $("#Ganttcontainer").ejGantt({  
               dataSource: projectData, 
                predecessorMapping: "predecessor",                 
                editDialogFields: [{ field: "startDate", editType: "dateedit" }, { field:  "endDate", editType: "dateedit" }, { field: "duration", editType: "numericedit" }, { field: "predecessor"}],                
 
            });  
        });  
  
    </script>  
  
We have also prepared the sample for your reference please find the sample from below location 
Please let us know if you require further assistance on this.   
Regards              
Jone Sherine .P.S.   


GI giorgio replied to Jonesherine Stephen July 3, 2016 09:32 AM UTC

Hi Giorgio,  
For default fields, default editType will be applied. So no need for declaring editType in those fields 
Please find the code snippet below:  
<div id="Ganttcontainer" style="height:450px;width:100%;" />  
<script type="text/javascript">  
  $(function () {  
  
            $("#Ganttcontainer").ejGantt({  
               dataSource: projectData, 
                predecessorMapping: "predecessor",                 
                editDialogFields: [{ field: "startDate", editType: "dateedit" }, { field:  "endDate", editType: "dateedit" }, { field: "duration", editType: "numericedit" }, { field: "predecessor"}],                
 
            });  
        });  
  
    </script>  
  
We have also prepared the sample for your reference please find the sample from below location 
Please let us know if you require further assistance on this.   
Regards              
Jone Sherine .P.S.   

HI, all works perfect now, but one thing.

When I receive updated gantt info using your routine below,
 
        function clickme() { 
            var ganttObj = $("#Ganttcontainer").data("ejGantt"); 
            //To get the Updated Json Records 
            var data = ganttObj.model.dataSource; 
            //To alert the Updated JSON data 
            alert(JSON.stringify(ganttObj.model.dataSource)); 
        }

I checked that dates are returned as UTC, and this cause problems in conversion. I'm in Italy and all the dates are returned switched by 2 hours (1 legal) as a day before correcting day at one day before at 22.00.
Since I save data to db and thenrestore for visualization in gantt module, all the boundaries will be incorrect.
Could you help me, please?

Thank you,
Giorgio


Attachment: ProjectGantt1_b5070660.zip


JS Jonesherine Stephen Syncfusion Team July 4, 2016 09:27 AM UTC

Hi Giorgio,   
We regret for the inconvenience caused, 
We have prepared the work around and applied the required dateFormat to the converted date value. 
Please find the code snippet below:   
<div id="Ganttcontainer" style="height:450px;width:100%;" />  
<script type="text/javascript">  
  $(function () {  
  
            $("#Ganttcontainer").ejGantt({  
                dataSource: projectData,  
                editSettings: {  
                    allowEditing: true,  
                    allowAdding: true,  
                    allowDeleting: true,  
                    allowIndent: true,  
                    editMode: "cellEditing"  
                },  
                 
            });  
        });   
function clickme() { 
            var ganttObj = $("#Ganttcontainer").data("ejGantt"); 
            //To get the Updated Json Records 
            var data = ganttObj.model.dataSource; 
            //To alert the updated JSON value 
            alert(JSON.stringify(ganttObj.model.dataSource, replacer)); 
            function replacer(key, value) { 
                if (key == "startDate" || key == "endDate") { 
                    //To convert the date to required dateFormat 
                    return ej.format(new Date(value), ganttObj.model.dateFormat); 
                } else { 
                    return value; 
                } 
            } 
        }    
 </script>  
   
We have also prepared the sample for your reference please find the sample from below location  
Please let us know if you require further assistance on this.    
Regards               
Jone Sherine .P.S.    


Loader.
Live Chat Icon For mobile
Up arrow icon