How I can retrieve the updated values?

[giorgio]

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

[Jonesherine Stephen]

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 

Knowledge Base: https://www.syncfusion.com/kb/5562/how-to-update-changes-from-gantt-control-to-sql-database 

We have also prepared the sample based on this. Please find the sample from the below location  

Sample: http://jsplayground.syncfusion.com/Sync_opet2suu 

Please let us know if you require further assistance on this.  

Regards             

Jone Sherine .P.S.   

[giorgio]

Perfect.

[giorgio]

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

[Jonesherine Stephen]

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 

Sample: http://jsplayground.syncfusion.com/Sync_bd1r4w1s 

Please let us know if you require further assistance on this.   

Regards              

Jone Sherine .P.S.   

[giorgio]

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 

Sample: http://jsplayground.syncfusion.com/Sync_bd1r4w1s 

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

[Jonesherine Stephen]

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  

Sample: http://jsplayground.syncfusion.com/lau31sij 

Please let us know if you require further assistance on this.    

Regards               

Jone Sherine .P.S.