New to Telerik UI for ASP.NET Core? Download free 30-day trial

Vertical Grouping

Loading Demo...

EXAMPLE
VIEW SOURCE
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_vertical.cshtml
                    
                        Resources_Grouping_VerticalController.cs
                    
                        SchedulerMeetingService.cs
                    
                        MeetingViewModel.cs

Also available for:

API REFERENCE

kendo.syncReady(function(){jQuery("#scheduler").kendoScheduler({"date":new Date(2013,5,13,0,0,0,0),"height":600,"startTime":new Date(2013,5,13,7,0,0,0),"timezone":"Etc/UTC","editable":{"editRecurringMode":"dialog"},"views":[{"type":"day"},{"type":"week","selected":true},{"type":"month"},{"type":"agenda"},{"type":"timeline"}],"resources":[{"dataSource":[{"Text":"Meeting Room 101","Value":1,"Color":"#6eb3fa"},{"Text":"Meeting Room 201","Value":2,"Color":"#f58a8a"}],"title":"Room","field":"RoomID","dataTextField":"Text","dataValueField":"Value","dataColorField":"Color","name":"Rooms"},{"dataSource":[{"Text":"Alex","Value":1,"Color":"#f8a398"},{"Text":"Bob","Value":2,"Color":"#51a0ed"},{"Text":"Charlie","Value":3,"Color":"#56ca85"}],"title":"Attendees","field":"Attendees","multiple":true,"dataTextField":"Text","dataValueField":"Value","dataColorField":"Color","name":"Attendees"}],"group":{"resources":["Rooms","Attendees"],"orientation":"vertical"},"mobile":"","dataSource":{"type":(function(){if(kendo.data.transports['aspnetmvc-ajax']){return 'aspnetmvc-ajax';} else{throw new Error('The kendo.aspnetmvc.min.js script is not included.');}})(),"transport":{"read":{"url":"/aspnet-core/scheduler/grouping_vertical_read"},"prefix":"","update":{"url":"/aspnet-core/scheduler/grouping_vertical_update"},"create":{"url":"/aspnet-core/scheduler/grouping_vertical_create"},"destroy":{"url":"/aspnet-core/scheduler/grouping_vertical_destroy"},"stringifyDates":true},"schema":{"data":"Data","total":"Total","errors":"Errors","model":{"id":"MeetingID","fields":{"MeetingID":{"type":"number"},"title":{"from":"Title","type":"string","defaultValue":"No title"},"description":{"from":"Description","type":"string"},"start":{"from":"Start","type":"date"},"startTimezone":{"from":"StartTimezone","type":"string"},"end":{"from":"End","type":"date"},"endTimezone":{"from":"EndTimezone","type":"string"},"recurrenceRule":{"from":"RecurrenceRule","type":"string"},"recurrenceId":{"from":"RecurrenceID","type":"number","defaultValue":null},"recurrenceException":{"from":"RecurrenceException","type":"string"},"isAllDay":{"from":"IsAllDay","type":"boolean"},"Timezone":{"type":"string"},"RoomID":{"type":"number","defaultValue":null},"Attendees":{"type":"object"}}}}}});});

Description

You can see in this example how to group the scheduler’s resources vertically. The direction of the grouping can be controlled with the Orientation property, i.e.

.Group(group => group.Resources("Rooms", "Attendees").Orientation(SchedulerGroupOrientation.Vertical))

The available orientation options are Default, Horizontal and Vertical.

Support & Learning Resources

Was this demo helpful?

YES NO

Tell us how we can improve this demo

Submit Skip