dataprocessor

Description

A set of dataprocessor methods

Details

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

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");

• getSyncState (): boolean - returns the state of DataProcessor (true when all data is saved)

const state = dp.getSyncState();

If some records haven't been saved yet, or have received an "error" response, the method will return false.

• sendData ([id]): void - sends all the data which aren't saved to the server side yet

  • id - (string | number) - optional, the id of an item

dp.sendData();

If an ID is provided, only one item will be sent to the server side.

When called without parameters, the method will send all the items that aren't saved yet.

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.

Related API

• createDataProcessor
• dataProcessor

Related Guides

• Server-Side Integration