Premium support for our pure JavaScript UI components


Post by rocketreading »

Hi Team,

My use case is:
I am filtering the data in the scheduler based on Service Resource skills. Skills are there in the tbar and as a drop-down. On click of the skill, it filters the data and loading in fresh resources and events. So updating the same in the below code.

Challenge:
I need to group the data based on User Territory and in the below code else part is for refreshing the resourcestore and eventstore. while the if block for the same I have used for the creation of a scheduler and with the feature : {group: territory} which is working properly but grouping is getting wiped off as soon as I apply the filter.

else {
            console.log(this.skillvalue);
            let skillcheck=this.skillvalue;
            /*this.scheduler= ({
            columns: [
                {
                    type  : 'resourceInfo',
                    text  : 'Service Resource',
                    width : 150
                },
                {
                    text: 'Service Territory',
                    width: 150,
                    field: 'territory',
                    hidden: true,
                }
            ],
            features : {
                filterBar  : true,
                stripe : true,
                group  : 'territory',
                sort   : 'name',
                eventEdit  : {
                    items : {
                        location : {
                            weight  : 210, // After resource
                            type    : 'text',
                            name    : 'location',
                            label   : 'Location',
                            dataset : {
                                eventType : 'Meeting'
                            }
                        }
                    }
                }
            },
        });*/
        /*window.scheduler = new bryntum.scheduler({
            features:{
                filterBar  : true,
                stripe : true,
                group  : 'territory',
                sort   : 'name',
                eventEdit  : {
                    items : {
                        location : {
                            weight  : 210, // After resource
                            type    : 'text',
                            name    : 'location',
                            label   : 'Location',
                            dataset : {
                                eventType : 'Meeting'
                            }
                        }
                    }
                }
            }
        });*/
        /*window.scheduler= bryntum.scheduler({
            features:{filterBar  : true,
                stripe : true,
                group  : 'territory',
                sort   : 'name',
            }
        });*/
        console.log(window.scheduler.features);
        window.scheduler.features = ({
                   group: 'territory', });
                   /*features: {
                       
}, });*/ window.scheduler.resourceStore = new bryntum.scheduler.ResourceStore({ data: this.resources, autoload:true }); window.scheduler.eventStore = new bryntum.scheduler.EventStore({ data: this.events, autoload:true, listeners:{ loadDateRange({ new:{startDate, endDate}, changed }) { console.log(changed); this.startDate=startDate; this.endDate=endDate; console.log(startDate); console.log(endDate); console.log(skillcheck); console.log('from here'); data({ startDate: this.startDate, endDate: this.endDate,allData: true, skillId: skillcheck }) .then((response) => { console.log(response); this.resources = response.byrntumResource; this.events = response.byrntumAppointment; this.skills= response.skillSet; this.holidays=response.holidaySet; window.scheduler.resourceStore = new bryntum.scheduler.ResourceStore({ data: this.resources, autoload:true }); if(this.events){ console.log('in event11'); window.scheduler.eventStore.add(this.events); } }); } } }); /*window.bryntum.scheduler=({ columns: [ { text: 'Service Resource', width: 150, field: 'name', }, { text: 'Service Territory', width: 150, field: 'territory', hidden: true, } ], features : { stripe : true, group : 'territory', sort : 'name' }, }); */ } }

Attaching the commented code as well, for whatever I have tried.


Post by mats »

It's because you recreate the ResourceStore upon each eventStore load (not recommended). Instead do:

  window.scheduler.resourceStore.data = this.resources;

Post Reply