How to turn "group" on/off dynamically

[Jeff Butterworth]

I have a schedule set up to use grouping like this:

                    <ejs-schedule id="fmscheduler" ref="fmscheduler"

                                  :views='views' 

                                  :event-settings="eventSettings"

                                  :group='group'>

                        <e-resources>

                            <e-resource field='EmployeeID' title='Employee Name' name='Employees' :data-source='checkedEmployees'

                                        text-field='Name' id-field='ID' color-field='Colour'>

                            </e-resource>

                        </e-resources>

                    </ejs-schedule>

The 'group;' property I can set up in one of two ways:

1)    group: {

            resources: []

        }

When the page is first displayed the data is all displayed in a single calendar (no grouping). This is good.

2)     group: {

            resources: ["Employees"]

        }

When the page is first displayed the data is all displayed in groups. This is also good.

Now what I want is for the user to check a checkbox to turn grouping on or off. This is the part I can't get working.

I was thinking that group would be reactive and I just update the group.resources as required. But it doesn't work. I can change the value and the scheduler doesn't redraw itself to toggle the grouping. So first line below I thought would be enough. It doesn't work and so I have added the other lines in the hope it would work but no luck.

                this.group.resources.push("Employees");

                fmscheduler.dataBind();

                fmscheduler.refresh();

If I access: this.$refs.fmscheduler.group I can see that it has changed as I would hope. So I am a little surprised that the refresh() doesn't force it to redraw correctly.

Any ideas on what I am doing wrong?

Thanks

Jeff

 

 

[Ravikumar Venkatesan]

Hi Jeff, 

Greetings from Syncfusion support. 

We have validated your requirement at our end and achieved it with the help of the code shown below and the same available in the sample available from the below link. 

Sample: https://codesandbox.io/s/ej2-vue-schedule-add-remove-resources-and-empty-schedule-resources-forked-jwt7g?file=/src/App.vue 

[App.vue] 

    onChange(args) { 

      let scheduleObj = document.getElementById("Schedule").ej2_instances[0]; 

      if (args.checked) { 

        scheduleObj.group.resources = ["Calendars"]; 

        scheduleObj.dataBind(); 

      } else { 

        scheduleObj.group.resources = []; 

        scheduleObj.dataBind(); 

      } 

    } 

Kindly try the above sample and get back to us if you need any further assistance. 

Regards, 

Ravikumar Venkatesan 

[Jeff Butterworth]

Once again you guys have come through with a solution. Very impressed with level of support!

The issue is that I was using:

Where your code was basically using:

document.getElementById("Schedule").ej2_instances[0].group.resources =["Calendars"]; 

Mine was:

self.$refs.fmscheduler.group.resources = ["Calendars"]

but self.$refs.fmscheduler is equivalent to document.getElementById("Schedule"). When I changed my code to:

self.$refs.fmscheduler.ej2_instances[0].group.resources = ["Calendars"]

It all worked.

Thanks once again for your assistance.

Jeff

 

when I should have used

[Nevitha Ravi]

Hi Jeff, 

You are most welcome, we are glad that our provided solution helped you to resolve your reported problem. 

Regards, 

Nevitha