Skip to content

Commit 5cf95ae

Browse files
kendo-botkendo-bot
committed
Sync with Kendo UI Professional
1 parent 335c88b commit 5cf95ae

File tree

9 files changed

+488
-147
lines changed

9 files changed

+488
-147
lines changed

‎docs-aspnet/_config.yml‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -511,6 +511,9 @@ navigation:
511511
title: "Calendar"
512512
"html-helpers/scheduling/multiviewcalendar":
513513
title: "MultiViewCalendar"
514+
"html-helpers/scheduling/scheduler/grouping":
515+
title: "Grouping"
516+
position: 5
514517
"*badge":
515518
title: "Badge"
516519
"*checkbox":

‎docs-aspnet/html-helpers/scheduling/scheduler/grouping/date-grouping.md‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
---
2+
title: Date Grouping
3+
page_title: Date Grouping
4+
description: "Learn how to group the resources of the Telerik UI for {{ site.framework }} Scheduler by date."
5+
slug: scheduler_resources_grouping_date
6+
position: 6
7+
---
8+
9+
# Date Grouping
10+
11+
The date grouping feature allows you to group the resources of the Scheduler by date based on the selected view.
12+
13+
When you enable the date grouping of the Scheduler, the resources (such as rooms, attendees, equipment, and more) are displayed as columns and the dates are displayed as rows or columns based on the defined orientation ([vertical]({% slug scheduler_resources_grouping_vertical %}) or [horizontal]({% slug scheduler_resources_grouping_horizontal %})).
14+
15+
* Horizontal orientation—The dates or time slots are rendered above the resources as columns. The `Agenda` view always displays the dates vertically.
16+
* Vertical orientation—The dates or time slots are rendered as rows along the left side of the Scheduler.
17+
18+
To enable the date grouping of the resources, add the [`Group()`](/api/kendo.mvc.ui.fluent/schedulerbuilder#groupsystemaction) configuration, specify the names of the resources in the [`Resources()`](/api/kendo.mvc.ui.fluent/schedulergroupbuilder#resourcessystemstring) option, and set the [`Date(true)`](/api/kendo.mvc.ui.fluent/schedulergroupbuilder#datesystemboolean) option.
19+
20+
```HtmlHelper
21+
@(Html.Kendo().Scheduler<MeetingViewModel>()
22+
.Name("scheduler")
23+
.Resources(resource =>
24+
{
25+
resource.Add(m => m.RoomID)
26+
.Title("Room")
27+
.Name("Rooms")
28+
.DataTextField("Text")
29+
.DataValueField("Value")
30+
.DataColorField("Color")
31+
.BindTo(new[] {
32+
new { Text = "Meeting Room 101", Value = 1, Color = "#6eb3fa" },
33+
new { Text = "Meeting Room 201", Value = 2, Color = "#f58a8a" }
34+
});
35+
})
36+
.Group(group => { group.Resources("Rooms"); group.Date(true); }) // "Rooms" matches the "Name()" option of the defined resource within the "Resources()" configuration.
37+
...// Additional configuration.
38+
)
39+
```
40+
{% if site.core %}
41+
```TagHelper
42+
@addTagHelper *, Kendo.Mvc
43+
44+
@{
45+
var roomsData = new[]
46+
{
47+
new { Text = "Meeting Room 101", Value = 1, Color = "#6eb3fa" },
48+
new { Text = "Meeting Room 201", Value = 2, Color = "#f58a8a" }
49+
};
50+
}
51+
<kendo-scheduler name="scheduler">
52+
<resources>
53+
<resource name="Rooms" field="RoomID" title="Room" datatextfield="Text" datavaluefield="Value" datacolorfield="Color" bind-to="@roomsData">
54+
</resource>
55+
</resources>
56+
<group date="true">
57+
<resources>
58+
<group-resource name="Rooms" /> // "Rooms" matches the "name" attribute of the defined resource within the "resources" tag.
59+
</resources>
60+
</group>
61+
<!--Additional configuration-->
62+
</kendo-scheduler>
63+
```
64+
{% endif %}
65+
66+
By default, the resources will be grouped by date horizontally. To group the resources vertically, set the [`Orientation()`](/api/kendo.mvc.ui.fluent/schedulergroupbuilder#orientationkendomvcuischedulergrouporientation) option to `SchedulerGroupOrientation.Vertical`. The available options of the `SchedulerGroupOrientation` setting are `Default` (horizontal), `Horizontal`, and `Vertical`.
67+
68+
## See Also
69+
70+
* [Date Grouping by the Scheduler for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/scheduler/date-grouping)
71+
* [Server-Side API of the Scheduler HtmlHelper](/api/scheduler)
72+
{% if site.core %}
73+
* [Server-Side API of the Scheduler TagHelper](/api/taghelpers/scheduler)
74+
{% endif %}
75+
* [Client-Side API of the Scheduler](https://docs.telerik.com/kendo-ui/api/javascript/ui/scheduler)

‎docs-aspnet/html-helpers/scheduling/scheduler/grouping/hierarchical-grouping.md‎

Lines changed: 130 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
---
2+
title: Hierarchical Grouping
3+
page_title: Hierarchical Grouping
4+
description: "Learn how to enable the hierarchical grouping of the Telerik UI for {{ site.framework }} Scheduler resources."
5+
slug: scheduler_resources_grouping_hierarchical
6+
position: 5
7+
---
8+
9+
# Hierarchical Grouping
10+
11+
The hierarchical resource grouping feature allows you to group the resources of the Scheduler horizontally or vertically and display the resources in a parent-child structure.
12+
13+
When you enable the hierarchical grouping, the groups consist of parents and children, where each parent resource member can have a different child resource group. For example, if the Scheduler has **Rooms** as a parent resource, different **Attendees** can be assigned to each room. In this setup, the parent resources (such as rooms, attendees, equipment, and more) are displayed as rows or columns based on the defined orientation ([vertical]({% slug scheduler_resources_grouping_vertical %}) or [horizontal]({% slug scheduler_resources_grouping_horizontal %})), with child resources nested beneath them.
14+
15+
To configure the hierarchical grouping of the Scheduler's resources:
16+
17+
1. Add the desired resources in the [`Resources()`](/api/kendo.mvc.ui.fluent/schedulergroupbuilder#resourcessystemstring) configuration. The order of the resources must follow the parent-child relation. The last resource in the `Resources()` configuration must not be a parent.
18+
1. Use the [`DataParentValueField()`](/api/kendo.mvc.ui.fluent/schedulerresourcebuilder#dataparentvaluefieldsystemstring) option in the child resource to specify the name of the field that holds the parent value (the parent value equals the value of the field defined as `DataValueField` in the parent resource.)
19+
20+
```HtmlHelper
21+
@(Html.Kendo().Scheduler<MeetingViewModel>()
22+
.Name("scheduler")
23+
.Resources(resource =>
24+
{
25+
resource.Add(m => m.RoomID) // Parent resource.
26+
.Title("Room")
27+
.Name("Rooms")
28+
.DataTextField("Text")
29+
.DataValueField("Value")
30+
.DataColorField("Color")
31+
.BindTo(new[] {
32+
new { Text = "Meeting Room 101", Value = 1, Color = "#6eb3fa" },
33+
new { Text = "Meeting Room 201", Value = 2, Color = "#f58a8a" }
34+
});
35+
36+
resource.Add(m => m.Attendees) // Child resource.
37+
.Title("Attendees")
38+
.Name("Attendees")
39+
.Multiple(true)
40+
.DataTextField("Text")
41+
.DataValueField("Value")
42+
.DataColorField("Color")
43+
.DataParentValueField("Parent") // The "Parent" field in the "SchedulerResourceModel" Model holds the value of the "Value" field in the "Room" resource.
44+
.BindTo(new List<SchedulerResourceModel>() {
45+
new SchedulerResourceModel(){ Text = "Alex", Color="red", Value = 1},
46+
new SchedulerResourceModel(){ Text = "Bob", Color="green", Value = 2, Parent = 1 } ,
47+
new SchedulerResourceModel(){ Text = "Charlie",Color="yellow", Value = 3, Parent = 2 }
48+
});
49+
})
50+
...// Additional configuration.
51+
)
52+
```
53+
{% if site.core %}
54+
```TagHelper
55+
@addTagHelper *, Kendo.Mvc
56+
57+
@{
58+
var roomsData = new[]
59+
{
60+
new { Text = "Meeting Room 101", Value = 1, Color = "#6eb3fa" },
61+
new { Text = "Meeting Room 201", Value = 2, Color = "#f58a8a" }
62+
};
63+
64+
var attendeesData = new List<SchedulerResourceModel>() {
65+
new SchedulerResourceModel(){ Text = "Alex", Color="red", Value = 1},
66+
new SchedulerResourceModel(){ Text = "Bob", Color="green", Value = 2, Parent = 1 } ,
67+
new SchedulerResourceModel(){ Text = "Charlie",Color="yellow", Value = 3, Parent = 2 }
68+
};
69+
}
70+
<kendo-scheduler name="scheduler">
71+
<resources>
72+
<resource field="RoomID" title="Room" name="Rooms" datatextfield="Text" datavaluefield="Value" datacolorfield="Color" bind-to="@roomsData"> // Parent resource.
73+
</resource>
74+
<resource // Child resource.
75+
field="Attendees"
76+
title="Attendees"
77+
name="Attendees"
78+
multiple="true"
79+
datatextfield="Text"
80+
datavaluefield="Value"
81+
datacolorfield="Color"
82+
dataparentvaluefield="Parent" // The "Parent" field in the "SchedulerResourceModel" Model holds the value of the "Value" field in the "Room" resource.
83+
bind-to="@attendeesData">
84+
</resource>
85+
</resources>
86+
<!--Additional configuration-->
87+
</kendo-scheduler>
88+
```
89+
{% endif %}
90+
91+
> Only the last one of the resources can be configured to allow [multiple instance resources]({% slug htmlhelpers_scheduler_resources_aspnetcore %}#multiple-resource-types).
92+
93+
1. Add the [`Group()`](/api/kendo.mvc.ui.fluent/schedulerbuilder#groupsystemaction) configuration and specify the names of the resources in the `Resources()` option.
94+
1. To group the resources vertically, set the [`Orientation()`](/api/kendo.mvc.ui.fluent/schedulergroupbuilder#orientationkendomvcuischedulergrouporientation) option to `SchedulerGroupOrientation.Vertical`. The available options of the `SchedulerGroupOrientation` setting are `Default` (horizontal), `Horizontal`, and `Vertical`.
95+
96+
```HtmlHelper
97+
@(Html.Kendo().Scheduler<MeetingViewModel>()
98+
.Name("scheduler")
99+
.Group(group => group.Resources("Rooms", "Attendees").Orientation(SchedulerGroupOrientation.Vertical))
100+
...// Additional configuration.
101+
)
102+
```
103+
{% if site.core %}
104+
```TagHelper
105+
@addTagHelper *, Kendo.Mvc
106+
107+
<kendo-scheduler name="scheduler">
108+
<group orientation="vertical">
109+
<resources>
110+
<group-resource name="Rooms" />
111+
<group-resource name="Attendees" />
112+
</resources>
113+
</group>
114+
<!--Additional configuration-->
115+
</kendo-scheduler>
116+
```
117+
{% endif %}
118+
119+
## Next Steps
120+
121+
* [Implementing Date Grouping of the Scheduler Resources]({% slug scheduler_resources_grouping_date %})
122+
123+
## See Also
124+
125+
* [Hierarchical Grouping by the Scheduler for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/scheduler/resources-grouping-hierarchical)
126+
* [Server-Side API of the Scheduler HtmlHelper](/api/scheduler)
127+
{% if site.core %}
128+
* [Server-Side API of the Scheduler TagHelper](/api/taghelpers/scheduler)
129+
{% endif %}
130+
* [Client-Side API of the Scheduler](https://docs.telerik.com/kendo-ui/api/javascript/ui/scheduler)

‎docs-aspnet/html-helpers/scheduling/scheduler/grouping/horizontal-grouping.md‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
---
2+
title: Horizontal Grouping
3+
page_title: Horizontal Grouping
4+
description: "Learn how to group the resources of the Telerik UI for {{ site.framework }} Scheduler horizontally."
5+
slug: scheduler_resources_grouping_horizontal
6+
position: 2
7+
---
8+
9+
# Horizontal Grouping
10+
11+
The grouping feature allows you to group the resources of the Scheduler horizontally.
12+
13+
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.
14+
15+
> The `Agenda` view always displays the grouped resources vertically.
16+
17+
To enable the horizontal resources grouping, add the [`Group()`](/api/kendo.mvc.ui.fluent/schedulerbuilder#groupsystemaction) configuration and specify the names of the resources in the [`Resources()`](/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.
18+
19+
```HtmlHelper
20+
@(Html.Kendo().Scheduler<MeetingViewModel>()
21+
.Name("scheduler")
22+
.Resources(resource =>
23+
{
24+
resource.Add(m => m.RoomID)
25+
.Title("Room")
26+
.Name("Rooms")
27+
.DataTextField("Text")
28+
.DataValueField("Value")
29+
.DataColorField("Color")
30+
.BindTo(new[] {
31+
new { Text = "Meeting Room 101", Value = 1, Color = "#6eb3fa" },
32+
new { Text = "Meeting Room 201", Value = 2, Color = "#f58a8a" }
33+
});
34+
})
35+
.Group(group => group.Resources("Rooms")) // "Rooms" matches the "Name()" option of the defined resource within the "Resources()" configuration.
36+
...// Additional configuration.
37+
)
38+
```
39+
{% if site.core %}
40+
```TagHelper
41+
@addTagHelper *, Kendo.Mvc
42+
43+
@{
44+
var roomsData = new[]
45+
{
46+
new { Text = "Meeting Room 101", Value = 1, Color = "#6eb3fa" },
47+
new { Text = "Meeting Room 201", Value = 2, Color = "#f58a8a" }
48+
};
49+
}
50+
<kendo-scheduler name="scheduler">
51+
<resources>
52+
<resource name="Rooms" field="RoomID" title="Room" datatextfield="Text" datavaluefield="Value" datacolorfield="Color" bind-to="@roomsData">
53+
</resource>
54+
</resources>
55+
<group>
56+
<resources>
57+
<group-resource name="Rooms"/> // "Rooms" matches the "name" attribute of the defined resource within the "resources" tag.
58+
</resources>
59+
</group>
60+
<!--Additional configuration-->
61+
</kendo-scheduler>
62+
```
63+
{% endif %}
64+
65+
## Next Steps
66+
67+
* [Implementing Vertical Grouping of the Scheduler Resources]({% slug scheduler_resources_grouping_vertical %})
68+
69+
## See Also
70+
71+
* [Horizontal Grouping by the Scheduler for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/scheduler/resources-grouping-horizontal)
72+
* [Server-Side API of the Scheduler HtmlHelper](/api/scheduler)
73+
{% if site.core %}
74+
* [Server-Side API of the Scheduler TagHelper](/api/taghelpers/scheduler)
75+
{% endif %}
76+
* [Client-Side API of the Scheduler](https://docs.telerik.com/kendo-ui/api/javascript/ui/scheduler)

‎docs-aspnet/html-helpers/scheduling/scheduler/grouping/overview.md‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
---
2+
title: Overview
3+
page_title: Grouping Overview
4+
description: "Learn about the different types of grouping when the Telerik UI for {{ site.framework }} Scheduler is configured to use resources."
5+
slug: scheduler_resources_grouping_overview
6+
position: 1
7+
---
8+
9+
# Grouping Overview
10+
11+
The Scheduler provides a set of options for grouping the [predefined resources]({% slug htmlhelpers_scheduler_resources_aspnetcore %}).
12+
13+
{% if false == true %}
14+
{% include cta-panel-small.html %}
15+
{% endif %}
16+
17+
The available grouping options are:
18+
19+
* [Horizontal Grouping]({% slug scheduler_resources_grouping_horizontal %})&mdash;Use the horizontal grouping of the Scheduler to display the events associated with each resource side by side.
20+
* [Vertical Grouping]({% slug scheduler_resources_grouping_vertical %})&mdash;Group the resources vertically to display each resource on a separate row.
21+
* [Virtual Vertical Grouping]({% slug scheduler_resources_grouping_virtual_vertical %})&mdash;Enable the vertical virtualization feature to optimize the layout of the Scheduler.
22+
* [Hierarchical Grouping]({% slug scheduler_resources_grouping_hierarchical %})&mdash;Display the grouped resources in a parent-child structure.
23+
* [Date Grouping]({% slug scheduler_resources_grouping_date %})&mdash;Group the resources by date.
24+
25+
## See Also
26+
27+
* [Horizontal Grouping by the Scheduler for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/scheduler/resources-grouping-horizontal)
28+
* [Vertical Grouping by the Scheduler for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/scheduler/resources-grouping-vertical)
29+
* [Virtual Vertical Grouping by the Scheduler for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/scheduler/resources-grouping-vertical-virtual)
30+
* [Hierarchical Grouping by the Scheduler for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/scheduler/resources-grouping-hierarchical)
31+
* [Date Grouping by the Scheduler for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/scheduler/date-grouping)

0 commit comments

Comments
 (0)