Telerik UI for Windows 8 HTML

RadScheduler for Windows 8 HTML features grouping by resource name. This means that you can group events in the control by the resource they belong to. For example, if your events take place in three rooms, if you group RadScheduler by the rooms resource, you will have three groups and events will be placed in their corresponding group. This help article explains how to enable grouping and choose between horizontal and vertical grouping.

Enable Grouping by Resource

To group events in RadScheduler by resource, set the group.resources property to an array of strings. These strings must be the names of the resources that you want to group by. You can see an example of grouping by a resource in Code Listing 1 below.

Code Listing 1: Grouping by a Resource Copy imageCopy
var scheduler = new Telerik.UI.RadScheduler(document.querySelector("#schedulerWrapper"), {
    date: new Date("2013/6/6"),
    dataSource: [
    {
        id: 1,
        start: new Date("2013/6/6 11:00 AM"),
        end: new Date("2013/6/6 1:00 PM"),
        title: "Meeting with Investors",
        roomId: 1
    },
    {
        id: 2,
        start: new Date("2013/6/6 11:15 AM"),
        end: new Date("2013/6/6 12:30 PM"),
        title: "Job Interview",
        roomId: 2
    }
    ],
    group: {
        resources: ["Room"]
    },
    resources: [
    {
        field: "roomId",
        name: "Room",
        dataSource: [
        { text: "Meeting Room 101", value: 1, color: "#1c9ec4" },
        { text: "Meeting Room 102", value: 2, color: "#ff7663" }
        ]
    }
    ]
});

Change Group Orientation

For all views, but agenda, you can change the group orientation. Orientation is by default horizontal. To switch it to vertical, set the group.orientation property to "vertical".

Code Listing 2: Change Group Orientation Globally Copy imageCopy
var scheduler = new Telerik.UI.RadScheduler(document.querySelector("#schedulerWrapper"), {
    date: new Date("2013/6/6"),
    dataSource: [
    {
        id: 1,
        start: new Date("2013/6/6 11:00 AM"),
        end: new Date("2013/6/6 1:00 PM"),
        title: "Meeting with Investors",
        roomId: 1
    },
    {
        id: 2,
        start: new Date("2013/6/6 11:15 AM"),
        end: new Date("2013/6/6 12:30 PM"),
        title: "Job Interview",
        roomId: 2
    }
    ],
    group: {
        resources: ["Room"],
        orientation: "vertical"
    },
    resources: [
    {
        field: "roomId",
        name: "Room",
        dataSource: [
        { text: "Meeting Room 101", value: 1, color: "#1c9ec4" },
        { text: "Meeting Room 102", value: 2, color: "#ff7663" }
        ]
    }
    ]
});

If you want to switch the group orientation of one view only, you can do this through the views property. Just add a group.orientation option to the view object definition, as shown in Code Listing 3 below.

Code Listing 3: Change Group Orientation for a Single View Copy imageCopy
var scheduler = new Telerik.UI.RadScheduler(document.querySelector("#schedulerWrapper"), {
    date: new Date("2013/6/6"),
    dataSource: [
    {
        id: 1,
        start: new Date("2013/6/6 11:00 AM"),
        end: new Date("2013/6/6 1:00 PM"),
        title: "Meeting with Investors",
        roomId: 1
    },
    {
        id: 2,
        start: new Date("2013/6/6 11:15 AM"),
        end: new Date("2013/6/6 12:30 PM"),
        title: "Job Interview",
        roomId: 2
    }
    ],
    group: {
        resources: ["Room"],
    },
    views: [
        { type: "day", group: { orientation: "vertical" } },
        { type: "week" }
    ],
    resources: [
    {
        field: "roomId",
        name: "Room",
        dataSource: [
        { text: "Meeting Room 101", value: 1, color: "#1c9ec4" },
        { text: "Meeting Room 102", value: 2, color: "#ff7663" }
        ]
    }
    ]
});

For more information about configuring views, follow this link: RadScheduler Views.