Bryntum Support Forums

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

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.

Here's the reference: https://www.bryntum.com/docs/calendar/#Scheduler/widget/ResourceFilter#config-selected

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!

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

refs 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