DHTMLX Docs & Samples Explorer

Step Three - Saving Changes

We have data, it can be edited, there's only one little thing left - to save it.

In theory there's a possibility in dhtmlxgrid to integrate with server code, but this opportunity is included only into the PRO version.
That's why it's time for a workaround.

In order not to complicate the thing that is already simple, we add a “Save” button, a click on which transforms the grid back to CSV and sends it to the server:

Code (javascript):

  • function
save_data(){
  • document.forms[0].submit();
  •  }

At the same time we add a couple of code lines to make the changed data noticeable:

Code (javascript):

  • grid.attachEvent("onEditCell",function(stage,id,ind){ //in case of editing
  • if (stage==2) // when it is finished
  • grid.setRowTextStyle(id,"font-weight:bold;"); // mark the line
  • return true;
  • })

Everything is simpler on the server side:

Code (php):

  • if (isset($_POST["data"]))
  • file_put_contents("data.csv",$_POST["data"]);
Authorization code is omitted.
Naturally, such approach of overwriting the data source is too straight and doesn't have right to exist in real life. But why not at the stage of prototype?

With all these changes introduced we have the next version of the prototype that can load data, allows to edit data and saves the result on the server (it took me much more time to describe the process rather than to create the prototype).