Grouping Multiple Resources in React Scheduler

Hi Everyone, Welcome back to the
react scheduler grouping tutorial. In this video, I will
explain about how to group the resources on scheduler layout
both on calendar and timeline views. I will also let you know
the other advanced grouping options available on Syncfusion React Scheduler. Here, if you
look at this room scheduler the timeline view is grouped with
multiple resources where each row represents a resource. The
appointment of each individual resources are displayed on its
respective rows. Also, you can notice the resource in this
timeline view grouped in two levels. This is just a simple
example for how the resources are grouped in timeline view, but you can also see plenty of examples that exhibit the
working of multiple resources and grouping from our react demo
site. In this video, together with the grouping concept, I have
also planned to explain about How to add shared events to the
react scheduler? How to add different working days for each
resources? How to group the resources date wise? and how to
make the row height to auto adjust in timeline views. I hope you all might be excited
by seeing these online examples. With that excitement, let me
proceed to show you how to group the resource data to the react
scheduler through code example now. I’m opening my existing
react application now where I have already configured the
resource data during my previous video on multiple resources. So
if you’re new to add resources data and it’s appointments to
the react scheduler, then  please watch my previous video
and come back to this topic to have a better clarity and
continuation. I have also shared that video link in the
description part below. Now let me directly move onto how to
group the resources on scheduler layout. Here, I will define the
group property, which is of object type. So I’m defining a
variable group data of type group model. To access this
group model, I need to import it from syncfusion ej2 react schedule package. Within this
group data, I’m going to define the resource option, which
accepts array of strings. Here, the strings are nothing but the
unique resource names that are assigned to each resource within
the resources property to identify them among the other
resource collection. Now, for grouping the resources on
scheduler layout, I’m going to define this unique resource name
values within the resources property. Now I will assign this
group data variable to the group property of react scheduler. When you look at the output
here, you can see each resource occupying its own space within
the same scheduler layout and the appointments of each
resources are grouped accordingly in its own space. Now I have simply shown how to
define a single level resource hierarchy. But with the Syncfusion React scheduler, you can display any levels of
resources by establishing the parent child relationship.
While defining the second level resource collection, the
data source for the second level should be provided with
an additional group ID field that maps with its predecessor
data as exact ID value. So, to add another level of
resources, I’m going to define one more resource directive tag
within the resources directive now. To add data source to this
resource level, let me first define a variable group data
source of type array object and I will pass 3 object collection
with the fields Name, Id, Color and Group Id. I will map this Name field
to the textField option, Id  field to IdField option,
Color to colorField option and finally GroupId to the
groupIDField  mapper option. Here, this groupIDField will
help you to map the particular resource under its predecessor
data, and let the scheduler to understand that it is a child
data belonging to this parent resource. So when I provide
the value one for this Group Id it means that this is a
child resource to the resource in the first level that has
the same Id value as 1. Now, based on the second
level resource data source Task1 will be mapped
under John and Task 2 and 3 will be mapped under Steve as
both these resource matches the Id value as 2. And next comes the allowMultiple
property where I have provided the value as true. By setting the value as true you
can select multiple resource on the editor window. And I will
explain more about this while showing the output. Now, how
will you relate the resources with appointment object when
using multiple levels of resources. For this, I need to
make use of this group ID field defined within this resource
directive and should map its value inside the appointment
object to the field GroupId. Then I need to set unique name
for this resource to identify this particular resource from
collection of resources. Ok, let me pass this unique resource
name value to the resources property. Next, I’m going to add
title for this resource, which will be displayed as label for
the resource field in the editor window. And finally I will
assign the second level resource data source to the
data source property of this resource directive. Now, when you look at the
schedule are you can see that the resources are grouped in two
levels. So at the first level, you can see John and Steve and
at the second level, you can see the resource task 1, task 2, and task 3. You can notice that in
the first level, James resources missing, this is
because, when you define two levels of resources and if your
second level doesn’t have any mapper to the resources in the
first level, then it will be automatically truncated from
the layout. Have a look at this appointments
that are grouped relevantly under its appropriate resources.
Whenever you have multiple levels of grouping, the colors
of the appointments are usually decided based on the colors
assigned to the inner level of resources so the colors
assigned to the task 1, task 2, and task 3 will be reflected on
the appointments now. The important note here is the
order of resources names that you passed through this
resources property. Depending on this order, the resource will be
grouped on the scheduler layout. Here first resource name act as parent and the second resource name will act as a child that is
mapped under the given parent resource. Now let me remove the
height property from the scheduler to show you the
adaptive resource layout in mobile mode. As the scheduler
with the group the resource is hard to view on the mobile mode, there is a compact mode available to view all the
resource on mobile. So here, you can see the react scheduler in a
compact mode and you can navigate between the resources
as and when required. In this case, the scheduler view port
will show the appointments of the selected resource. Here, if you want to disable
this compact view mode, then you need to set the
enable compact view as false within the group property. Now, when you look at the same
layout in mobile mode, you can see the same desktop version
on mobile an you need to scroll to the right side to
look at the entire resource. Ok, again, I will set this
height property of scheduler and proceed to tell you the purpose
of this allowMultiple option of resources. When I double click
on the cells, you can see here that the group name field will
allow you to choose multiple options. But under this first
resource name field, you will be able to choose only a single option. This is because I have
provided the allowMultiple property value as true for the
second level resource collection, so that I can choose multiple resource names. Next I
will show you how to group the resources based on date. You can see here that the
scheduler is grouped based on resources by default. Suppose if we want to group the
resource based on date. Then I simply need to define the
property by Date and set the value as true within the group
property of the react scheduler. So now you can see under each of
these dates the resources are grouped with its individual spaces. Another important
functionality in grouping is linked events. There are
scenarios, where you may want to create appointments for multiple
persons together in a single shot an you may also want to
edit them together on any changes. To enable such
functionality, I need to set the option allowGroupEdit as true
within the group property. So now when he create an
appointment with multiple resources selected and simply
saving this appointment, you can notice that 2 appointments
grouped under respective resource. When I tried to edit
this particular appointment with a different title and changing the time, then you can see that
the changes are reflected in both the appointments. In the
same way when you drag or resize any such linked appointments,
you can see the changes reflecting on all the linked appointments. Ok, so far, we
have seen the resource grouping in calendar views. Now let’s
look onto the grouped layout in timeline scheduler views. Here you can see the resource
and it’s relevant appointments as individual rows and Task 1
is placed under John Task 2 and 3 are placed under Steve Alright now let’s have a quick
recap about this session. We have seen how to group multiple
resources in react scheduler where you simply need to define
the group data source and map them with the required
appointments. Also, we have seen how to select multiple resources
on the editor window as well as how to add and edit the link
events in group. And we have also seen how to group the resource
based on dates in react scheduler. If you find this
video as useful then click the like button and subscribe to a
Channel two. Thank you for watching this video and stay
tuned to watch upcoming videos.

Leave a Reply

Your email address will not be published. Required fields are marked *