Our powerful JS Calendar component
Hi Team,
We have created one checkbox 'Select All' to check/uncheck all resources in the resource filter.
We are able to select/deselect all resources after clicking on the 'Select All' checkbox.
But we are facing one problem, Please have a look at the attachment to understand the problem.
The problem is: We want to uncheck the 'Select All' checkbox after unchecking 'Marvin Fielder'. But as of now, we don't know how to check/uncheck the checkbox in the TS file.
setupSelectAllResouceCheckbox(value: boolean) {
this.sidebar.items.calioSelectAllResource = {
cls: 'b-select-all-resource-checkbox',
type: 'checkbox',
text: 'Select All',
weight: 5,
checked: value,
trigger: (triggerName: string, param: any) => {
// LoggerService.log('Inside checkbox trigger ', triggerName, param);
if (triggerName === 'change') {
console.log('Inside checkbox trigger ', triggerName,
param);
if (param.checked) {} else {}
}
}
}
}
Thanks,
Braincept
Attachments
Screenshot 2021-02-25 at 8.39.05 PM.png (45.13 KiB) Viewed 1501 times
Add some configuration to the Calendar's resourceFilter
to listen to when its selection changes:
sidebar: {
items: {
resourceFilter: {
selected: {
listeners: {
change: 'up.syncSelectAllCheckbox'
}
}
}
}
}
That would call syncSelectAllCheckbox
on the Calendar
instance. (Well, on any owning widget, so you could also implement it on your Sidebar)
So you would implement that in your Calendar subclass and sync the checkbox based on whether the source
in the event (which is a Collection
of selected resources) has a count
property equal to the total number of resources.
Obviously, if the count in the selected Collection is the same as the number of resources, check the "select all" checkbox, else uncheck it.
Hi Animal, My question how to check/uncheck the checkbox in the TS file.
I don't know how to access the reference of this checkbox.
this.sidebar.items.calioSelectAllResource = {
cls: 'b-select-all-resource-checkbox',
type: 'checkbox',
text: 'Select All',
weight: 5,
checked: value,
trigger: (triggerName: string, param: any) => {
// LoggerService.log('Inside checkbox trigger ', triggerName, param);
if (triggerName === 'change') {
console.log('Inside checkbox trigger ', triggerName,
param);
if (param.checked) {} else {}
}
}
}
If you have an access to the sidebar, you can receive the ResourceFilter from sidebar's widgetMap .
sidebar.widgetMap.resourceFilter
If it doesn't help, please modify one of our examples and provide a runnable test case that we can check.
Cheers!
Pavlo Miklashevych
Sr. Frontend Developer
braincept wrote: ↑ Fri Feb 26, 2021 10:30 am
Hi Animal, My question how to check/uncheck the checkbox in the TS file.
I don't know how to access the reference of this checkbox.
You gave it the reference calioSelectAllResource
So it will be registered in the Calendar's widgetMap
under that reference. References as added to the widgetMap
at all levels of ancestor.
https://www.bryntum.com/docs/calendar/#Calendar/view/Calendar#property-widgetMap
So it will also be in myCalendar.sidebar.widgetMap
ref
s are usually unique, but they do not have to be. They need to be uinique in their own domain.
So two toolbars may have buttons with the same ref
. Each toolbar will have a widgetMap
from which its child items may be found by reference.
On the owning Panel
of the two toolbars though, only the second to arrive will be findable.
Hi Mate,
I have tried another solution which is luckily working. I am not sure if it is a valid solution or not. Please have a look at the solution.
setupSelectAllResouceCheckbox(value: boolean) {
this.selectAllResourceCheckbox = new Checkbox({
cls: 'b-select-all-resource-checkbox',
text: 'Select All',
weight: 5,
checked: value,
});
this.selectAllResourceCheckbox.addListener('change', (data: any) => {
// console.log('Select box checkbox called ', data);
if (data.userAction) {
if (data.checked) {
} else {
}
}
})
this.sidebar.items.calioSelectAllResource = this
.selectAllResourceCheckbox;
Now we can access
this.selectAllResourceCheckbox
reference object to call check() and uncheck() method in the TS file.
Please let me know if it is a valid solution.
Sure. Or this.widgetMap.calioSelectAllResource
All references are cached on ancestors' widgetMap
objects, so that will be on the Calendar