Merge pull request #70 from mlakatkou/GS-3310

[update] crud-task article

Author: AlexKlimenkov

docs/guides/crud-task.md

@@ -5,32 +5,31 @@ sidebar_label: "Basic Operations with Tasks"
 
 # Basic Operations with Tasks
 
-In this chapter you'll learn how to do basic operations with tasks: to create or delete a task, to dynamically update a task's property. 
-
+In this chapter, you'll learn how to perform basic operations with tasks: create or delete a task and dynamically update a task property.
 
 ## Adding a new task
 
-To add a new task to the Gantt chart, use the [addTask](api/method/addtask.md) method:
+To add a new task to the Gantt chart, use the [`addTask()`](api/method/addtask.md) method:
 
 ~~~js
-var taskId = gantt.addTask({
-    id:10,
-    text:"Project #1",
-    start_date:"02-09-2020",
-    duration:28
+const taskId = gantt.addTask({
+    id: 10,
+    text: "Project #1",
+    start_date: "2027-09-02",
+    duration: 28
 });
 ~~~
 
 ### Preventing from adding tasks to certain levels
 
-A quite easy way to prevent users from adding sub-tasks to a task of a certain level (or based on some other condition) is to hide the 'Add' button through CSS.
+A simple way to prevent users from adding subtasks to a task of a certain level, or based on some other condition, is to hide the 'Add' button through CSS.
 
-You can assign a CSS class for each task row using the [grid_row_class](api/template/grid_row_class.md) template:
+You can assign a CSS class for each task row using the [`grid_row_class`](api/template/grid_row_class.md) template:
 
 ~~~js
-gantt.templates.grid_row_class = function( start, end, task ){
-    if ( task.$level > 1 ){
-        return "nested_task"
+gantt.templates.grid_row_class = (start, end, task) => {
+    if (task.$level > 1) {
+        return "nested_task";
     }
     return "";
 };
@@ -39,7 +38,7 @@ gantt.templates.grid_row_class = function( start, end, task ){
 and hide the 'Add' button for such rows:
 
 ~~~css
-.nested_task .gantt_add{
+.nested_task .gantt_add {
     display: none !important;
 }
 ~~~
@@ -49,44 +48,44 @@ and hide the 'Add' button for such rows:
 
 ## Updating a task's property
 
-To dynamically update a property of a task object, use the [updateTask](api/method/updatetask.md) method:
+To dynamically update a property of a task object, use the [`updateTask()`](api/method/updatetask.md) method:
 
-~~~js
-var task = gantt.getTask(10);//->{id:10,text:"Task #10",start_date:"02-09-2020",...}
- 
-task.text = "Task #10_1";/*!*/ 
-gantt.updateTask(10); /*!*/
+~~~js {3-4}
+const task = gantt.getTask(10); // -> { id: 10, text: "Task #10", start_date: "2027-09-02", ... }
+
+task.text = "Task #10_1";
+gantt.updateTask(10);
 ~~~
 
-If Data Processor is enabled, the [updateTask()](api/method/updatetask.md) method will cause the changes to be sent to the server. 
+If Data Processor is enabled, the [`updateTask()`](api/method/updatetask.md) method will cause the changes to be sent to the server.
 
-After the task is updated, the [onAfterTaskUpdate](api/event/onaftertaskupdate.md) event fires. It can cause other changes, for example, when the auto scheduling is enabled, Gantt will auto-schedule the task and all its successors. 
+After the task is updated, the [`onAfterTaskUpdate`](api/event/onaftertaskupdate.md) event fires. It can cause other changes. For example, when auto scheduling is enabled, Gantt will auto-schedule the task and all its successors.
 
-If you need just to re-render the changes, call the [refreshTask()](api/method/refreshtask.md) method instead of [updateTask()](api/method/updatetask.md).
+If you need just to re-render the changes, call the [`refreshTask()`](api/method/refreshtask.md) method instead of [`updateTask()`](api/method/updatetask.md).
 
 ~~~js
-var task = gantt.getTask(10);//->{id:10,text:"Task #10",start_date:"02-09-2020",...}
- 
-task.text = "Task #10_1"; 
+const task = gantt.getTask(10); // -> { id: 10, text: "Task #10", start_date: "2027-09-02", ... }
+
+task.text = "Task #10_1";
 gantt.refreshTask(10);
 ~~~
 
 ## Redrawing tasks
 
-To re-draw all tasks in the Gantt chart, use the [refreshData](api/method/refreshdata.md) method:
+To redraw all tasks in the Gantt chart, use the [`refreshData()`](api/method/refreshdata.md) method:
 
-~~~js
-var task = gantt.getTask(10);//->{id:10,text:"Task #10",start_date:"02-09-2020",...}
-var task2 = gantt.getTask(11);//->{id:11,text:"Task #11",start_date:"05-09-2020",...}
- 
-task.text = "Task #10_1"; /*!*/ 
-task2.text = "Task #11_1";/*!*/ 
-gantt.refreshData(); /*!*/ 
+~~~js {4-6}
+const firstTask = gantt.getTask(10); // -> { id: 10, text: "Task #10", start_date: "2027-09-02", ... }
+const secondTask = gantt.getTask(11); // -> { id: 11, text: "Task #11", start_date: "2027-09-05", ... }
+
+firstTask.text = "Task #10_1";
+secondTask.text = "Task #11_1";
+gantt.refreshData();
 ~~~
 
 ## Deleting tasks
 
-To delete a task, use the [deleteTask](api/method/deletetask.md) method:
+To delete a task, use the [`deleteTask()`](api/method/deletetask.md) method:
 
 ~~~js
 gantt.deleteTask(taskId);
@@ -103,16 +102,15 @@ If you don't need to send multiple requests to the server, you can simply disabl
 gantt.config.cascade_delete = false;
 ~~~
 
-In that case Gantt will send only one request to the server - for deleting just the parent task, while its nested tasks and links will be deleted by the server. 
+In that case, Gantt will send only one request to the server for deleting the parent task, while its nested tasks and links will be deleted by the server.
 
-The [cascade_delete](api/config/cascade_delete.md) option affects the way of implemeting a backend. Read more in the 
+The [cascade_delete](api/config/cascade_delete.md) option affects the way of implementing a backend. Read more in the
 [related section of the Server-side Integration article](guides/server-side.md#cascade-deletion).
 
 ## Removing all tasks from the Gantt chart
 
-To clear the Gantt chart from tasks, call the [clearAll](api/method/clearall.md) method:
+To clear the Gantt chart from tasks, call the [`clearAll()`](api/method/clearall.md) method:
 
 ~~~js
 gantt.clearAll();
 ~~~
-