DxScheduler.ResourceNavigatorVisible Property

Specifies whether the Scheduler displays the Resource Navigator.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v20.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 hides the build-in Resource Navigator and implements a custom tree-like navigator outside the Scheduler component’s area.

<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