Skip to content

Commit d1c1ae8

Browse files
kendo-botkendo-bot
committed
Sync with Kendo UI Professional
1 parent 7080d0e commit d1c1ae8

File tree

6 files changed

+243
-4
lines changed

6 files changed

+243
-4
lines changed

‎docs-aspnet/html-helpers/data-management/grid/row-resizing.md

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
---
2+
title: Row Resizing
3+
page_title: Row Resizing
4+
description: "Learn all about the Row Resizing feature of the Grid."
5+
slug: rowresize_kendoui_grid
6+
position: 14
7+
---
8+
9+
# Row Resizing
10+
11+
The Row Resizing functionality for the Grid enables you to resize one or more table rows.
12+
13+
For a runnable example, refer to the [demo on Row Resizing in the Grid](https://demos.telerik.com/{{ site.platform }}/grid/row-resizing).
14+
15+
## Getting Started
16+
17+
To enable the row resizing functionality set the `.Resizable()` configuration:
18+
19+
```HtmlHelper
20+
@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.OrderViewModel>()
21+
.Name("Grid")
22+
.Resizable(r => r.Rows(true))
23+
.Columns(columns =>
24+
{
25+
columns.Bound(p => p.ShipName).Title("Ship Name");
26+
})
27+
.DataSource(dataSource => dataSource
28+
.Ajax()
29+
.PageSize(10)
30+
.Read(read => read.Action("Orders_Read", "Grid"))
31+
)
32+
...
33+
)
34+
```
35+
{% if site.core %}
36+
```TagHelper
37+
<kendo-grid name="grid" height="550" selectable="multiple, row">
38+
<datasource type="DataSourceTagHelperType.Custom" custom-type="odata" page-size="20">
39+
<transport>
40+
<read url="https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders" />
41+
</transport>
42+
</datasource>
43+
<resizable rows="true"/>
44+
<pageable button-count="5" refresh="true" page-sizes="new int[] { 5, 10, 20 }"></pageable>
45+
<columns>
46+
<column field="ShipName" title="Ship Name"/>
47+
</columns>
48+
</kendo-grid>
49+
````
50+
{% endif %}
51+
52+
## Multiple Rows
53+
54+
The user can resize more than one row at the same time. To do so, set the `Selectable` configuration to enable multiple rows selection. Once the user has made multiple selections, they can drag the resize handle on one of the rows and the resize will affect the rest of the selected elements automatically.
55+
56+
```HtmlHelper
57+
@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.OrderViewModel>()
58+
.Name("Grid")
59+
.Selectable(selectable => selectable
60+
.Mode(GridSelectionMode.Multiple)
61+
.Type(GridSelectionType.Cell))
62+
.Resizable(r => r.Rows(true))
63+
.Columns(columns =>
64+
{
65+
columns.Bound(p => p.ShipName).Title("Ship Name");
66+
})
67+
.DataSource(dataSource => dataSource
68+
.Ajax()
69+
.PageSize(10)
70+
.Read(read => read.Action("Orders_Read", "Grid"))
71+
)
72+
...
73+
)
74+
```
75+
{% if site.core %}
76+
```TagHelper
77+
<kendo-grid name="grid" height="550" selectable="multiple, row">
78+
<datasource type="DataSourceTagHelperType.Custom" custom-type="odata" page-size="20">
79+
<transport>
80+
<read url="https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders" />
81+
</transport>
82+
</datasource>
83+
<resizable rows="true"/>
84+
<pageable button-count="5" refresh="true" page-sizes="new int[] { 5, 10, 20 }"></pageable>
85+
<columns>
86+
<column field="ShipName" title="Ship Name"/>
87+
</columns>
88+
</kendo-grid>
89+
````
90+
{% endif %}
91+
92+
## RowResize Event
93+
94+
The `RowResize` event fires when the user resizes one or more rows. You can subscribe to the event and use it to further customize the behavior of the Grid.
95+
96+
## See Also
97+
98+
* [Row Resizing in the {{ site.product }} Grid](https://demos.telerik.com/{{ site.platform }}/grid/row-resizing)
99+
* [Grid events]({{% slug grid_events %}})
100+
* [Server-side API](/api/grid)
101+
* [Client-side API of the Grid](/api/javascript/ui/grid)

‎docs-aspnet/html-helpers/editors/datetimepicker/start-end-time.md

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
---
2+
title: Start and End Time
3+
page_title: Start and End Time
4+
description: "Learn how to configure the start and end time of the Telerik UI DateTimePicker component for {{ site.framework }}."
5+
slug: htmlhelpers_datetimepicker_start_end_time_aspnetcore
6+
position: 15
7+
---
8+
9+
# Start and End Time
10+
11+
The DateTimePicker enables you to customize the start and end time of the built-in TimePicker.
12+
13+
To define the earliest and latest available time in the built-in TimePicker, use the `StartTime` and `EndTime` options.
14+
15+
> Only the time part of the provided `DateTime` object is taken into account.
16+
17+
```HtmlHelper
18+
@(Html.Kendo().DateTimePicker()
19+
.Name("datetimepicker")
20+
.StartTime(new DateTime(2023,3,3,8,30,00))
21+
.EndTime(new DateTime(2023,3,3,17,00,00))
22+
.Label(label => {
23+
label.Content("Remind me on");
24+
label.Floating(true);
25+
})
26+
.HtmlAttributes(new { style = "width: 100%", title = "datetimepicker" })
27+
)
28+
```
29+
{% if site.core %}
30+
```TagHelper
31+
<kendo-datetimepicker name="datetimepicker" title="datetimepicker" style="width:100%" start-time="new DateTime(2023,3,3,8,30,00)" end-time="new DateTime(2023,3,3,17,00,00)">
32+
<label content="Remind me on" floating="true" />
33+
</kendo-datetimepicker>
34+
```
35+
{% endif %}
36+
37+
## See Also
38+
39+
* [DateTimePicker Floating Label (Demo)](https://demos.telerik.com/{{ site.platform }}/datetimepicker/floating-label)
40+
* [Server-Side API](https://docs.telerik.com/{{ site.platform }}/api/datetimepicker)

‎docs-aspnet/html-helpers/scheduling/scheduler/ongoing-events.md

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
---
2+
title: Highlight Ongoing Events
3+
page_title: Highlight Ongoing Events
4+
description: "Get started with the Scheduler component for {{ site.framework }} and learn how to highlight ongoing events."
5+
slug: htmlhelpers_scheduler_ongoing_events_aspnetcore
6+
position: 7
7+
---
8+
9+
# Highlight Ongoing Events
10+
11+
To enable the functionality to highlight ongoing events use the `OngoingEvents` configuration option.
12+
13+
```HtmlHelper
14+
@(Html.Kendo().Scheduler<Kendo.Mvc.Examples.Models.Scheduler.TaskViewModel>()
15+
.Name("scheduler")
16+
.OngoingEvents(true)
17+
)
18+
```
19+
{% if site.core %}
20+
```TagHelper
21+
@addTagHelper *, Kendo.Mvc
22+
23+
<kendo-scheduler name="scheduler">
24+
<ongoing-events enabled="true" />
25+
</kendo-scheduler>
26+
```
27+
{% endif %}
28+
29+
## Highlight with No Timezone
30+
31+
The ongoing events highlight functionality depends on the timezone configuration of the Scheduler component. If no timezone is configured, the component will use the local (machine/client) timezone to render its data.
32+
33+
For example, consider an event that starts at 10:00 UTC and ends at 11:00 UTC. If the user is in Europe/Sofia in summer time, the user's local timezone is `UTC +3`. Thus the event is rendered from 13:00 to 14:00 in the Scheduler component. The event is highlighted as an ongoing event if the current time on the client is between 13:00 and 14:00 (Europe/Sofia, UTC +3).
34+
35+
## Highlight with Timezone
36+
37+
If a [timezone](/api/kendo.mvc.ui.fluent/schedulerbuilder#timezonesystemstring) is specified, the Scheduler component takes the timezone configuration into account and will adjust the ongoing events highlight accordingly.
38+
39+
Consider an event that starts at 10:00 UTC and ends at 11:00 UTC. The Scheduler component has its timezone configuration set to `UTC/Etc` and the user is located in Europe/Sofia in summer time `UTC +3`. The Scheduler component will render the event from 10:00 to 11:00 (taking into account the timezone set on the component). The event will be highlighted if the current time on the client is from 10:00 to 11:00 (Europe/Sofia, UTC +3). By default, the functionality will use the local (machine/client) timezone to determine which event is highlighted.
40+
41+
The behavior can be configured via the `OngoingEvents.UseLocalTimezone` configuration option. Setting it to `false` the event will be highlighted if the current time on the client is from 13:00 to 14:00 (Europe/Sofia, UTC +3).
42+
43+
```HtmlHelper
44+
@(Html.Kendo().Scheduler<Kendo.Mvc.Examples.Models.Scheduler.TaskViewModel>()
45+
.Name("scheduler")
46+
.OngoingEvents(oe=>oe.UseLocalTimezone(false))
47+
)
48+
```
49+
{% if site.core %}
50+
```TagHelper
51+
@addTagHelper *, Kendo.Mvc
52+
53+
<kendo-scheduler name="scheduler">
54+
<ongoing-events use-local-timezone="false" />
55+
</kendo-scheduler>
56+
```
57+
{% endif %}
58+
59+
## Relation to the CurrentTimeMarker
60+
61+
The `CurrentTimeMarker` configuration of the Scheduler also exposes a `UseLocalTimezone` configuration option. To keep the functionality of highlighting ongoing events and the current time marker in sync, always set their `UseLocalTimezone` options to the same value. By default, the `UseLocalTimezone` configuration is enabled for both configuration options. If disabling this is desired do so for both configuration options. Otherwise the Scheduler may highlight events that do not coincide with the `CurrentTimeMarker` line.
62+
63+
## See Also
64+
65+
* [Highlight Ongoing Events of the Scheduler HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/scheduler/ongoing-events)
66+
* [Server-Side API](/api/scheduler)
67+
* [JavaScript API Reference of the Scheduler](/api/javascript/ui/scheduler)

‎docs-aspnet/html-helpers/scheduling/scheduler/server-filtering.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
title: Server Filtering
3-
page_title: Server f=Filtering
3+
page_title: Server Filtering
44
description: "Get started with the Scheduler component for {{ site.framework }} and learn how to configure the component to work with server-side filtering."
55
slug: htmlhelpers_scheduler_server_filtering_aspnetcore
66
position: 7

‎docs/api/javascript/ui/grid.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8656,7 +8656,7 @@ If set to `true` the user could reorder the rows by dragging them. By default re
86568656
});
86578657
</script>
86588658

8659-
### resizable `Boolean|Object` *(default:false)*
8659+
### resizable `Object|Boolean` *(default:false)*
86608660

86618661
If object is used, it allows configuration of `resizable.columns` and `resizable.rows`. If set to `true`, only column resizing will be enabled.
86628662

@@ -8682,7 +8682,7 @@ By default, column and row resizing is disabled.
86828682
> Check [Column resizing](https://demos.telerik.com/kendo-ui/grid/column-resizing) for a live demo and
86838683
the [Column widths](/web/grid/appearance#column-widths) help section for additional relevant information.
86848684

8685-
#### resizable.columns `Boolean`
8685+
### resizable.columns `Boolean` *(default:false)*
86868686

86878687
If set to `true`, users can resize columns by dragging the edges (resize handles) of their header cells. As of Kendo UI Q1 2015, users can also auto-fit a column by double-clicking its resize handle. In this case the column will assume the smallest possible width, which allows the column content to fit without wrapping.
86888688

@@ -8710,7 +8710,7 @@ By default, column resizing is disabled.
87108710
> Check [Column resizing](https://demos.telerik.com/kendo-ui/grid/column-resizing) for a live demo and
87118711
the [Column widths](/web/grid/appearance#column-widths) help section for additional relevant information.
87128712

8713-
#### resizable.rows `Boolean`
8713+
### resizable.rows `Boolean` *(default:false)*
87148714

87158715
If set to `true`, users can resize Grid rows by dragging their bottom edge. Users can also auto-fit a row by double-clicking its bottom edge. In this case the row will assume the smallest possible height, which allows the cells content to be fully displayed.
87168716

‎docs/controls/datetimepicker/start-end-time.md

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
---
2+
title: Start and End Time
3+
page_title: jQuery DateTimePicker Documentation - Start and End Time
4+
description: "Learn how to set the Start and End Time for the Kendo UI for jQuery DateTimePicker component."
5+
slug: start_end_time_kendoui_datetimepicker_widget
6+
position: 11
7+
---
8+
9+
# Start and End Time
10+
11+
The DateTimePicker enables you to set the start and end time of the built-in TimePicker.
12+
13+
To define the desired earliest and latest available time in the built-in TimePicker, use the `startTime` and `endTime` options.
14+
15+
>Only the time part of the provided Date object is taken into account.
16+
17+
```dojo
18+
<input id="datetimepicker" />
19+
20+
<script>
21+
$("#datetimepicker").kendoDateTimePicker({
22+
startTime: new Date(2023,1,3,8,30,0)
23+
endTime: new Date(2023,1,3,17,00,0)
24+
});
25+
</script>
26+
```
27+
28+
## See Also
29+
30+
* [JavaScript API Reference of the DateTimePicker](/api/javascript/ui/datetimepicker)
31+
* [Demo Page for the jQuery DateTimePicker](https://demos.telerik.com/kendo-ui/datetimepicker/index)

0 commit comments

Comments
 (0)