How to add additional input for resource? (ex: add role when they select resource)

Gantt
#1

I want to select role when they choose resource ? so create one addition dropdown besides resource name

please see the picture below 01%20PM

#2

Hello Suba,
Unfortunately, there is no way to edit the built-in resource filter. You need to implement a custom solution.
You can create a custom lightbox section and add the HTML elements you need:
https://docs.dhtmlx.com/gantt/desktop__custom_editor.html

Or you can modify the DOM structure in the onLightbox event by using Javascript.
Here is an example of how it might be implemented:
http://snippet.dhtmlx.com/361ea926a

#3

when I filter, then custom dropdown will be gone.

44%20PM
44%20PM1136×546 26.6 KB

#4

Hello Suba,
Looks like you need to move the code for adding the dropdowns in a function and call it every time in the oninput, onchange and onkeyup events for the resource filter.
Here is the updated snippet:
http://snippet.dhtmlx.com/5/b905b513f

#5

Ramil, thank you.
My goal is that I need to select role( from custom dropdown value) for each resource and update in database. After saved in database, When I click my task then I need to show updated role on custom dropdown for the respective resource.

based on your solution, whenever I do search using filter input then selected dropdown value is reset and loaded again.

can you help me that,

  1. How to retain selected value on the custom dropdown when do search (keyup/change)
  2. How to send data to save in database with assigned resource details
  3. when we show lightbox, how to show the selected role(which is already saved in database to the respective resource) for the respective resource

please help me

#6

For your information, we use Angular 7

#7

Hello Suba,
As I said before, you need to implement a custom solution.
You need to save the values somewhere in a temporary object or some variables. The best way would be to save those values in the task object, but please note that by doing that, you won’t be able to undo that change if you click on the Cancel button in the lightbox.

Here is an example of how it might be implemented:
http://snippet.dhtmlx.com/5/eb6b87dbd

How to retain selected value on the custom dropdown when do search (keyup/change)
when we show lightbox, how to show the selected role(which is already saved in database to the respective resource) for the respective resource

You need to iterate all option elements and check if they should be selected.

How to send data to save in database with assigned resource details

If you apply the implementation from the snippet and call the updateTask method, the changes will be sent to the database. If you don’t do that, the changes will remain only on the client-side until you click on the Save button in the lightbox.
If you want to apply a different solution, you can send the changes by using the built-in Ajax module:
https://docs.dhtmlx.com/gantt/api__gantt_ajax_other.html

For your information, we use Angular 7

It should work the same way for Gantt, as it is a client-side application.

1 Like
#8

when filter resource name (enter on the filter input), if resource name is not available then I need to show error message that “no resource is found”. How to do that? is there any built-in attach events for this?

#9

Hello Suba,
No, there are no built-in events for the resource filter.

But you can add the following line in the add_dropdown function in the snippet I sent you in the previous message:

    if (!resource_rows[0]) gantt.message("no resource is found")

Here is the updated snippet:
http://snippet.dhtmlx.com/5/3abb71d57