Inline editing with checkbox and confirmation

Gantt
#1

Hi,
I’m using gantt pro in an angular app. Is there a way to create a checkbox on double click for inline editing to set a task to completed? And also add a confirmation popup window/modal box to confirm before saving it through gantt dataProccessor?

#2

Hello Debanjali,
Gantt doesn’t have a built-in checkbox inline editor.
You need to create a custom inline editor where you can return any HTML elements:
https://docs.dhtmlx.com/gantt/desktop__inline_editing.html#custominlineeditor
I don’t think it is a good idea for adding checkboxes via inline editors or, at least, you will need to use some styling.
Here is an example with the checkbox inside an inline editor:
http://snippet.dhtmlx.com/5/97444790f

I would suggest returning an HTML in the grid via the template function:
https://docs.dhtmlx.com/gantt/desktop__specifying_columns.html#datamappingandtemplates
Here is an example:
https://snippet.dhtmlx.com/5/a45f11494

You can use the gantt.confirm method to show the confirm box:
https://docs.dhtmlx.com/gantt/api__gantt_confirm.html
If you decide to use the inline editor, it would be easier to use the onBeforeSave event handler and return false there:
https://docs.dhtmlx.com/gantt/desktop__inline_editors_ext.html#events
If you select an option to not update the value, you will have the previous value. If you agree with the changes, you need to update the task object via the API methods.
Here are examples of how it might be implemented:
http://snippet.dhtmlx.com/5/6569b6cd8
http://snippet.dhtmlx.com/5/b0938e5e0

#3

Thank you for the examples and references Ramil. Have a few more queries…

  1. Is there a way to add checkboxes in the lightbox section as well?
  2. I want to have a task set as completed via user input through a checkbox on the lightbox.
  3. Also I want to keep a custom boolean field that would mark certain tasks with a different row color on the grid, this one would be a user input via lightbox

Are there any references/examples for the above? It would be extremely helpful if you could share something I can refer to.

#4

Hello Debanjali,

Is there a way to add checkboxes in the lightbox section as well?

The lightbox has a built-in checkbox section:
https://docs.dhtmlx.com/gantt/desktop__checkbox.html
But you can also create a custom lightbox section and add the checkbox there:
https://docs.dhtmlx.com/gantt/desktop__custom_editor.html

Here are examples:
https://docs.dhtmlx.com/gantt/samples/05_lightbox/02_checkbox.html
http://snippet.dhtmlx.com/5/cb5b407f5
http://snippet.dhtmlx.com/5/ce96ecc77

I want to have a task set as completed via user input through a checkbox on the lightbox.

You can use the onLightboxSave event handler to check if the checkbox is checked and change the task progress or any other task properties:
https://docs.dhtmlx.com/gantt/api__gantt_onlightboxsave_event.html
Here is an example:
http://snippet.dhtmlx.com/5/a492acf40

Also I want to keep a custom boolean field that would mark certain tasks with a different row color on the grid, this one would be a user input via lightbox

You can check the task property in the grid_row_class template and return the class name for the task row you want to colorize. Then you can add your styles in the CSS file:
https://docs.dhtmlx.com/gantt/api__gantt_grid_row_class_template.html
Here is an example:
http://snippet.dhtmlx.com/5/d1912abc0