[ANGULAR] Add grid.feature.search from example to Gantt application

[bherford]

Greetings!

I am working on adding the grid.feature.search feature demonstrated here: https://bryntum.com/examples/grid/search/ within my existing Gantt application.

This grid demo creates a "new Grid", which I do not explicitly declare in my app. What is the best way, and place to hook this into a Gantt chart? I have a GanttToolbar.js and gantt.config.ts.

Thank you

[Maxim Gorkovsky]

Hello.
You can add few widgets (field, two buttons) to the GanttToolbar and enable search feature in the config:

searchFeature: true

[bherford]

Hi Maxim,

Thanks for the response. The demo has a few more pieces to it though, like functions for the next and previous buttons, and an indicator for the search results count.

I am also not using a

 me.grid = new Grid({})

Will I need to hook into the grid through the gantt object?

Thanks

[alex.l]

If you used gantt, of course you should replace grid.features.search to gantt.features.search.
There are many different cases to get an instance of parent element, but better to share your code, it depends on your solution a lot. Meanwhile you could review our Gantt demos, it has examples how to achieve that. (check this one https://bryntum.com/examples/gantt/advanced ).

Very simple example I created in our advanced demo:

const gantt = new Gantt({
    appendTo : 'container',
    // ....
    features : {
    search : true,
    

// ....
tbar : {
    items : {
        search : {
            type : 'textfield',
            onInput  : () => gantt.features.search.search(gantt.widgetMap.search.value)
        }
    }
}

I also found a bug in search feature while testing the solution for you. Here is a ticket https://github.com/bryntum/support/issues/3931

[bherford]

Thanks for the note

Here is the toolbar.js file I am working on: https://codepen.io/BDHerford/pen/MWErdLY

Trying to implement the search feature here: https://bryntum.com/examples/grid/search/

[alex.l]

Hi bherford,

I see from the code there is no problem to get a gantt instance in field handler to call the code I mentioned above, you have me.gantt set in parent setter.
What is your question then?

[bherford]

Hi Axel,

I am just having trouble with implementation - I think a code example for how to wire all of this together would be helpful if you have on available, since I am new to Bryntum.

Thanks

[alex.l]

Hi bherford,

We will be glad to help you. Please be more specific in your questions. I see you started your implementation, what exactly is not clear to you? If possible, please attach a runnable test case with your questions, so we will be able to run it and debug.

Thank you!

[bherford]

Hi Alex, thanks for the message. I will work on a smaller scale runnable test to share with you.

In the meantime another way of looking at my question is how do I change my search field to highlight instead of filter?

                {
                    type                 : 'textfield',
                    ref                  : 'filterByName',
                    cls                  : 'utility-search',
                    clearable            : true,
                    keyStrokeChangeDelay : 100,
                    triggers             : {
                        filter : {
                            align : 'start',
                            cls   : 'b-fa b-fa-search'
                        }
                    },
                    onChange : 'up.onFilterChange'
                },

    onFilterChange({ value }) {
        if (value === '') {
            this.gantt.taskStore.clearFilters();
        }
        else {
            value = value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');

        this.gantt.taskStore.filter({
            filters : task => task.name && task.name.match(new RegExp(value, 'i')),
            replace : true
        });
    }
}

Thanks so much for your help

[alex.l]

We have an example for the scheduler here https://bryntum.com/examples/scheduler/filtering/
It might be helpful to check.

So, you have to add some css rules, go throw the taskStore and update tasks according to your request.

Something like:

            onChange({ value }) {
                this.gantt.taskStore.forEach(task => {
                    const taskClassList = new DomClassList(task.cls);

                if (value !== '' && task.name.toLowerCase().includes(value.toLowerCase())) {
                    taskClassList.add('b-match');
                }
                else {
                    taskClassList.remove('b-match');
                }

                task.cls = taskClassList.value;
            });

            this.gantt.element.classList[value.length > 0 ? 'add' : 'remove']('b-highlighting');
        }