Save and Load from Json model

Gantt
#1

Hi,
Is it possible to save and load from json model? I am very newbie in Javascript. Currently I am using Laravel 5.5. Recently I have successfully implemented diagram javascript (GoJS), the save and load button correspond to:
function save() {
document.getElementById(“mySavedModel”).value = myDiagram.model.toJson();
}
function load() {
myDiagram.model = go.Model.fromJson(document.getElementById(“mySavedModel”).value);
}
and the json can be seen in :
In the Controller, i just put :
{{ Form::hidden(‘mySavedModel’, ‘secret’, array(‘id’=>‘mySavedModel’)) }}

So, in database, I just make a mediumtext column (MariaDB) which stores the entire json value.
It is much simpler because in the table i just have name, description, and jsonvalue column.
Sorry if my writing does not look so good, I am still learning PHP Laravel and Javascript.
Thank you for your assistance

#2

Hi,
Please disregard my above post. It is much much nicer your implementation regarding saving and loading from database. I dont have to hit any save or load button, it is automatically saved in database. Now, I just need to figure out calling Task that only has parent = 0.

#3

Dear DHTMX Gantt Chart,

About the above topic, can you point me to the right direction how to save the json after modify the Gantt chart?
In one of your sample, there is a function load i.e.:
gantt.load("…/common/data.json", “json”);
or : gantt.parse(data)
So I am thinking to replace the variable with <?php echo $data; ?>, instead
However, regarding the save json, I have not find it.
Can you please show me?
Many thanks
Herry

#4

Dear Team DHTMLX Gantt Chart,

In one of the forum (forum.dhtmlx.com/viewtopic.php? … on#p141679),
You say:
“And when it will be necessary, send data using sendData() method.”
So, is the below approach correct:

In my gantt.blade.php ( I am using Laravel):
gantt.init(“gantt_here”);
gantt.load(<?php $mydhtmlxgantt; ?>);
var dp = new gantt.dataProcessor(<?php $mydhtmlxgantt; ?>);
dp.init(gantt);
dp.setTransactionMode(“JSON”);

function save() {
document.getElementById(’$mydhtmlxgantt’).value = dp.sendData();
}

And in my update form:
Update Data

Please kindly advise.
Many thanks
Herry

#5

Yup confirm its working:

I am using Laravel 5.5, in my web.php:

Route::get('ganttshow/{id}', 'GanttController@ganttshow');

In my GanttController:

public function ganttshow($id) { $project = Task::findOrFail($id); // return $project->projecttask; return view('pages.gantt.ganttshow', [ 'project' => $project ]); }

In my ganttshow view:

<body> <div id="gantt_here" style="width:100%; height:500px;"></div> <script type="text/javascript"> gantt.init("gantt_here"); gantt.parse(<?php echo $project->projecttask; ?>, 'json'); </script></body>

The projecttask column is filled with data obtained from e.g. testdata.js in your sample file.

However, if I add this line:

gantt.config.xml_date = "%Y-%m-%d %H:%i:%s";

Its not working, the page just simply wont reload.

Now I will try the dpconnector. Hopefully its working. If it is, my question to the Sales Team is: can I first purchase the Single License, then if my app is sold to my Client, then I will renew into Enterprise License. Can I do that?
Many thanks

#6

Hello,

gantt.parse(<?php echo $project->projecttask; ?>, ‘json’);

It’s usually better to load data via ajax, instead of echoing them to the page from a backend.
Can you please check this tutorial
docs.dhtmlx.com/gantt/desktop__ … ravel.html
related demo: github.com/DHTMLX/gantt-howto-php-laravel

Right now we recommend coding laravel backend manually, as shown in the article, rather than using dhtmlxConnector.

And here is some general info on backend integration:
docs.dhtmlx.com/gantt/desktop__server_side.html
docs.dhtmlx.com/gantt/desktop__ … properties

Regarding licensing - yes, it’s possible to upgrade dhtmlxGantt Commercial license to Enterprise by purchasing dhtmlxGantt upgrade and support extension ($649). You’ll also get 12 months of ticket support and version updates.

#7

Dear Aliaksandr,

Thank you for your response. The thing is, I am not familiar with Ajax, so I prefer simple method in saving and loading data.
So in short, I have set the textarea:

[code]

<?php echo $task->projecttask; ?> [/code] and change the gantt parse function: [code] gantt.parse(document.getElementById("projecttask").value, 'json'); [/code] everything works perfectly i.e. the gantt chart loads nicely. However, after I add some modifications i.e. when I want to save using: [code]var dp = new gantt.dataProcessor(document.getElementById("projecttask").value); dp.init(gantt); dp.setTransactionMode("JSON"); function save() { document.getElementById("projecttask").value = dp.sendData(); } [/code] and by putting the respective save button: [code] [/code] the result in my textarea is "undefined' Can you please guide me on this. I just want the changes reflect in the textarea which shows the entire json data e.g. [code]{ "data":[ {"id":11, "text":"Project #1", "start_date":"02-01-2018", "duration":"11", "progress": 0.6, "open": true}, {"id":1, "text":"Project #2", "start_date":"01-01-2018", "duration":"18", "progress": 0.4, "open": true}, {"id":2, "text":"Task #1", "start_date":"02-01-2018", "duration":"8", "parent":"1", "progress":0.5, "open": true}, {"id":3, "text":"Task #2", "start_date":"11-01-2018", "duration":"8", "parent":"1", "progress": 0.6, "open": true}, ], "links":[ {"id":"1","source":"1","target":"2","type":"1"}, {"id":"2","source":"2","target":"3","type":"0"}, ] } [/code] Many thanks for your assistance.
#8

Apologize for my newbie-ness.
It works now. Your product AND your community forum is great.
After searching in your forum, the key is here:

function save() { document.getElementById("projecttask").value = JSON.stringify( gantt.serialize() ); }

It is now saved in database and can be loaded.
Thanks.