Class ScheduleViewGroup

A class that represents the view-specific resource grouping related configurations by rendering ScheduleViewGroup as child content in ScheduleView tag.

Inheritance
object
ComponentBase
OwningComponentBase
SfOwningComponentBase
SfBaseComponent
SfDataBoundComponent
ScheduleViewGroup
Implements
Inherited Members
Namespace: Syncfusion.Blazor.Schedule
Assembly: Syncfusion.Blazor.dll
Syntax
public class ScheduleViewGroup : SfDataBoundComponent, IComponent, IHandleEvent, IHandleAfterRender, IDisposable
Remarks

You can configure the view wise resource grouping by specifying values for the corresponding properties.

Examples

The following code example shows how to configure the view wise resource grouping

<SfSchedule TValue="AppointmentData">
    <ScheduleResources>
        <ScheduleResource TItem="ResourceData" TValue="int" DataSource="@RoomData" Field="RoomId" Title="Room" Name="Rooms" TextField="Text" IdField="Id"></ScheduleResource>
        <ScheduleResource TItem="ResourceData" TValue="int[]" DataSource="@OwnersData" Field="OwnerId" Title="Owner" Name="Owners" TextField="Text" IdField="Id" GroupIDField="OwnerGroupId" AllowMultiple="true"></ScheduleResource>
    </ScheduleResources>
    <ScheduleViews>
        <ScheduleView Option="View.Day">
            <ScheduleViewGroup Resources="@Resources" ByDate="false" EnableCompactView="false"></ScheduleViewGroup>
        </ScheduleView>
        <ScheduleView Option="View.Week">
            <ScheduleViewGroup Resources="@Resources" ByDate="true"></ScheduleViewGroup>
        </ScheduleView>
        <ScheduleView Option="View.WorkWeek"></ScheduleView>
    </ScheduleViews>
</SfSchedule>
@code {
    string[] Resources { get; set; } = { "Rooms", "Owners" };
    public List<ResourceData> RoomData { get; set; } = new List<ResourceData>
    {
        new ResourceData{ Text = "ROOM 1", Id = 1 },
        new ResourceData{ Text = "ROOM 2", Id = 2 }
    };
    public List<ResourceData> OwnersData { get; set; } = new List<ResourceData>
    {
        new ResourceData{ Text = "Nancy", Id = 1, OwnerGroupId = 1 },
        new ResourceData{ Text = "Steven", Id = 2, OwnerGroupId = 2 }
    };
    public class AppointmentData
    {
        public int Id { get; set; }
        public string Subject { get; set; }
        public DateTime StartTime { get; set; }
        public DateTime EndTime { get; set; }
        public int OwnerId { get; set; }
        public int RoomId { get; set; }
    }
    public class ResourceData
    {
        public int Id { get; set; }
        public string Text { get; set; }
        public int OwnerGroupId { get; set; }
    }
}

Constructors

ScheduleViewGroup()

Declaration
public ScheduleViewGroup()

Properties

AllowGroupEdit

Gets or sets whether the group editing is enabled in the scheduler.

Declaration
[Parameter]
public bool AllowGroupEdit { get; set; }
Property Value
Type Description
bool

Set to true to treat multiple resources as a single appointment object in the scheduler's dataSource. The default value is false
Remarks

Group editing is performed on multiple resources based on the Id value on appointments. It is mandatory to group the resources as an array type and map them to the appointment data's resource field.

Examples
<SfSchedule TValue="AppointmentData">
    <ScheduleResources>
        <ScheduleResource TItem="ResourceData" TValue="int[]" DataSource="@OwnersData" Field="OwnerId" Title="Owner" Name="Owners" TextField="Text" IdField="Id" GroupIDField="OwnerGroupId" AllowMultiple="true"></ScheduleResource>
    </ScheduleResources>
    <ScheduleViews>
        <ScheduleView Option="View.Week">
            <ScheduleViewGroup Resources="@Resources" AllowGroupEdit="true"></ScheduleViewGroup>
        </ScheduleView>
    </ScheduleViews>
</SfSchedule>
@code {
    string[] Resources { get; set; } = { "Owners" };
    public List<ResourceData> OwnersData { get; set; } = new List<ResourceData>
    {
        new ResourceData{ Text = "Nancy", Id = 1 },
        new ResourceData{ Text = "Steven", Id = 2 }
    };
    public class AppointmentData
    {
        public int Id { get; set; }
        public string Subject { get; set; }
        public DateTime StartTime { get; set; }
        public DateTime EndTime { get; set; }
        public int[] OwnerId { get; set; }
    }
    public class ResourceData
    {
        public int Id { get; set; }
        public string Text { get; set; }
    }
}

ByDate

Gets or sets whether to group resources under each date.

Declaration
[Parameter]
public bool ByDate { get; set; }
Property Value
Type Description
bool

