Skip to content

Commit 1accdaa

Browse files
author
Maria Rudenko
committed
Merge pull request '[add] 'dataprocessor' article' (#87) from GS-2757 into master
Reviewed-on: https://git.webix.io/Servers/gantt-docs/pulls/87 Reviewed-by: alex <[email protected]>
2 parents bb05881 + b5780db commit 1accdaa

File tree

3 files changed

+290
-9
lines changed

3 files changed

+290
-9
lines changed

‎data/api/gantt_dataprocessor_other.md‎

Lines changed: 288 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,299 @@
11
dataprocessor
22
=============
3-
4-
@todo:
5-
check the autogenerated stub
6-
7-
8-
@short:
3+
@short: a set of dataprocessor methods
94

105

11-
@type:
6+
@type:object
127

138
@example:
149

1510
@template: api_config
1611
@descr:
1712

13+
A new instance of DataProcessor can be created using api/gantt_createdataprocessor.md method. Alternatively, the api/gantt_dataprocessor.md constructor provides a legacy way to create a DataProcessor instance. <br>
14+
The **dataprocessor** object possesses the following [methods](#methods) and [events](#events):
15+
16+
<h3 id="methods">Methods</h3>
17+
18+
<ul id="attachEvent">
19+
<li>
20+
<b class=submethod>attachEvent (name, handler, settings): string</b> - attaches the handler to an API event of DataProcessor
21+
<ul>
22+
<li><b><i>name</i></b> - (<i>string</i>) - the event's name, case-insensitive</li>
23+
<li><b><i>handler</i></b> - (<i>Function</i>) - the handler function</li>
24+
<li><b><i>settings?</i></b> - (<i>object</i>) - optional, an object with settings for the event handler</li>
25+
</ul>
26+
</li>
27+
</ul>
28+
29+
<ul>
30+
~~~js
31+
const dp = gantt.createDataProcessor({
32+
url: "/api",
33+
mode: "REST",
34+
});
35+
36+
dp.attachEvent("onAfterUpdate", (id, action, tid, response) => {
37+
console.log("Updated task:", id);
38+
});
39+
~~~
40+
</ul>
41+
42+
<ul id="detachEvent">
43+
<li>
44+
<b class=submethod>detachEvent (id): void</b> - detaches a handler from an event (which was attached before by the <b>attachEvent()</b> method)
45+
<ul>
46+
<li><b><i>id</i></b> - (<i>string</i>) - the event's id</li>
47+
</ul>
48+
</li>
49+
</ul>
50+
51+
<ul>
52+
~~~js
53+
const dp = gantt.createDataProcessor({
54+
url: "/api",
55+
mode: "REST",
56+
});
57+
58+
const handlerId = dp.attachEvent("onAfterUpdate", (id, action, tid, response) => {
59+
console.log("Updated task:", id);
60+
});
61+
62+
// detach a listener
63+
dp.detachEvent(handlerId);
64+
~~~
65+
</ul>
66+
67+
<ul id="getState">
68+
<li>
69+
<b class="submethod">getState (id): string</b> - returns the state of an item (updated or not)
70+
<ul>
71+
<li><b><i>id</i></b> - (<i>string | number</i>) - the ID of an item</li>
72+
</ul>
73+
</li>
74+
</ul>
75+
76+
<ul>
77+
~~~js
78+
const status = dp.getState(id);
79+
~~~
80+
</ul>
81+
82+
<ul id="ignore">
83+
<li>
84+
<b class="submethod">ignore (code): void</b> - executes a block without triggering DataProcessor
85+
<ul>
86+
<li><b><i>code</i></b> - (<i>Function</i>) - data modification code</li>
87+
</ul>
88+
</li>
89+
</ul>
90+
91+
<ul>
92+
~~~js
93+
dp.ignore(() => {
94+
// won't be saved
95+
gantt.addTask({
96+
id: 10,
97+
text: "Task #5",
98+
start_date: "03-02-2025",
99+
duration: 5
100+
});
101+
});
102+
~~~
103+
104+
<p>You can place data adding and deleting operations here when you don't want to save that changes on the server side.</p>
105+
<i>The dp.ignore() method works similarly to <a href="api/gantt_silent.md">gantt.silent()</a>.</i>
106+
</ul>
107+
108+
<ul id="setTransactionMode">
109+
<li>
110+
<b class="submethod">setTransactionMode (mode, total): void</b> - configures the data sending mode
111+
<ul>
112+
<li><b><i>mode</i></b> - (<i>string</i>) - the data sending mode, "GET"|"POST"|"REST"|"JSON"|"REST-JSON"</li>
113+
<li><b><i>total</i></b> - (<i>boolean</i>) - defines, whether all data is sent all at once, or each record is sent by a separate request</li>
114+
</ul>
115+
</li>
116+
</ul>
117+
118+
<ul>
119+
~~~js
120+
dp.setTransactionMode("POST", true);
121+
~~~
122+
123+
<p>To send custom HTTP request headers or additional data to the server, specify the first parameter as an object with the following properties:</p>
124+
125+
<ul>
126+
<li><b><i>mode</i></b> - (<i>string</i>) - data sending mode, "GET", "POST", "REST", "JSON", "REST-JSON"</li>
127+
<li><b><i>headers</i></b> - (<i>object</i>) - a set of headers, defined as <code>"key":"value"</code> pairs that should be sent with a request</li>
128+
<li><b><i>payload</i></b> - (<i>object</i>) - additional data, set as <code>"key":"value"</code> pairs that should be sent to the server together with headers</li>
129+
</ul>
130+
~~~js
131+
dp.setTransactionMode({
132+
mode: "POST",
133+
headers: {
134+
"Content-Type": "application/x-www-form-urlencoded",
135+
"Accept-Language": "fr-FR"
136+
},
137+
payload: {
138+
"user_id": "12"
139+
}
140+
}, true);
141+
~~~
142+
</ul>
143+
144+
<ul id="setUpdated">
145+
<li>
146+
<b class="submethod">setUpdated (rowId, [mode, state]): void</b> - marks an item as updated
147+
<ul>
148+
<li><b><i>rowId</i></b> - (<i>string | number</i>) - the ID of an item to set the update status for</li>
149+
<li><b><i>mode?</i></b> - (<i>boolean</i>) - optional, <code>true</code> (default) for "updated", <code>false</code> for "not updated"</li>
150+
<li><b><i>state?</i></b> - (<i>string</i>) - optional, the update mode name, <code>"updated"</code> by default</li>
151+
</ul>
152+
</li>
153+
</ul>
154+
155+
<ul>
156+
~~~js
157+
dp.setUpdated(1);
158+
dp.setUpdated(2, true, "deleted");
159+
~~~
160+
</ul>
161+
162+
163+
164+
<h3 id="events">Events</h3>
165+
166+
<ul id="onAfterUpdate">
167+
<li>
168+
<b class="submethod">onAfterUpdate (id, action, tid, response): void</b> - fires after receiving and processing the server-side response
169+
<ul>
170+
<li><b><i>id</i></b> - (<i>string | number</i>) - the ID of the updated item</li>
171+
<li><b><i>action</i></b> - (<i>string</i>) - the response status (operation type)</li>
172+
<li><b><i>tid</i></b> - (<i>string</i>) - the new ID (applicable only for insert operations)</li>
173+
<li><b><i>response</i></b> - (<i>mixed</i>) - the XML node or JSON object containing the parsed response</li>
174+
</ul>
175+
</li>
176+
</ul>
177+
178+
<ul>
179+
~~~js
180+
dp.attachEvent("onAfterUpdate", (id, action, tid, response) => {
181+
if (action === "error") {
182+
alert(`Server error: ${response.message}`);
183+
}
184+
});
185+
~~~
186+
</ul>
187+
188+
<ul>
189+
<p><b>Possible response statuses:</b></p>
190+
<ul>
191+
<li><code>updated</code></li>
192+
<li><code>inserted</code></li>
193+
<li><code>deleted</code></li>
194+
<li><code>invalid</code></li>
195+
<li><code>error</code></li>
196+
</ul>
197+
</ul>
198+
199+
<ul id="onBeforeDataSending">
200+
<li>
201+
<b class="submethod">onBeforeDataSending (id, state, data): void</b> - fires before sending data to a server
202+
<ul>
203+
<li><b><i>id</i></b> - (<i>string | number</i>) - the ID of the item</li>
204+
<li><b><i>state</i></b> - (<i>string</i>) - the item's state (operation type)</li>
205+
<li><b><i>data</i></b> - (<i>object</i>) - the serialized data that will be sent to the server</li>
206+
</ul>
207+
</li>
208+
</ul>
209+
210+
<ul>
211+
~~~js
212+
dp.attachEvent("onBeforeDataSending", (id, state, data) => {
213+
// Custom logic before sending data
214+
return true;
215+
});
216+
~~~
217+
</ul>
218+
219+
<ul>
220+
<p>The event fires for each data update request (after <code>onBeforeUpdate</code>).</p>
221+
<p>Returning <code>false</code> from the event handler will prevent data from being sent to the server.</p>
222+
223+
<p><b>Possible response statuses:</b></p>
224+
<ul>
225+
<li><code>updated</code></li>
226+
<li><code>inserted</code></li>
227+
<li><code>deleted</code></li>
228+
<li><code>invalid</code></li>
229+
<li><code>error</code></li>
230+
</ul>
231+
</ul>
232+
233+
<ul id="onBeforeUpdate">
234+
<li>
235+
<b class="submethod">onBeforeUpdate (id, state, data): void</b> - fires before updating a record (or records)
236+
<ul>
237+
<li><b><i>id</i></b> - (<i>string | number</i>) - the item's ID</li>
238+
<li><b><i>state</i></b> - (<i>string</i>) - the item's state (operation type)</li>
239+
<li><b><i>data</i></b> - (<i>object</i>) - the data that will be sent to the server</li>
240+
</ul>
241+
</li>
242+
</ul>
243+
244+
<ul>
245+
~~~js
246+
dp.attachEvent("onBeforeUpdate", (id, state, data) => {
247+
// Custom logic before updating
248+
return true;
249+
});
250+
~~~
251+
</ul>
252+
253+
<ul>
254+
<p>The event fires for each updating record and before <code>onBeforeDataSending</code>.</p>
255+
<p>Returning <code>false</code> from the event handler will prevent data from being sent to the server.</p>
256+
257+
<p><b>Possible response statuses:</b></p>
258+
<ul>
259+
<li><code>updated</code></li>
260+
<li><code>inserted</code></li>
261+
<li><code>deleted</code></li>
262+
<li><code>invalid</code></li>
263+
<li><code>error</code></li>
264+
</ul>
265+
</ul>
266+
267+
<ul id="onRowMark">
268+
<li>
269+
<b class="submethod">onRowMark (id, state, mode, invalid): void</b> - fires before each attempt to mark the updated item
270+
<ul>
271+
<li><b><i>id</i></b> - (<i>string | number</i>) - the ID of the item for which the error occurs</li>
272+
<li><b><i>state</i></b> - (<i>string</i>) - the item's state (operation type)</li>
273+
<li><b><i>mode</i></b> - (<i>boolean</i>) - <code>true</code> for adding an update mark, <code>false</code> for removing</li>
274+
<li><b><i>invalid</i></b> - (<i>object</i>) - details about errors, if any</li>
275+
</ul>
276+
</li>
277+
</ul>
278+
279+
<ul>
280+
~~~js
281+
dp.attachEvent("onRowMark", (id, state, mode, invalid) => {
282+
// Custom logic before marking an item
283+
return true;
284+
});
285+
~~~
286+
</ul>
287+
288+
<ul>
289+
<p>The event is blockable. Returning <code>false</code> will prevent the item from being marked.</p>
290+
</ul>
291+
292+
293+
294+
@relatedapi:
295+
api/gantt_createdataprocessor.md
296+
api/gantt_dataprocessor.md
18297

298+
@related:
299+
desktop/server_side.md

‎data/api/refs/gantt.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -573,7 +573,7 @@ Gantt API
573573
- api/gantt_calendar_other.md - the interface of the working calendar object
574574
- api/gantt_config_other.md - defines configuration options for dates, scale, controls
575575
- api/gantt_constants_other.md - stores various constants to reduce the use of magic numbers in the code
576-
- api/gantt_dataprocessor_other.md -
576+
- api/gantt_dataprocessor_other.md - a set of dataprocessor methods
577577
- api/gantt_datastore_other.md - a set of datastore methods
578578
- api/gantt_date_other.md - a set of date formatting methods
579579
- api/gantt_env_other.md - a set of flags which describe current environment

‎data/api/refs/gantt_others.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ Others
88
- api/gantt_calendar_other.md - the interface of the working calendar object
99
- api/gantt_config_other.md - defines configuration options for dates, scale, controls
1010
- api/gantt_constants_other.md - stores various constants to reduce the use of magic numbers in the code
11-
- api/gantt_dataprocessor_other.md -
11+
- api/gantt_dataprocessor_other.md - a set of dataprocessor methods
1212
- api/gantt_datastore_other.md - a set of datastore methods
1313
- api/gantt_date_other.md - a set of date formatting methods
1414
- api/gantt_env_other.md - a set of flags which describe current environment

0 commit comments

Comments
 (0)