# Horizontal Grouping

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

When you enable the horizontal grouping of the Scheduler, the resources (such as rooms, attendees, equipment, and more) are displayed as columns across the top of the Scheduler. At the same time, the time slots remain 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 column, and the user can review all events associated with each resource side by side.

> The `Agenda` view always displays the grouped resources vertically.

To enable the horizontal resources grouping, 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. 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")) // "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>
            <resources>
                <group-resource name="Rooms"/> 
            </resources>
        </group>
        
    </kendo-scheduler>
```

## Next Steps

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

## See Also

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

* [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)