DxScheduler.VisibleResourcesDataSource Property

Specifies the data source that stores visible resource objects.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

Declaration

[Parameter]
public IEnumerable VisibleResourcesDataSource { get; set; }

Property Value

Type	Description
IEnumerable	The collection of visible resource’s data objects.

Remarks

Use the VisibleResourcesDataSource property to specify which resources from the resource data source are displayed in the Scheduler. We recommend that you use two-way data binding with this property because if you change the active view in the UI, the Scheduler component reverts this change on next render.

If the resource data source (the ResourcesSource collection) does not include a resource object in the VisibleResourcesDataSource collection, the corresponding resource is not displayed.

The following code snippet hides the build-in Resource Navigator and implements a custom tree-like navigator outside the Scheduler component’s area based on the visible resource data source.

Razor

<div>
    <div>
        <div>
            <DxButton RenderStyle="ButtonRenderStyle.None" Click="@ToggleResourceNavigator" IconCssClass="demo-resnavigator-icon" title="Toggle the resource navigator" />
            @if(ResourceNavigatorExpanded) {
                <span style="">Resources</span>
            }
        </div>
        @if(ResourceNavigatorExpanded) {
            <div>
                <DxTreeView AfterCollapse="@(e => UpdateExpandedState(e, false))" AfterExpand="@(e => UpdateExpandedState(e, true))">
                    <Nodes>
                        @foreach(Resource group in Groups) {
                            <DxTreeViewNode Text="@group.Name" Name="@group.Id.ToString()" Expanded="@IsExpanded(group)">
                                <Nodes>
                                    @foreach(Resource resource in GetResources(group)) {
                                        <DxTreeViewNode Text="@resource.Name">
                                            <Template>
                                                <DxCheckBox T="bool"
                                                            Checked="@IsVisible(resource)"
                                                            CheckedChanged="@(visible => UpdateVisibilty(resource, visible))">
                                                    @resource.Name
                                                </DxCheckBox>
                                            </Template>
                                        </DxTreeViewNode>
                                    }
                                </Nodes>
                            </DxTreeViewNode>
                        }
                    </Nodes>
                </DxTreeView>
            </div>
        }
    </div>
    <div>
        <DxScheduler @bind-StartDate="@StartDate"
                     DataStorage="@DataStorage"
                     VisibleResourcesDataSource="@VisibleResources"
                     GroupType="SchedulerGroupType.Resource"
                     ResourceNavigatorVisible="false">
            <DxSchedulerDayView DayCount="1" ShowWorkTimeOnly="true"></DxSchedulerDayView>
        </DxScheduler>
    </div>
</div>

@code {
    List<Resource> Groups = ResourceCollection.GetResourceGroups();

    List<Resource> VisibleResources = ResourceCollection.GetResources().Take(2).ToList();

    bool ResourceNavigatorExpanded { get; set; } = true;

    DateTime StartDate = DateTime.Today;

    DxSchedulerDataStorage DataStorage = new DxSchedulerDataStorage() {
        AppointmentsSource = ResourceAppointmentCollection.GetAppointments(),
        AppointmentMappings = new DxSchedulerAppointmentMappings() {
            Type = "AppointmentType",
            Start = "StartDate",
            End = "EndDate",
            Subject = "Caption",
            AllDay = "AllDay",
            Location = "Location",
            Description = "Description",
            LabelId = "Label",
            StatusId = "Status",
            RecurrenceInfo = "Recurrence",
            ResourceId = "ResourceId"
        },
        ResourcesSource = ResourceCollection.GetResources(),
        ResourceMappings = new DxSchedulerResourceMappings() {
            Id = "Id",
            Caption = "Name",
            BackgroundCssClass = "BackgroundCss",
            TextCssClass = "TextCss"
        }
    };

    Dictionary<int, bool> ExpandedState = new Dictionary<int, bool>();

    bool IsVisible(Resource resource) {
        return VisibleResources.Contains(resource);
    }

    void UpdateVisibilty(Resource resource, bool visible) {
        if(visible)
            VisibleResources.Add(resource);
        else
            VisibleResources.Remove(resource);
        VisibleResources = VisibleResources.OrderBy(p => p.Id).ToList();
    }

    bool IsExpanded(Resource resource) {
        return ExpandedState.ContainsKey(resource.Id) ? ExpandedState[resource.Id] : true;
    }

    void UpdateExpandedState(TreeViewNodeEventArgs args, bool expanded) {
        int resourceId = int.Parse(args.NodeInfo.Name);
        ExpandedState[resourceId] = expanded;
    }

    void ToggleResourceNavigator() {
        ResourceNavigatorExpanded = !ResourceNavigatorExpanded;
    }

    IEnumerable<Resource> GetResources(Resource group) {
        return ResourceCollection.GetResources()
            .Where(resource => resource.GroupId == group.Id);
    }
}

