DxScheduler.VisibleResourcesDataSource Property

Specifies the data source that stores visible resource objects.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.1.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.

<div>
    <div>
        <div>
            <DxButton RenderStyle="ButtonRenderStyle.None" 
                      @onclick="@ToggleResourceNavigator">
                <span></span>
            </DxButton>
            @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>
                                                <div>
                                                    <DxCheckBox T="bool"
                                                                Checked="@IsVisible(resource)"
                                                                CheckedChanged="@(visible => UpdateVisibilty(resource, visible))">
                                                        @resource.Name
                                                    </DxCheckBox>
                                                </div>
                                            </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);
    }
}

Run Demo: Scheduler - Custom Resource Navigator