New to Kendo UI for jQuery? Download free 30-day trial

Horizontal Grouping

Loading Demo...

EXAMPLE
VIEW SOURCE
EDIT
- Edit in Kendo UI Dojo
- Edit in Theme Builder
Change Theme
Default
SASS

LESS
- Default
- Bootstrap
- Material
- Launch Theme Builder
- Black
- Blue Opal
- Bootstrap v3
- Default
- Fiori
- Flat
- High Contrast
- Material
- Material Black
- Metro
- Metro Black
- Moonlight
- Nova
- Office 365
- Silver
- Uniform

            
                        resources-grouping-horizontal.html
                    
                        Sample service

Also available for:

API REFERENCE

$(function() { $("#scheduler").kendoScheduler({ date: new Date("2013/6/13"), startTime: new Date("2013/6/13 07:00 AM"), height: 600, views: [ "day", { type: "week", selected: true }, "month", "timeline" ], timezone: "Etc/UTC", dataSource: { batch: true, transport: { read: { url: "https://demos.telerik.com/kendo-ui/service/meetings", dataType: "jsonp" }, update: { url: "https://demos.telerik.com/kendo-ui/service/meetings/update", dataType: "jsonp" }, create: { url: "https://demos.telerik.com/kendo-ui/service/meetings/create", dataType: "jsonp" }, destroy: { url: "https://demos.telerik.com/kendo-ui/service/meetings/destroy", dataType: "jsonp" }, parameterMap: function(options, operation) { if (operation !== "read" && options.models) { return {models: kendo.stringify(options.models)}; } } }, schema: { model: { id: "meetingID", fields: { meetingID: { from: "MeetingID", type: "number" }, title: { from: "Title", defaultValue: "No title", validation: { required: true } }, start: { type: "date", from: "Start" }, end: { type: "date", from: "End" }, startTimezone: { from: "StartTimezone" }, endTimezone: { from: "EndTimezone" }, description: { from: "Description" }, recurrenceId: { from: "RecurrenceID" }, recurrenceRule: { from: "RecurrenceRule" }, recurrenceException: { from: "RecurrenceException" }, roomId: { from: "RoomID", nullable: true }, attendees: { from: "Attendees", nullable: true }, isAllDay: { type: "boolean", from: "IsAllDay" } } } } }, group: { resources: ["Rooms"] }, resources: [ { field: "roomId", name: "Rooms", dataSource: [ { text: "Meeting Room 101", value: 1, color: "#6eb3fa" }, { text: "Meeting Room 201", value: 2, color: "#f58a8a" } ], title: "Room" }, { field: "attendees", name: "Attendees", dataSource: [ { text: "Alex", value: 1, color: "#f8a398" }, { text: "Bob", value: 2, color: "#51a0ed" }, { text: "Charlie", value: 3, color: "#56ca85" } ], multiple: true, title: "Attendees" } ] }); });

Description

This demo illustrates how you can group the resources horizontally in Kendo UI Scheduler. The direction of the grouping can be controlled with the group ->orientation property (default value is horizontal).

The available options of the scheduler group orientation are horizontal and vertical, having in mind that the agenda view is always in vertical orientation.

Horizontal Grouping

Description

Support & Learning Resources

Was this demo helpful?

Tell us how we can improve this demo