Our pure JavaScript Scheduler component


Post by wboard »

I'm having some trouble binding a checkbox on a scheduler in the extraItems:

So the checkbox isn't binding to the field in a way I would predict.
If I create a new event it isn't checked, on existing events it's checked regardless of the underlying value.

I was able to override the visibility of the checkbox in the "beforeEventEditShow" event.
Although this isn't working for the checkbox.

Relevant code is pasted below:
let checkboxIsUnAvailable = new Checkbox({
    id      : 'isUnavailable',
    name    : 'isUnavailable',
    field   : 'isUnavailable',
    ref     : 'isUnavailableCheckbox',
    type    : 'checkbox',
    label   : 'Is niet beschikbaar',
    value   : 1
});
   eventEdit : {
            onAfterSave(eventRecord) {
                schedule.crudManager.sync();
            },
            extraItems : [
                checkboxIsUnAvailable
            ]
        },

listeners: {
        beforeEventEditShow: function (source, eventEdit, eventRecord, resourceRecord, eventElement, editor) {
            const checkboxVisible = source.eventRecord.code === undefined || source.eventRecord.code.length === 0;
            checkboxIsUnAvailable.visible = checkboxVisible;
            
            // Doesn't work
            checkboxIsUnAvailable.checked = parseInt(source.eventRecord.isUnavailable) == 1;

	   // Also Doesn't work
            if  (parseInt(source.eventRecord.isUnavailable) == 1) {
                checkboxIsUnAvailable.check();
            } else {
                checkboxIsUnAvailable.uncheck();
            }

            //console.log(parseInt(source.eventRecord.isUnavailable) == 1);
        },
    }

Post by sergey.maltsev »

Hi!

Few tips for using checkbox in extraitems for EventEdit feature.

You could use simple config for https://www.bryntum.com/docs/scheduler/#Scheduler/feature/base/EditBase#config-extraItems instead of creating a CheckBox.
            extraItems : [
                {
                    type  : 'checkbox',
                    name  : 'isUnavailable',
                    ref   : 'isUnavailableCheckbox',
                    label : 'Is niet beschikbaar'
                },
                ...
Access checkbox instance via it's https://www.bryntum.com/docs/scheduler/#Core/widget/Widget#config-ref using https://www.bryntum.com/docs/scheduler/#Core/widget/Container#property-widgetMap
    listeners : {
        beforeEventEdit({ eventRecord, eventEdit }) {
            const
                checkBox = eventEdit.getEditor().widgetMap.isUnavailableCheckbox;
                ...
        },
or
        
    listeners : {        
        beforeEventEditShow({ eventRecord, editor, eventEdit }) {
            const
                checkBox = editor.widgetMap.isUnavailableCheckbox;
            ...
        }
If you set name for checkBox config then it would get it's value from eventRecord's field specified by https://www.bryntum.com/docs/scheduler/#Core/widget/Field#config-name.
In your case it is eventRecord.isUnavailable

With name you should set record's field value to change checkbox's state.
Without name in config you can change it directly with checked = true but it won't be stored in record.

Post by wboard »

The results are identical to what I had before.
Although this feels a bit cleaner.

What should the input be for the checkbox to change when using the name property?
Currently I'm using 0 / 1 should this be true / false ?
I'm also using value: 1 / value: "1" doesn't change anything.

Post by pmiklashevich »

Hello,

It can be any boolean value or anything that javascript Boolean(x) converts to correct boolean value. In case of true/false, we treat string 'false' as boolean false value when you set it as a `value`:
checkbox.value = "false"
This code won't work:
checkbox.checked = "false"
`checked` accepts only valid boolean value.

In your case when you set "name" on the checkbox, event editor sets `value`.
Another thing that you will have to do is to specify your data field on the event model.

You can edit our Scheduler/examples/eventeditor/app.js demo and see how it works. Please add this code at the top of the file:
class MyEventModel extends EventModel {
    static get fields() {
        return [
            { name : 'isUnavailable', type : 'boolean', defaultValue : false }
        ];
    }
}
Modify eventEdit feature extraItems:
        eventEdit  : {
            // Uncomment to make event editor readonly from the start
            // readOnly : true,
            // Add extra widgets to the event editor
            extraItems : [
                {
                    type  : 'checkbox',
                    name  : 'isUnavailable',
                    ref   : 'isUnavailableCheckbox',
                    label : 'Is niet beschikbaar'
                },
And set your modelClass to the EventStore:
    crudManager : {
        autoLoad  : true,
        transport : {
            load : {
                url : 'data/data.json'
            }
        },
        eventStore : {
            modelClass : MyEventModel,
Now you can open the demo in a browser tab and double click an event to start editing, see checkbox is in the editor. Check it and click save. That's it. Very important here is to match name of your data field and your UI field:
"{ name : 'isUnavailable', type : 'boolean', defaultValue : false }" and "type : 'checkbox', name : 'isUnavailable',"

Best,
Pavel

Pavlo Miklashevych
Sr. Frontend Developer


Post by wboard »

Finally took some time to update to the latest version and anonymize the data I'm working with to show the example.

I hope this will clarify what is going wrong.
Attachments
schedule_drag_from_grid.zip
(10.72 KiB) Downloaded 103 times

Post by sergey.maltsev »

Hi!

You probably missed my comment above. Will try to explain again.

With name in extraItems config you should set record's field value to change checkbox's state.
So with this config below checkBox.checked = true won't work.
You have to use eventRecord.isUnavailable = true to set value to be applied to checkbox.
            extraItems : [
                {
                    type  : 'checkbox',
                    name  : 'isUnavailable',  <--------------- This is the name
                    ref   : 'isUnavailableCheckbox',
                    label : 'Is niet beschikbaar',
                    value : '1'
                }]
Without name in config you can change it directly with checkBox.checked = true but it won't be stored in record after change.

So you have 2 options to use name : 'isUnavailable', or not to use.

Please check.

Post by wboard »

I have tried this with the name option and this still isn't working for me.
The value is persisted to the database.
The value is also retrieved from the database.

I've tried adding the fields directly to the eventStore and to the Task model:
export default class Task extends EventModel {
    static get defaults() {
        return {
            // in this demo, default duration for tasks will be hours (instead of days)
            durationUnit : 'h'
        };
    }
    static get fields() {
        return [
            { name : 'isUnavailable', type : 'boolean', defaultValue : false }
            ]
    }
}
Also tried:
eventStore : {
        storeClass : TaskStore,
        fields :  [
            { name : 'isUnavailable', type : 'boolean', defaultValue : false }
        ]
},
Event data from crudmanager:
Still has an active checkbox.
{
	"id": "210",
	"resourceId": "96",
	"parentId": null,
	"name": "test name",
	"startDate": "2020-04-22 10:00:00",
	"duration": "2.00",
	"recurrenceRule": null,
	"client_name": "",
	"offer_id": "",
	"eventStyle": "",
	"eventColor": "green",
	"iconCls": "b-fa b-fa-image",
	"isUnavailable": false,
	"code": ""
}

Post by wboard »

It has been solved.
There where probably some things set up incorrectly somewhere by redoing and retesting all got resolved.

Post Reply