Premium support for our pure JavaScript UI components


Post by bherford »

I am working in my gantt.component.html file, converting a toolbar from a .js file.

I can't seem to figure out how to add the items property to the <bryntum-button-group></bryntum-button-group>.

Here is a snippet from gantt.component.ts:

     
<bryntum-button-group cls='search-group' items='' ></bryntum-button-group>

I want to reproduce this config:


            {
                type: 'buttonGroup',
                cls: 'search-group',
                items: [
                    {
                        type: 'text',
                        ref: 'searchField',
                        clearable: true,
                        keyStrokeChangeDelay: 250,
                        cls: 'search-field',
                        onChange: 'up.onSearchFieldChange',
                        onClear: 'up.onSearchFieldClear',
                        triggers: {
                            search: {
                                align: 'start',
                                cls: 'b-fa b-fa-search icon-dark'
                            }
                        }
                    },
                    {
                        type: 'button',
                        ref: 'prevBtn',
                        cls: 'previous-btn',
                        icon: 'b-icon-up',
                        disabled: true,
                        listeners: {
                            action() {
                                this?.parent?.parent?.gantt?.features?.search.gotoPrevHit({ animate: 300 });
                            }
                        }
                    },
                    {
                        type: 'button',
                        ref: 'nextBtn',
                        icon: 'b-icon-down',
                        cls: 'next-btn',
                        disabled: true,
                        listeners: {
                            action() {
                                this?.parent?.parent?.gantt?.features?.search.gotoNextHit(false, { animate: 300 });
                            }
                        }
                    },
                ]
            },

Post by tasnim »

Hi,
Set the value of the item in app.component.ts then in the markup assign it like this:

<bryntum-button-group
	[items] = "items"
</bryntum-button-group>

All the best,
Tasnim


Post by bherford »

Thank you


Post by Animal »

this?.parent?.parent?.gantt?.features?.search is very brittle. Any change to nesting position and it fails.

Try

this.up('gantt').features.search()

https://www.bryntum.com/docs/calendar/api/Core/widget/Widget#function-up


Post Reply