Appointment

public class Appointment {
    public Appointment() { }

    public int AppointmentType { get; set; }
    public DateTime StartDate { get; set; }
    public DateTime EndDate { get; set; }
    public string Caption { get; set; }
    public string Description { get; set; }
    public string Location { get; set; }
    public int? Label { get; set; }
    public int Status { get; set; }
    public bool AllDay { get; set; }
    public string Recurrence { get; set; }
    public int? ResourceId { get; set; }
    public string Resources { get; set; }
    public bool Accepted { get; set; }
}

ResourceAppointmentCollection

public static partial class ResourceAppointmentCollection {
    public static List<Appointment> GetAppointments() {
        DateTime date = DateTime.Now.Date;
        var dataSource = new List<Appointment>() {
            new Appointment {
                Accepted = true,
                Caption = "Install New Router in Dev Room",
                StartDate = date + (new TimeSpan(0, 10, 0, 0)),
                EndDate = date + (new TimeSpan(0, 12, 0, 0)),
                Status = 1,
                ResourceId = 0
            },
            new Appointment {
                Caption = "Upgrade Personal Computers",
                Accepted = false,
                StartDate = date + (new TimeSpan(0,  13, 0, 0)),
                EndDate = date + (new TimeSpan(0, 14, 30, 0)),
                Status = 2,
                ResourceId = 0
            },
            new Appointment {
                Caption = "Website Redesign Plan",
                Accepted = false,
                StartDate = date + (new TimeSpan(1, 9, 30, 0)),
                EndDate = date + (new TimeSpan(1, 11, 30, 0)),
                Status = 3,
                ResourceId = 0
            },
            new Appointment {
                Caption = "New Brochures",
                Accepted = true,
                StartDate = date + (new TimeSpan(1, 13, 30, 0)),
                EndDate = date + (new TimeSpan(1, 15, 15, 0)),
                Status = 4,
                ResourceId = 0
            },
            new Appointment {
                Caption = "Book Flights to San Fran for Sales Trip",
                Accepted = false,
                StartDate = date + (new TimeSpan(1, 12, 0, 0)),
                EndDate = date + (new TimeSpan(1, 13, 0, 0)),
                AllDay = true,
                Status = 1,
                ResourceId = 0
            },
            new Appointment {
                Caption = "Approve Personal Computer Upgrade Plan",
                Accepted = true,
                StartDate = date + (new TimeSpan(0, 10, 0, 0)),
                EndDate = date + (new TimeSpan(0, 12, 0, 0)),
                Status = 2
            },
            new Appointment {
                Caption = "Final Budget Review",
                Accepted = true,
                StartDate = date + (new TimeSpan(0, 13, 0, 0)),
                EndDate = date + (new TimeSpan(0, 15, 0, 0)),
                Status = 3,
                ResourceId = 1
            },
            new Appointment {
                Caption = "Install New Database",
                Accepted = false,
                StartDate = date + (new TimeSpan(0, 9, 45, 0)),
                EndDate = date + (new TimeSpan(1, 11, 15, 0)),
                Status = 4,
                ResourceId = 1
            },
            new Appointment {
                Accepted = true,
                Caption = "Approve New Online Marketing Strategy",
                StartDate = date + (new TimeSpan(1,  12, 0, 0)),
                EndDate = date + (new TimeSpan(1, 14, 0, 0)),
                Status = 1,
                ResourceId = 1
            },
            new Appointment {
                Accepted = true,
                Caption = "Customer Workshop",
                StartDate = date + (new TimeSpan(0,  11, 0, 0)),
                EndDate = date + (new TimeSpan(0, 12, 0, 0)),
                AllDay = true,
                Status = 2,
                ResourceId = 2
            },
            new Appointment {
                Accepted = true,
                Caption = "Prepare 2021 Marketing Plan",
                StartDate = date + (new TimeSpan(0,  11, 0, 0)),
                EndDate = date + (new TimeSpan(0, 13, 30, 0)),
                Status = 3,
                ResourceId = 2
            },
            new Appointment {
                Accepted = false,
                Caption = "Brochure Design Review",
                StartDate = date + (new TimeSpan(0, 14, 0, 0)),
                EndDate = date + (new TimeSpan(0, 15, 30, 0)),
                Status = 4,
                ResourceId = 2
            },
            new Appointment {
                Accepted = true,
                Caption = "Create Icons for Website",
                StartDate = date + (new TimeSpan(1, 10, 0, 0)),
                EndDate = date + (new TimeSpan(1, 11, 30, 0)),
                Status = 1,
                ResourceId = 1
            },
            new Appointment {
                Accepted = true,
                Caption = "Launch New Website",
                StartDate = date + (new TimeSpan(1, 12, 20, 0)),
                EndDate = date + (new TimeSpan(1, 14, 0, 0)),
                Status = 1,
                ResourceId = 2
            },
            new Appointment {
                Accepted = false,
                Caption = "Upgrade Server Hardware",
                StartDate = date + (new TimeSpan(1, 9, 0, 0)),
                EndDate = date + (new TimeSpan(1, 12, 0, 0)),
                Status = 2,
                ResourceId = 2
            },
            new Appointment {
                Accepted = true,
                Caption = "Book Flights to San Fran for Sales Trip",
                StartDate = date + (new TimeSpan(0, 14, 0, 0)),
                EndDate = date + (new TimeSpan(0, 17, 0, 0)),
                Status = 1,
                ResourceId = 3
            },
            new Appointment {
                Accepted = true,
                Caption = "Approve New Online Marketing Strategy",
                StartDate = date + (new TimeSpan(0,  12, 0, 0)),
                EndDate = date + (new TimeSpan(0, 15, 0, 0)),
                Status = 3,
                ResourceId = 4
            }
        };
        return dataSource;
    }
}

