DxScheduler.VisibleResourcesDataSource Property

Specifies the data source that stores visible resource objects.

Namespace: DevExpress.Blazor

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

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 example below 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 class="demo-resnavigator-icon"></span>
            </DxButton>
            @if(ResourceNavigatorExpanded) {
                <span style="">Resources</span>
            }
        </div>
        @if(ResourceNavigatorExpanded) {
            <div>
                    <DxTreeView @ref="@TreeView"
                                Data="@ResourceAppointmentCollection.GetResourceGroups()"
                                TextExpression="@(dataItem => ((Resource)dataItem).Name)"
                                ChildrenExpression="@(dataItem => GetNodeChildren(dataItem))">
                        <NodeTextTemplate>
                            @{
                                Resource resource = (Resource)context.DataItem;
                                if(resource.IsGroup) {
                                    <span>@resource.Name</span>
                                }
                                else {
                                    <DxCheckBox T="bool"
                                                Checked="@GetIsVisible(resource)"
                                                CheckedChanged="@(visible => UpdateResourceVisibilty(resource, visible))">
                                        @resource.Name
                                    </DxCheckBox>
                                }
                            }
                        </NodeTextTemplate>
                    </DxTreeView>
            </div>
        }
    </div>
    <div>
        <DxScheduler StartDate="@DateTime.Today"
                     DataStorage="@DataStorage"
                     @bind-VisibleResourcesDataSource="@VisibleResourcesSource"
                     GroupType="@SchedulerGroupType.Resource"
                     ResourceNavigatorVisible="false">
            <DxSchedulerDayView DayCount="1" ShowWorkTimeOnly="true"></DxSchedulerDayView>
        </DxScheduler>
    </div>
</div>

@code {
    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 = ResourceAppointmentCollection.GetResources(),
        ResourceMappings = new DxSchedulerResourceMappings() {
            Id = "Id",
            Caption = "Name",
            BackgroundCssClass = "BackgroundCss",
            TextCssClass = "TextCss"
        }
    };

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

    IEnumerable VisibleResourcesSource {
        get => VisibleResources;
        set => VisibleResources = value.Cast<Resource>().ToList();
    }

    bool ResourceNavigatorExpanded { get; set; } = true;

    DxTreeView TreeView;

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

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

    IEnumerable GetNodeChildren(object dataItem) {
        Resource resource = (Resource)dataItem;
        if(resource.IsGroup) {
            return ResourceAppointmentCollection.GetResources()
                .Where(childResource => childResource.GroupId == resource.Id);
        }
        return null;
    }

    void ToggleResourceNavigator() {
        ResourceNavigatorExpanded = !ResourceNavigatorExpanded;
    }

    protected override void OnAfterRender(bool firstRender) {
        TreeView.ExpandAll();
    }
}

Run Demo: Scheduler - Custom Resource Navigator