Add option to keep only all childrens but not parent

[bastien70]

Take a look on this :

When you select "England" for example, the table of selected values ​​will correspond to the childrends of England, but in the input, it will be marked England.

It would be nice to have an option that instead, in this case, would list all the childrens rather than the parent Like here https://www.jqueryscript.net/demo/Multi-Select-Checkbox-Tree-treeSelector/

[dipson88]

Hi @bastien70, what about grouped prop? This prop allows showing only children without groups if you set it to fasle. In your case, it will be Chelsea and West End.

[dipson88]

[bastien70]

Mmmh can you give me the config you used ?

In mine, I've this :

    const treeselect = new Treeselect({
        parentHtmlContainer: domElement,
        value: [],
        options: options,
        listSlotHtmlComponent: slot,
        placeholder: 'Rechercher ...',
        emptyText: 'Aucun résultat',
        disabledBranchNode: false,
        direction: 'auto', // auto, top, bottom
        id: 'treeselect_input',
        alwaysOpen: false,
        isGroupedValue: true,
    })

And after clicked the slot button (take a look on the script above) to display selected options :

    slot.addEventListener('click', (e) => {
        e.preventDefault()
        console.log(treeselect.value);
    })

Demo :

https://user-images.githubusercontent.com/53140475/200851622-61572850-20a9-4848-9eb5-fcbf1057e0a3.mp4

As said, if I immediately select the "England" option, it will display "England" in the select input, then I will have the list of options once the 'Filter' button is clicked. In the end what I'm looking for is to display the children in what was selected rather than the parent

[dipson88]

I tried to use your example and add grouped: false at the end.

const treeselect = new Treeselect({
  parentHtmlContainer: domElement,
  value: [],
  options: options,
  listSlotHtmlComponent: slot,
  placeholder: 'Rechercher ...',
  emptyText: 'Aucun résultat',
  disabledBranchNode: false,
  direction: 'auto', // auto, top, bottom
  id: 'treeselect_input',
  alwaysOpen: false,
  isGroupedValue: true,
  grouped: false
})

slot.addEventListener('click', (e) => {
  e.preventDefault()
  console.log(treeselect.value, treeselect.groupedValue)
})```

[dipson88]

[bastien70]

Oooooh okay, yes, you're right now :) Thank you :D

[dipson88]

Closed as completed.