Hi,
I’m trying to implement custom searchbar in my gantt chart.
So far it is rendered properly - however the only way that I could find is by using ‘onGanttRender’ event.
It is a Vue component.
const searchInputInstance = new ScheduleSearchInput({
propsData: {
value: this.searchValue,
placeholder: this.$t('schedule.searchInputPlaceholder'),
},
})
searchInputInstance.$on('search', async (event: any) => {
await this.fetchPeople(event.target.value)
})
searchInputInstance.$mount('#search-input')
and fetching function:
async fetchPeople(value: string) {
const params = new URLSearchParams()
params.append('search', value)
await this.$api.allocations.index(params).then(async (data) => {
this.setAllAllocations(mapApi(data.results))
await gantt.parse({ data: this.mappedAllocationsToDhtmlx })
})
}
And unfortunately after gantt.parse is triggered the whole searchbar component is re-rendered, and it feels clunky.
My searchbox is defined is columns template like so:
columns: [
{
name: 'text',
label: '<div id="search-input"></div>', ...
Is there any other way to implement that?
Let me know if my question is clear enough.
Thanks,
Bartosz