Inline editor custom select

Gantt
#1

I want to make my own custom select on div. But I can’t select a specific element to save.

  const editorUnitMeasure = gantt.mixin(
    {
      get_value(id: string, column: GanttColumn<GanttTask>, node: HTMLElement) {
        const options = [...node.querySelectorAll('ul li')]
        let selectedOption

        options?.forEach(option => {
          if (option.classList.contains('selected')) {
            selectedOption = option.getAttribute('data-value')
          }
        })

        return selectedOption
      },
      set_value(
        value: string,
        taskId: string,
        column: GanttColumn<GanttTask>,
        node: HTMLSelectElement
      ) {
        const options = [...node.querySelectorAll('ul li')]
        options?.forEach(option => {
          if (option.getAttribute('data-value') === value) {
            option.classList.add('selected')
          }
        })
      },
      show(id: string, column: GanttColumn<GanttTask>, config: any, placeholder: HTMLElement) {
        const el = document.createElement('div')
        el.style.backgroundColor = 'white'
        el.style.height = '200px'
        el.style.overflow = 'auto'

        const ul = document.createElement('ul')
        ul.style.listStyle = 'none'

        const options = unitMeasures?.map(option => {
          return { key: option.id, label: option.shortName }
        })

        options?.forEach(option => {
          const li = document.createElement('li')
          li.setAttribute('data-value', option.key)
          li.textContent = option.label
          ul.appendChild(li)
        })

        el.appendChild(ul)

        placeholder.appendChild(el)
      },
    },
    gantt.config.editor_types.select,
    false
  )

what do I need to add?

#2

Hello,

Thank you for the attached code. In your case, there is no update function that will change the value of the required property. You need to add an event listener to handle changes and to use the updateTask method:
updateTask Gantt Docs ;

This method should be called after modifying the task object to update the Gantt’s state.

Please check the example of custom select in the following snippet:
https://snippet.dhtmlx.com/669op04l

1 Like