Resource

public class Resource {
    public int Id { get; set; }
    public int? GroupId { get; set; }
    public string Name { get; set; }
    public bool IsGroup { get; set; }

    public string TextCss { get; set; }
    public string BackgroundCss { get; set; }

    public string ImageFileName => $"employees/{Id + 1}.jpg";

    public override bool Equals(object obj) {
        Resource resource = obj as Resource;
        return resource != null && resource.Id == Id;
    }

    public override int GetHashCode() {
        return Id;
    }
}

Resource

public static partial class ResourceCollection {
    public static List<Resource> GetResourcesForGrouping() {
        return GetResources().Take(3).ToList();
    }

    public static List<Resource> GetResources() {
        return new List<Resource>() {
            new Resource() { Id=0 , Name="Nancy Davolio", GroupId=100, BackgroundCss="dxbl-green-color", TextCss="text-white" },
            new Resource() { Id=1 , Name="Andrew Fuller", GroupId=101, BackgroundCss="dxbl-orange-color", TextCss="text-white" },
            new Resource() { Id=2 , Name="Janet Leverling", GroupId=100, BackgroundCss="dxbl-purple-color", TextCss="text-white" },
            new Resource() { Id=3 , Name="Margaret Peacock", GroupId=101, BackgroundCss="dxbl-indigo-color", TextCss="text-white" },
            new Resource() { Id=4 , Name="Steven Buchanan", GroupId=100, BackgroundCss="dxbl-red-color", TextCss="text-white" }
        };
    }

    public static List<Resource> GetResourceGroups() {
        return new List<Resource>() {
            new Resource() { Id=100, Name="Sales and Marketing", IsGroup=true },
            new Resource() { Id=101, Name="Engineering", IsGroup=true }
        };
    }
}

Run Demo: Scheduler - Custom Resource Navigator