Multiple grouping with scheduler

[Itadmin]

Hello, 

I'm trying to adapt your example here (I've copied the code in at the bottom of this post for easy viewing):
https://blazor.syncfusion.com/demos/scheduler/timeline-grouping/

I would like to be able to select multiple Task resources to the ScheduleData.ResourceData object, so instead of

new ResourceData
{
    Id = 1,
    Subject = "Workflow Analysis",
    StartTime = new DateTime(CurrentYear, 1, 5, 9, 30, 0),
    EndTime = new DateTime(CurrentYear, 1, 5, 12, 0, 0),
    IsAllDay = false,
    ProjectId = 1,
    TaskId = 2
});

I would like

new ResourceData
{
    Id = 1,
    Subject = "Workflow Analysis",
    StartTime = new DateTime(CurrentYear, 1, 5, 9, 30, 0),
    EndTime = new DateTime(CurrentYear, 1, 5, 12, 0, 0),
    IsAllDay = false,
    ProjectId = 1,
    TaskId = new[]{2,3,4}
});

The aim is for event "Workflow Analysis" to show multiple times on the scheduler under PROJECT1, alongside Steven, Robert and Smith. Is there a way to do this?

Your Example Code for reference:

@page "/scheduler/timeline-grouping"
@using Syncfusion.Blazor.Schedule
@inherits SampleBaseComponent;
<div class="control-section">
    <SfSchedule TValue="ScheduleData.ResourceData" Width="100%" Height="650px" @bind-SelectedDate="@CurrentDate" @bind-CurrentView="@CurrentView">
        <ScheduleGroup Resources="@groupData"></ScheduleGroup>
        <ScheduleResources>
            <ScheduleResource TItem="ResourceData" TValue="int" DataSource="@ProjectData" Field="ProjectId" Title="Choose Project" Name="Projects" TextField="Text" IdField="Id" ColorField="Color"></ScheduleResource>
            <ScheduleResource TItem="ResourceData" TValue="int[]" DataSource="@TaskData" Field="TaskId" Title="Category" Name="Categories" TextField="Text" IdField="Id" GroupIDField="GroupId" ColorField="Color" AllowMultiple="true"></ScheduleResource>
        </ScheduleResources>
        <ScheduleViews>
            <ScheduleView Option="View.TimelineDay"></ScheduleView>
            <ScheduleView Option="View.TimelineWeek"></ScheduleView>
            <ScheduleView Option="View.TimelineWorkWeek"></ScheduleView>
            <ScheduleView Option="View.TimelineMonth"></ScheduleView>
            <ScheduleView Option="View.Agenda"></ScheduleView>
        </ScheduleViews>
        <ScheduleEventSettings DataSource="@dataSource"></ScheduleEventSettings>
    </SfSchedule>
</div>
@code{
    private View CurrentView { get; set; } = View.TimelineWeek;
    private DateTime CurrentDate { get; set; } = new DateTime(DateTime.Today.Year, 1, 10);
    private List<ScheduleData.ResourceData> dataSource = new ScheduleData().GetResourceData();
    private string[] groupData = new string[] { "Projects", "Categories" };
    private List<ResourceData> ProjectData { get; set; } = new List<ResourceData> {
        new ResourceData {Text = "PROJECT 1", Id= 1, Color= "#cb6bb2"},
        new ResourceData {Text = "PROJECT 2", Id= 2, Color= "#56ca85"},
        new ResourceData {Text = "PROJECT 3", Id= 3, Color= "#df5286"}
    };
    private List<ResourceData> TaskData { get; set; } = new List<ResourceData> {
        new ResourceData { Text = "Nancy", Id= 1, GroupId = 1, Color = "#df5286" },
        new ResourceData { Text = "Steven", Id= 2, GroupId = 1, Color = "#7fa900" },
        new ResourceData { Text = "Robert", Id= 3, GroupId = 2, Color = "#ea7a57" },
        new ResourceData { Text = "Smith", Id= 4, GroupId = 2, Color = "#5978ee" },
        new ResourceData { Text = "Michael", Id= 5, GroupId = 3, Color = "#df5286" },
        new ResourceData { Text = "Root", Id= 6, GroupId = 3, Color = "#00bdae" }
    };
    public class ResourceData
    {
        public string Text { get; set; }
        public int Id { get; set; }
        public int GroupId { get; set; }
        public string Color { get; set; }
    }
}

[Ravikumar Venkatesan]

Hi Itadmin,

Greetings from Syncfusion support.

We have validated your requirement “Multiple grouping with scheduler” at our end. You can achieve your requirement by using the AllowGroupEdit property of the Schedule as highlighted in the below code snippet. We have prepared a sample for your reference.

[index.razor]

<SfSchedule TValue="AppointmentData" Width="100%" Height="650px" @bind-SelectedDate="@SelectedDate" @bind-CurrentView="@CurrentView">

    <ScheduleGroup Resources="@groupData" AllowGroupEdit="true"></ScheduleGroup>

    <ScheduleResources>

        <ScheduleResource TItem="ResourceData" TValue="int" DataSource="@ProjectData" Field="ProjectId" Title="Choose Project" Name="Projects" TextField="Text" IdField="Id" ColorField="Color"></ScheduleResource>

        <ScheduleResource TItem="ResourceData" TValue="int[]" DataSource="@TaskData" Field="TaskId" Title="Category" Name="Categories" TextField="Text" IdField="Id" GroupIDField="GroupId" ColorField="Color" AllowMultiple="true"></ScheduleResource>

    </ScheduleResources>

</SfSchedule>

If you want to select all the last level resources on the Schedule you need to set AllotMultiple true for parent resource too as highlighted in the below code snippet.

[counter.razor]

<SfSchedule TValue="AppointmentData" Width="100%" Height="650px" @bind-SelectedDate="@SelectedDate" @bind-CurrentView="@CurrentView">

    <ScheduleGroup Resources="@groupData" AllowGroupEdit="true"></ScheduleGroup>

    <ScheduleResources>

        <ScheduleResource TItem="ResourceData" TValue="int[]" DataSource="@ProjectData" Field="ProjectId" Title="Choose Project" Name="Projects" TextField="Text" IdField="Id" ColorField="Color" AllowMultiple="true"></ScheduleResource>

        <ScheduleResource TItem="ResourceData" TValue="int[]" DataSource="@TaskData" Field="TaskId" Title="Category" Name="Categories" TextField="Text" IdField="Id" GroupIDField="GroupId" ColorField="Color" AllowMultiple="true"></ScheduleResource>

    </ScheduleResources>

</SfSchedule>

Kindly try the shared solution and let us know if you need any further assistance on this.

Demo: https://ej2.syncfusion.com/javascript/demos/#/material/schedule/group-editing.html

UG: https://blazor.syncfusion.com/documentation/scheduler/resources#working-with-shared-events

API: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleGroup.html#Syncfusion_Blazor_Schedule_ScheduleGroup_AllowGroupEdit

Regards,

Ravikumar Venkatesan 

Attachment: syncfusionblazorscheduleallowgroupeditsample_cc576a3d.zip