# Vertical Grouping

The grouping feature allows you to group the resources of the Scheduler vertically.

The vertical grouping displays the resources (such as rooms, attendees, equipment, and more) as rows along the left side of the Scheduler, with the time slots remaining on the vertical axis for `Day` and `Week` views and on the horizontal axis for `Month` and `Timeline` views. As a result, each resource is represented as a separate row, allowing the user to review all events associated with each resource one below the other. With the vertical layout, more detailed information can be displayed for each resource, as the entire row is dedicated to showing the time and events of that specific resource.

To enable the vertical resources grouping:

1. Add the [`Group()`](https://www.telerik.com/aspnet-core-ui/documentation/api/kendo.mvc.ui.fluent/schedulerbuilder#groupsystemaction) configuration and specify the names of the resources in the [`Resources()`](https://www.telerik.com/aspnet-core-ui/documentation/api/kendo.mvc.ui.fluent/schedulergroupbuilder#resourcessystemstring) option.
2. Set the [`Orientation()`](https://www.telerik.com/aspnet-core-ui/documentation/api/kendo.mvc.ui.fluent/schedulergroupbuilder#orientationkendomvcuischedulergrouporientation) option to `SchedulerGroupOrientation.Vertical`. The available options of the `SchedulerGroupOrientation` setting are `Default` (horizontal), `Horizontal`, and `Vertical`.

The Scheduler requests and retrieves the data as usual and renders the events based on the grouped resources.

```Razor HtmlHelper
    @(Html.Kendo().Scheduler<MeetingViewModel>()
        .Name("scheduler")
        .Resources(resource =>
        {
            resource.Add(m => m.RoomID)
            .Title("Room")
            .Name("Rooms")
            .DataTextField("Text")
            .DataValueField("Value")
            .DataColorField("Color")
            .BindTo(new[] {
                    new { Text = "Meeting Room 101", Value = 1, Color = "#6eb3fa" },
                    new { Text = "Meeting Room 201", Value = 2, Color = "#f58a8a" }
            });
        })
        .Group(group => group.Resources("Rooms").Orientation(SchedulerGroupOrientation.Vertical)) // "Rooms" matches the "Name()" option of the defined resource within the "Resources()" configuration.
        ...// Additional configuration.
    )
```

```Razor TagHelper
    @addTagHelper *, Kendo.Mvc

    @{
        var roomsData = new[]
        {
            new { Text = "Meeting Room 101", Value = 1, Color = "#6eb3fa" },
            new { Text = "Meeting Room 201", Value = 2, Color = "#f58a8a" }
        };
    }
    <kendo-scheduler name="scheduler">
        <resources>
            <resource name="Rooms" field="RoomID" title="Room" datatextfield="Text" datavaluefield="Value" datacolorfield="Color" bind-to="@roomsData">
            </resource>
        </resources>
        <group orientation="vertical">
            <resources>
                <group-resource name="Rooms"/> 
            </resources>
        </group>
        
    </kendo-scheduler>
```

## Next Steps

* [Implementing Vertical Virtual Grouping of the Scheduler Resources](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/scheduling/scheduler/grouping/virtual-vertical-grouping)

## See Also

* [Vertical Grouping by the Scheduler for ASP.NET Core (Demo)](https://demos.telerik.com/aspnet-core/scheduler/resources-grouping-vertical)

* [Server-Side API of the Scheduler HtmlHelper](https://www.telerik.com/aspnet-core-ui/documentation/api/scheduler)

* [Server-Side API of the Scheduler TagHelper](https://www.telerik.com/aspnet-core-ui/documentation/api/taghelpers/scheduler)

* [Client-Side API of the Scheduler](https://docs.telerik.com/kendo-ui/api/ui/scheduler)