Set to true to group resources by date, where each day will render all the resource names under it. The default value is false.
Remarks

This property is applicable only for Day, Week, WorkWeek, Month and Agenda Views.

ByGroupID

Gets or sets whether to render the resource hierarchy based on the value mapped to GroupIDField.

Declaration
[Parameter]
public bool ByGroupID { get; set; }
Property Value
Type Description
bool

Set to false to map all the resources in the child collection to each available parent. The default value is true.

ChildContent

Gets or sets the child content of schedule group.

Declaration
[Parameter]
public RenderFragment ChildContent { get; set; }
Property Value
Type Description
RenderFragment

The value used to build the content.

EnableCompactView

Gets or sets whether to display the resource grouping layout in normal or compact mode on mobile devices.

Declaration
[Parameter]
public bool EnableCompactView { get; set; }
Property Value
Type Description
bool

Set to false to display the default grouping layout on mobile devices, with scrolling enabled. The default value is false.

HeaderTooltipTemplate

Gets or sets template as a RenderFragment<TValue> that defines custom appearance for displaying the resource header tooltip.

Declaration
[Parameter]
public RenderFragment<TemplateContext> HeaderTooltipTemplate { get; set; }
Property Value
Type Description
RenderFragment<TemplateContext>

A template content that specifies the visualization of resource header tooltip. By default, no tooltip will be displayed on resource header.
Examples
<SfSchedule TValue="AppointmentData">
    <ScheduleViews>
        <ScheduleView Option="View.Day">
            <ScheduleViewGroup Resources="@Resources">
                <HeaderTooltipTemplate>
                @{
                    var resourceData = (context as TemplateContext).ResourceData as ResourceData;
                    <div class='template-wrap'>
                        <div class="resource-name">@(resourceData.Text)</div>
                    </div>
                }
                </HeaderTooltipTemplate>
            </ScheduleViewGroup>
        </ScheduleView>
        <ScheduleView Option="View.Week"></ScheduleView>
        <ScheduleView Option="View.WorkWeek"></ScheduleView>
    </ScheduleViews>
</SfSchedule>
@code{
    string[] Resources { get; set; } = { "Conferences" };
    public class ResourceData
    {
        public int Id { get; set; }
        public string Image { get; set; }
        public string Text { get; set; }
    }
}

HideNonWorkingDays

Gets or sets whether to show/hide the non-working days.

Declaration
[Parameter]
public bool HideNonWorkingDays { get; set; }
Property Value
Type Description
bool

true, to hide the non-working days. The default value is false.
Remarks

This property is applicable, only when ByDate property is enabled.

Examples
<SfSchedule>
    <ScheduleViews>
        <ScheduleView Option="View.Week">
            <ScheduleViewGroup ByDate="true" HideNonWorkingDays="true"></ScheduleViewGroup>
        </ScheduleView>
    </SheduleViews>
</SfSchedule>

Resources

Gets or sets the collection of resource names assigned to each resources, which determines the grouping order in the scheduler.

Declaration
[Parameter]
public string[] Resources { get; set; }
Property Value
Type Description
string[]

The collection should be an array of strings. The default value is null.
Remarks

If this property is set to null, grouping will be disabled and the scheduler will be rendered without grouping.

Methods

BuildRenderTree(RenderTreeBuilder)

Declaration
protected override void BuildRenderTree(RenderTreeBuilder __builder)
Parameters
Type Name Description
RenderTreeBuilder __builder
Overrides

OnInitializedAsync()

Initializes the ScheduleViewGroup component during the component initialization phase.

Declaration
protected override Task OnInitializedAsync()
Returns
Type Description
Task

A task representing the asynchronous operation.
Overrides
Remarks

This method performs the following initialization tasks:

  • Calls the base OnInitializedAsync method
  • Updates the parent ScheduleView component with the ScheduleViewGroup configuration
  • Caches the current values of all view group properties for change detection
  • Determines if this view is the active view based on the parent view's Option or IsSelected properties
  • Sets the Group configuration on the parent schedule's ActiveViewOptions if this is the active view
  • Triggers a state change notification in the parent schedule

OnParametersSetAsync()

Handles parameter changes for the ScheduleViewGroup component.

Declaration
protected override Task OnParametersSetAsync()
Returns
Type Description
Task

A task representing the asynchronous operation.
Overrides
Remarks

This method is called whenever component parameters change. It performs the following operations:

  • Calls the base OnParametersSetAsync method
  • Detects changes in all view group properties (AllowGroupEdit, ByDate, ByGroupID, EnableCompactView, HideNonWorkingDays, Resources)
  • Updates the cached property values when changes are detected
  • Updates the DirectParameters dictionary with changed properties
  • Notifies the parent schedule component of property changes

Implements