dataprocessor

a set of dataprocessor methods

A new instance of DataProcessor can be created using createDataProcessor method. Alternatively, the dataProcessor constructor provides a legacy way to create a DataProcessor instance.
The dataprocessor object possesses the following methods and events:

Methods

• attachEvent (name, handler, settings): string - attaches the handler to an API event of DataProcessor
  • name - (string) - the event's name, case-insensitive
  • handler - (Function) - the handler function
  • settings? - (object) - optional, an object with settings for the event handler

const dp = gantt.createDataProcessor({
    url: "/api",
    mode: "REST",
});
 
dp.attachEvent("onAfterUpdate", (id, action, tid, response) => {
    console.log("Updated task:", id);
});

• detachEvent (id): void - detaches a handler from an event (which was attached before by the attachEvent() method)
  • id - (string) - the event's id

const dp = gantt.createDataProcessor({
    url: "/api",
    mode: "REST",
});
 
const handlerId = dp.attachEvent("onAfterUpdate", (id, action, tid, response) => {
    console.log("Updated task:", id);
});
 
// detach a listener
dp.detachEvent(handlerId);

• getState (id): string - returns the state of an item (updated or not)
  • id - (string | number) - the ID of an item

const status = dp.getState(id);

• ignore (code): void - executes a block without triggering DataProcessor
  • code - (Function) - data modification code

dp.ignore(() => {
    // won't be saved
    gantt.addTask({
        id: 10,
        text: "Task #5",
        start_date: "03-02-2025",
        duration: 5
    });
});

You can place data adding and deleting operations here when you don't want to save that changes on the server side.

The dp.ignore() method works similarly to gantt.silent().

• setTransactionMode (mode, total): void - configures the data sending mode
  • mode - (string) - the data sending mode, "GET"|"POST"|"REST"|"JSON"|"REST-JSON"
  • total - (boolean) - defines, whether all data is sent all at once, or each record is sent by a separate request

dp.setTransactionMode("POST", true);

To send custom HTTP request headers or additional data to the server, specify the first parameter as an object with the following properties:

• mode - (string) - data sending mode, "GET", "POST", "REST", "JSON", "REST-JSON"
• headers - (object) - a set of headers, defined as "key":"value" pairs that should be sent with a request
• payload - (object) - additional data, set as "key":"value" pairs that should be sent to the server together with headers

dp.setTransactionMode({
    mode: "POST",
    headers: {
        "Content-Type": "application/x-www-form-urlencoded",
        "Accept-Language": "fr-FR"
    },
    payload: {
        "user_id": "12"
    }
}, true);

• setUpdated (rowId, [mode, state]): void - marks an item as updated
  • rowId - (string | number) - the ID of an item to set the update status for
  • mode? - (boolean) - optional, true (default) for "updated", false for "not updated"
  • state? - (string) - optional, the update mode name, "updated" by default

dp.setUpdated(1);
dp.setUpdated(2, true, "deleted");

Events

• onAfterUpdate (id, action, tid, response): void - fires after receiving and processing the server-side response
  • id - (string | number) - the ID of the updated item
  • action - (string) - the response status (operation type)
  • tid - (string) - the new ID (applicable only for insert operations)
  • response - (mixed) - the XML node or JSON object containing the parsed response

dp.attachEvent("onAfterUpdate", (id, action, tid, response) => {
    if (action === "error") {
        alert(`Server error: ${response.message}`);
    }
});

Possible response statuses:

• updated
• inserted
• deleted
• invalid
• error

• onBeforeDataSending (id, state, data): void - fires before sending data to a server
  • id - (string | number) - the ID of the item
  • state - (string) - the item's state (operation type)
  • data - (object) - the serialized data that will be sent to the server

dp.attachEvent("onBeforeDataSending", (id, state, data) => {
    // Custom logic before sending data
    return true;
});

The event fires for each data update request (after onBeforeUpdate).

Returning false from the event handler will prevent data from being sent to the server.

Possible response statuses:

• updated
• inserted
• deleted
• invalid
• error

• onBeforeUpdate (id, state, data): void - fires before updating a record (or records)
  • id - (string | number) - the item's ID
  • state - (string) - the item's state (operation type)
  • data - (object) - the data that will be sent to the server

dp.attachEvent("onBeforeUpdate", (id, state, data) => {
    // Custom logic before updating
    return true;
});

The event fires for each updating record and before onBeforeDataSending.

Returning false from the event handler will prevent data from being sent to the server.

Possible response statuses:

• updated
• inserted
• deleted
• invalid
• error

• onRowMark (id, state, mode, invalid): void - fires before each attempt to mark the updated item
  • id - (string | number) - the ID of the item for which the error occurs
  • state - (string) - the item's state (operation type)
  • mode - (boolean) - true for adding an update mark, false for removing
  • invalid - (object) - details about errors, if any

dp.attachEvent("onRowMark", (id, state, mode, invalid) => {
    // Custom logic before marking an item
    return true;
});

The event is blockable. Returning false will prevent the item from being marked.

Back to top