DxSchedulerResourceMappings Class

Maps the resource’s properties to the data source fields.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v22.1.dll

NuGet Package: DevExpress.Blazor

Declaration

public class DxSchedulerResourceMappings :
    DxSchedulerMappingsBase

Related API Members

The following members return DxSchedulerResourceMappings objects:

• DxSchedulerDataStorage.ResourceMappings

Remarks

Follow the steps below to add and assign resources to Scheduler appointments:

1. Create a DxSchedulerDataStorage object with a simple constructor and specify appointment mappings. See the DxSchedulerAppointmentMappings class description for more information.
2. Declare a class that stores resource options (for instance, ResourceObject).
3. Create a collection of resource source objects (ResourceObject class instances) and define their options:
   • Id - Specifies the resource’s unique identifier.
   • Caption - Specifies the resource’s caption.
   • Color - Specifies the resource’s color. To apply this color to all appointments that correspond to the resource, remove appointment labels.
   • BackgroundCssClass - Specifies the CSS class applied to the resource’s background (the background color, background image, border color, and so on). Note that the Color property value overrides the background color specified in the CSS class.
   • TextCssClass - Specifies the CSS class applied to the text of appointments that correspond to the resource.
4. Assign the resource collection to the storage’s ResourcesSource property. The Scheduler generates a resource item (DxSchedulerResourceItem) for each item in this collection.
5. Create a DxSchedulerResourceMappings object and map the resource’s source fields to the resource’s properties.
6. Assign this object to the storage’s ResourceMappings property.
7. Group appointments by resource (optional). To do this, set the Scheduler’s GroupType property to SchedulerGroupType.Resource.

Razor

<DxScheduler StartDate="@DateTime.Today"
             DataStorage="@DataStorage"
             GroupType="SchedulerGroupType.Resource"
             ResourceColorInHeaderVisible="true"
             CssClass="mw-1100">
    <DxSchedulerDayView DayCount="2" ShowWorkTimeOnly="true"></DxSchedulerDayView>
</DxScheduler>

@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 = new List<ResourceObject>() {
                new ResourceObject() { Id=0 , Name="John Heart", TextCss="text-white",
                                       BackgroundCss="green-background", 
                                       /*Color = System.Drawing.Color.Green*/ },
                new ResourceObject() { Id=1 , Name="Samantha Bright", TextCss="text-white",
                                       BackgroundCss="orange-background", 
                                       /*Color = System.Drawing.Color.Orange*/ },
                new ResourceObject() { Id=2 , Name="Arthur Miller", TextCss="text-white",
                                       BackgroundCss="purple-background", 
                                       /*Color = System.Drawing.Color.Purple*/ },
        },
        ResourceMappings = new DxSchedulerResourceMappings() {
            Id = "Id",
            Caption = "Name",
            Color = "Color",
            BackgroundCssClass = "BackgroundCss",
            TextCssClass = "TextCss"
        }
    };

    public class ResourceObject {
        public int Id { get; set; }
        public string Name { get; set; }
        public System.Drawing.Color Color { get; set; }
        public string TextCss { get; set; }
        public string BackgroundCss { get; set; }
    }
}

<style>
    .green-background {
        background-color: #13B955;
    }
    .orange-background {
        background-color: #fd7e14;
    }
    .purple-background {
        background-color: #593196;
    }
    .text-white {
        color: white;
    }
</style>

ResourceAppointment

public class ResourceAppointment {
    public ResourceAppointment() { }
    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; }
}

ResourceAppointmentCollection

public static partial class ResourceAppointmentCollection {
    public static List<ResourceAppointment> GetAppointments() {
        DateTime date = DateTime.Now.Date;
        var dataSource = new List<ResourceAppointment>() {
            new ResourceAppointment {
                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 ResourceAppointment {
                Caption = "Upgrade Personal Computers",
                StartDate = date + (new TimeSpan(0,  13, 0, 0)),
                EndDate = date + (new TimeSpan(0, 14, 30, 0)),
                Status = 1,
                ResourceId = 0
            },
            // ...            
            new ResourceAppointment {
                Caption = "Final Budget Review",
                StartDate = date + (new TimeSpan(0, 13, 0, 0)),
                EndDate = date + (new TimeSpan(0, 15, 0, 0)),
                Status = 1,
                ResourceId = 1
            },
            new ResourceAppointment {
                Caption = "Install New Database",
                StartDate = date + (new TimeSpan(0, 9, 45, 0)),
                EndDate = date + (new TimeSpan(1, 11, 15, 0)),
                Status = 1,
                ResourceId = 1
            },
            // ...
        };
        return dataSource;
    }
}

If you do not need to display all of the resources from the data source, use the VisibleResourcesDataSource property to specify visible resources.

Run Demo: Scheduler - Resources

Watch Video: Scheduler - Resources

Resource’s Custom Fields

You can add custom properties to a resource:

1. Define custom fields in the resource’s source object.
2. Add created fields to the CustomFieldMappings collection.

The code below adds the MyCustomField field to ResourceObject and maps this field to the resource’s MyCustomProperty property:

@code {
    public class ResourceObject {
        public int Id { get; set; }
        public string LabelName { get; set; }
        public System.Drawing.Color LabelColor { get; set; }
        public string MyCustomField { get; set; } // a custom field
    }

    DxSchedulerDataStorage DataStorage = new DxSchedulerDataStorage() {
        ResourcesSource = new List<ResourceObject>() {
            new ResourceObject() { 
                Id = 1, 
                ResourceName = "Resource One", 
                ResourceColor = System.Drawing.Color.Aqua, 
                MyCustomField = "custom text for Resource One" 
            },
            new ResourceObject() { 
                Id = 2, 
                ResourceName = "Resource Two", 
                ResourceColor = System.Drawing.Color.Beige, 
                MyCustomField = "custom text for Resource Two"
            },
        },
        ResourceMappings = new DxSchedulerResourceMappings() {
            Id = "Id",
            Caption = "ResourceName",
            Color = "ResourceColor",
            // Map the source object's custom field to the resource's custom property
            CustomFieldMappings = new List<DxSchedulerCustomFieldMapping> {
                new DxSchedulerCustomFieldMapping { Name = "MyCustomProperty", Mapping = "MyCustomField" }
            }
        }
    };
}

Implements

INotifyPropertyChanged

Inheritance

Object

DevExpress.Blazor.Scheduler.Internal.BindableBase

DxSchedulerMappingsBase

DxSchedulerResourceMappings