How to refresh gantt after sendData() ?


#1

Hi there,

I’m now trying to update data using gantt and DataProcessor.
I’ve followed the page dhtmlx.com/docs/products/dhtmlx … _once.html
and my codes are the almost the same as they are:

	<script>
		var myGrid, myDataProcessor;
		function doOnLoad(){
			// init grid and set its parameters (this part as always)
			myGrid = new dhtmlXGridObject('gridbox');
			myGrid.setImagePath("../../../codebase/imgs/");
			myGrid.setHeader("Sales,Book Title,Author,Price,In Store,Shipping,Bestseller,Date of Publication");
			myGrid.setInitWidths("80,150,100,80,80,80,80,100");
			myGrid.setColAlign("right,left,left,right,center,left,center,center");
			myGrid.setColTypes("dyn,ed,txt,price,ch,coro,ch,ro");
			myGrid.setColSorting("int,str,str,int,str,str,str,date");
			myGrid.enableAutoWidth(true);
			myGrid.init();
			myGrid.parse(data);
			//
			myDataProcessor = new dataProcessor("./action?user_id=1"); 
			myDataProcessor.setTransactionMode("POST",true); 
			myDataProcessor.setUpdateMode("off"); 
			myDataProcessor.init(myGrid); 
		}
	</script>
	<input type="button" name="some_name" value="update" onclick="myDataProcessor.sendData();">

I use Java with Eclipse and jsp for my app.
What I want to implement is to:

  1. Insert some new rows into gantt, and click the update button for “myDataProcessor.sendData()”.
  2. The server-side receives the data and update database.
  3. Refresh gantt chart and show users the updated data.

I see my codes work for No.1 and No.2. The database is updated correctly.
and I see the server-side selects the updated data from database again in order to show the data with new ids (not temporary ids which gantt created) but the window won’t be re refreshed.

It seems I might be able to use onFullSync(), onAfterUpdateFinish, but where those events occur?
I seems the client-side receives the response after “sendData()” but how?

Please let me know if there are any samples?
Any small clues are appreciated. I tried finding any but I couldn’t eventually.
Thank you in advance.


#2

Hello,
If you use only Gantt and want to modify the tasks, we already have examples for various backends where you can save the data to the database and show it in the chart:
docs.dhtmlx.com/gantt/desktop__ … uides.html
But if you change the database without Gantt and want to load the data from the database, you need to use clearAll() and load functions:
docs.dhtmlx.com/gantt/api__gantt_clearall.html
docs.dhtmlx.com/gantt/api__gantt_load.html
This article also explains some details related to server-side integration:
docs.dhtmlx.com/gantt/desktop__server_side.html


#3

Hey,
I updated the task data but it needs page to be reloaded to show the changes in the list of task.
So then I tried this,

gantt.attachEvent(“onAfterTaskUpdate”, function(id,item){
gantt.clearAll();
gantt.load("/gantts/api/data?gantt_chart_id=" + chart_id, “json”);
});

It worked, but at cost of reload full page.

Is there any way by which I can somehow refresh the data for that specific task.

Sorry for the code indentation(could not find a way around to indent it properly)
Thanks in Advance.


#4

Hello Tejas,
Usually, if you add, update or delete tasks, the chart should be repainted.
If you do that via API commands, you need to call the gantt.updateTask or gantt.render methods to repaint the changes.
The only case when the tasks are not repainted is when you call the API methods inside the gantt.silent method:
https://docs.dhtmlx.com/gantt/api__gantt_silent.html

And if you update a task, you don’t need to clear the data and reload it from the server. Could you clarify why you want to do that?


#5

Hey Ramil,
How and where can I use this gantt.updateTask method. And also I tried gantt.render() method in the afterTaskUpdated method but still it does not show the updated data, still I need to refresh the page.

Or else where is the documentation for task updating, Please share the link if there is any documentation as such or example would be fine too.

Thank you


#6

Hello Tejas,
If you load the data from the server via the gantt.load method, Gantt should be repainted. It is also repainted when you use the gantt.parse method:
https://docs.dhtmlx.com/gantt/api__gantt_load.html
https://docs.dhtmlx.com/gantt/api__gantt_parse.html
Here is an example:
http://snippet.dhtmlx.com/5/a2f82344c

If you update a task via the API methods, you need to call the gantt.updateTask method:
https://docs.dhtmlx.com/gantt/api__gantt_updatetask.html
Here is an example of how it works:
http://snippet.dhtmlx.com/5/f57005e69

If that still doesn’t help you, please, describe your use case in more detail, and tell me where and how you update tasks.


#7

Hey Ramil,
My issue is solved, I think my data mapping was wrong so when I corrected it everything started working fine, Thank you!