[ANGULAR] Tbar Button trigger problem

[kreshnik022]

When the Calendar goes responsive and these buttons display in the hamburger menu of tBar, the buttons doesn't trigger...

[johan.isaksson]

Hi,

could you please share how those buttons are set up?

[kreshnik022]

Hi,

could you please share how those buttons are set up?

I have a calendarProps in a config file and then the tbar for these 2 buttons:

tbar: {
        items: {
            buttonClearSchedules: {
                weight: 590,
                type: 'button',
                text: 'Unplan schedules',
                icon: 'b-fa b-fa-trash',
                name: 'clearSchedulesButton',
                id: 'clearSchedulesButton',
                style: `
                    color: white;
                    border: none;
                    border-radius: 10px;
                    padding: 10px 30px; /* Reduce padding for a smaller button */
                    font-size: 12px; /* Smaller font size */
                    font-weight: bold;
                    cursor: pointer;
                    transition: background-color 0.3s ease, transform 0.2s ease;
                    height: 30px; /* Fixed height for uniformity */
                    margin-left: 2px;
                `,
                cls: 'clear-schedules-button',
            },
            createSchedulesButton: {
                weight: 600,
                type: 'button',
                text: 'Create Schedules',
                icon: 'b-fa b-fa-plus',
                name: 'createSchedulesButton',
                id: 'createSchedulesButton',
                style: `
                    color: white;
                    border: none;
                    border-radius: 10px;
                    padding: 10px 30px; /* Reduce padding for a smaller button */
                    font-size: 12px; /* Smaller font size */
                    font-weight: bold;
                    cursor: pointer;
                    transition: background-color 0.3s ease, transform 0.2s ease;
                    height: 30px; /* Fixed height for uniformity */
                    margin-left: 2px;
                `,
                cls: 'create-schedules-button',
            },
            

      then in ngAfterview init:
      
        this.createScheduleButton = tbarItems[8]
    this.createScheduleButton.on({ click: this.createSchedulesConfiguration, thisObj: this, }); 

[johan.isaksson]

Can you also share how you catch the clicks?

[kreshnik022]

Can you also share how you catch the clicks?

these works until the responsive happens and then the call doesn't work

 createSchedulesConfiguration(): void {
        if (this.dateRange?.from && this.dateRange?.to) {
            // Format the dates for display
            const fromDate = formatDate(this.dateRange.from, 'dd/MM/yyyy', 'en-US');
            const toDate = formatDate(this.dateRange.to, 'dd/MM/yyyy', 'en-US');

        // Open the Fuse confirmation dialog
        const confirmation = this._fuseConfirmationService.open({
            title: 'Create Schedules',
            message: `Are you sure you want to create schedules for the range ${fromDate} to ${toDate}?`,
            actions: {
                confirm: {
                    label: 'Create',
                },
                cancel: {
                    label: 'Cancel',
                },
            },
        });

        // Subscribe to the dialog's closed event
        confirmation.afterClosed().subscribe((result) => {
            if (result === 'confirmed') {
                if (!this.selectedResourceId) {
                    this._toastrService.error(
                        'Please select a resource before creating schedules.',
                        'Error'
                    );

                    return
                }
                // Call the backend to create schedules
                this.__schedulerConfigurationService
                    .createSchedulerConfiguration(
                        this.selectedCompany,
                        this.dateRange.from,
                        this.dateRange.to,
                        this.selectedResourceId
                    )
                    .subscribe({
                        next: (res: any) => {
                            console.log('Schedules created successfully', res);
                            this._toastrService.success(
                                'Schedules created successfully!',
                                'Success'
                            );
                        },
                        error: (err: any) => {
                            console.error('Error creating schedules', err);
                            this._toastrService.error(
                                'Failed to create schedules. Please try again.',
                                'Error', err
                            );
                        },
                    });
            } else {
                console.log('Schedule creation canceled.');
            }
        });
    } else {
        this._toastrService.error(
            'Please select a valid date range before creating schedules.',
            'Error'
        );
    }
}

[johan.isaksson]

Sorry but I see nothing in that snippet that relates to how you react to clicks on the buttons

[johan.isaksson]

My bad, I see you actually had that on the bottom of your first snippet. When a button is moved into the overflow menu, it is no longer an actual button but a menu item. Listeners added dynamically are not transfered to the menu item.

If you instead add your listener declaratively, it should work.

tbar: {
        items: {
            buttonClearSchedules: {
            	...,
            	listeners : {
            	  click() {
            	    ...
            	  }
            	}
            }

[Animal]

Well

tbar: {
        items: {
            buttonClearSchedules: {
            	...,
            	onClick() {
                    // Handle it
                }
            }

onClick is the configured handler.