[ANGULAR] Tbar Button trigger problem
When the Calendar goes responsive and these buttons display in the hamburger menu of tBar, the buttons doesn't trigger...
When the Calendar goes responsive and these buttons display in the hamburger menu of tBar, the buttons doesn't trigger...
Hi,
could you please share how those buttons are set up?
johan.isaksson wrote: ↑Fri Dec 13, 2024 11:18 amHi,
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, });
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'
);
}
}
Sorry but I see nothing in that snippet that relates to how you react to clicks on the buttons
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() {
...
}
}
}
Well
tbar: {
items: {
buttonClearSchedules: {
...,
onClick() {
// Handle it
}
}
onClick
is the configured handler.