DHTMLX Docs & Samples Explorer

Common Tasks & Errors

In this chapter we consider most popular tasks & errors you can face during development.

Common Tasks

Update completion

There are two events which can be used to catch finish of data sync operation:

dp.attachEvent("onAfterUpdateFinish",function(){
   alert("single row updated")
});
dp.attachEvent("onFullSync",function(){
   alert("all rows updated")
});

At any time, update state can be checked as follows:

dp.getSyncState()

which will return true if all data is synced with server and false otherwise

Manual row updating

DataProcessor detects a row changing only by edit operations. If a row was changed by a direct API calling, it will not be updated. In such case you can manually call the dataProcessor to inform about the update operation:

grid.cells(id,ind).setValue(new_one)
dp.setUpdated(id,true);

The row can be marked as “not updated” in the same manner (may be useful in some scenarios):

dp.setUpdated(id,false);

If you want to mark a row with status different from “updated” (not sure how it can be useful, but still) it can be done as shown below:

dp.setUpdated(id,true,"status name");

Error catching

Starting from version 2.1, dataProcessor has default reaction on “error” response type, which is used to report about server-side errors. The row marked as error will be highlighted in the grid. And it will not be sent back to the server until one of the next events occurs:
1. A user edits data in a row;
2. Rows set back to updated status through setUpdated() command.

Server-side validation

It's reaction on “invalid” status in a server-side response. It's similar to “error”, but has different visual marking.

If you want to extend it, you should do the following on the client-side:

dp.defineAction("invalid",function(response){
var message = response.getAttribute("message");
alert(message);
return true;
})

And some work on the server-side (if data is not valid a text message will returned):

<?xml version="1.0" encoding="UTF-8"?>
<data>
  <action sid="{gr_id}" type="invalid" message="Data in first column is not valid" />
</data>

Loading extra data during update

It's possible to extend default after-update reaction as:

dp.defineAction("updated",function(response){
    var sid = response.getAttribute("sid");
    var extra = response.getAttribute("extra");
    this.obj.cells(sid,0).setValue(extra);
    return true;
})

With such code you will be able to specify any additional data which needs to be updated in the grid after receiving xml response from the server:

<data>
 <action sid="{gr_id}" type="updated" tid="{gr_id}" extra="new value for first column" />
</data>

Sending extra data to server

In case of grid, if you'd like to send extra data in addition to ones, sent through dp.sendData(), you can use the method setUserData() (sets global userdata for a grid).

grid.setUserData("", "some", "value");

On server-side you can get the sent data through the onBeforeUpdate event:

dp.attachEvent("onBeforeUpdate",function(id,action){
  action.get_value(some);
  return true;
})

Also, it's possible to include any custom parameters directly in dataprocessor's url , used in client-side dataProcessor constructor:

var dp = new DataProcessor("some.php?field="+field_name);

on server-side for all calls you will have:

$_GET['field']

Partial data sending

If you update data 'partially' you can face the problem when only the first part is updated. For example, you have 3 columns in a grid and want to update some record. At first, you update the first cell. It's updated correctly. You try to update the second and third ones but they don't.
The following technique will help you to update 2 last cells:

cells(rId, 2).setValue(age);
cells(rId, 2).cell.wasChanged = true;//added
cells(rId, 3).setValue(gender);
cells(rId, 3).cell.wasChanged = true;//added

Changing URL

To change url of the dataprocessor after it's been initialized you can use following code:

dp.serverProcessor = "some_new_url";

Currently, there is no way to detach dataprocessor from an object. But you can use this technique and reset its url.

Common Errors

  • Incorrect XML error

The most probable cause is some server-side error which breaks the XML. You can enable debug console and check the response of the server-side to receive more information ( debug console can detect many types of xml-related errors and show the reasons of these problems )

  • Deleted rows are not removed from the grid

Actually it is not an error - the rows will be removed only after synchronizing with the server. You can define custom marking routine which will hide rows instead of striking through them.

  • Deleted rows are not removed from the grid after synchronizing with the server (updated|inserted rows stay bold)

The most probable cause are incorrect values of the “action” attribute in the response XML.

  • JS error after synchronizing with the server

Most probably this error is caused by incorrect values of the “sid” and “tid” attributes in the response XML.