DxScheduler.ResourceNavigatorVisible Property

Specifies whether the Scheduler displays the Resource Navigator.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v23.2.dll

NuGet Package: DevExpress.Blazor

Declaration

[DefaultValue(true)]
[Parameter]
public bool ResourceNavigatorVisible { get; set; }

Property Value

Type	Default	Description
Boolean	true	true to display the Resource Navigator; otherwise, false.

Remarks

The Resource Navigator is a drop-down window that allows you to hide or display resource groups.

Use the ResourceNavigatorVisible property to specify whether the Resource Navigator is visible. The example below replaces the build-in Resource Navigator with a custom tree-like navigator.

<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