Search data

[BossHogg97]

Hi, i have a question.
It's possible to add search bar and filter (or display searched) data.

Thanks so much

[phphe]

yes. you can iterate tree data stats and use hidden property to hide nodes.

[BossHogg97]

Nice, i'll try as soon as possible and let you know if it work :)

[phphe]

have you solve it? I got your comment in email but it does not exists in this issue page.

[BossHogg97]

Hi, I wrote a comment but I deleted it because I solved the problem that I encountered with async data loading (first step before data search).
I'm now trying to implement the "search" functionality but i'm not able to set the stat property. Following an example of code:

Tree implementation:

<BaseTree ref="treeRef" class="mtl-tree ml-2" v-model="bomItems" treeLine virtualization style="height: 750px" :key="updateTree">
      <template #default="{ node, stat }">
      <OpenIcon v-if="stat.children.length" :open="stat.open" class="mtl-mr" @click.native="doArrowClick(stat)" />
      <div v-else class="w-5"></div>
      <n-button quaternary size="small" class="mtl-ml" @click="doItemClick(stat)">
        <n-ellipsis style="max-width: 200px"> {{ node.text }} </n-ellipsis>
      </n-button>
  </template>
</BaseTree>

Following the event listener where i'd like to implement the search. Here i used the getStat function but i cannot set the properties:

evtNodeSearch.on(async (data) => {
   // Other instruction

   // Get tree stat
    const treeStat = ref(treeRef.value.getStat(bomItems.value[0]))

    treeStat.value.children[0].hidden= true // Example
  })

If is not possible to hide element i'd like to change styling of searched element. I saw that there is a "style" property

Thanks

[BossHogg97]

The issue is not closed. I don't know how to access and modify the stat properties

[phphe]

your code should work. stat.xxx = xxx

treeStat.value.children[0].hidden= true // Example

[BossHogg97]

I'll do a check and let you know. Thanks for your support!

[BossHogg97]

Hi, i solved the problem about stat. I didn't use the component's function for add multiple nodes but i added data directly to model