Skip to main content

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.