Skip to content

Commit b5b965b

Browse files
kendo-botkendo-bot
committed
Sync with Kendo UI Professional
1 parent 66e29be commit b5b965b

File tree

28 files changed

+2145
-22
lines changed

28 files changed

+2145
-22
lines changed

‎docs-aspnet/_config.yml

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -635,6 +635,8 @@ navigation:
635635
title: "Sortable"
636636
"*splitter":
637637
title: "Splitter"
638+
"*dockmanager":
639+
title: "DockManager"
638640
"*stacklayout":
639641
title: "StackLayout"
640642
"*gridlayout":
@@ -695,13 +697,13 @@ navigation:
695697
baseurl: /aspnet-core
696698

697699
## The Kendo UI version used
698-
cdnVersion: "2023.2.829"
700+
cdnVersion: "2023.3.1010"
699701

700702
## The themes CDN used
701-
themesCdnVersion: "6.7.0"
703+
themesCdnVersion: "7.0.1"
702704

703705
## The MVC Core version used
704-
mvcCoreVersion: "2023.2.829"
706+
mvcCoreVersion: "2023.3.1010"
705707

706708
ff-sheet-id: 1mottKpkbJFxkUq6rS3CsPrT8JQOE2JlUtsJBR622cxs
707709

‎docs-aspnet/html-helpers/layout/dockmanager/dock-types.md

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
---
2+
title: Dock Types
3+
page_title: Dock Types
4+
description: "Learn the specifics of the Telerik UI DockManager component for {{ site.framework }} Dock Types."
5+
slug: dock_types_dockmanager_aspnetcore
6+
position: 1
7+
---
8+
9+
# Docking Panes
10+
11+
The Telerik UI for {{ site.framework }} DockManager component exposes the ability to dock panes globally or within other panes.
12+
13+
## Dock Types
14+
15+
The following dock types are supported:
16+
17+
- Global Docking
18+
- Inner Docking
19+
20+
### Global Docking
21+
22+
When the user drags a pane a global docking navigator is always shown. The user has the option to dock the dragged pane to one of the component's edges, thus the dragged pane will become one of the root panes.
23+
24+
### Inner Docking
25+
26+
When the user drags a pane and hovers over another pane a dock navigator for the pane is shown. The user can choose to drop a pane on any of the parent's outer edges splitting the parent pane, or dropping it in the middle of the navigator to as a tab of the parent pane.
27+
28+
## Control the Docking Behavior
29+
30+
You can explicitly configure the docking behavior for a desired pane by using the `Dockable()` configuration method. The following example illustrates how to alter the behavior of the docking panes.
31+
32+
```HtmlHelper
33+
@(Html.Kendo().DockManager()
34+
.Name("dockmanager")
35+
.RootPane(root =>
36+
{
37+
root.Id("root")
38+
.Type(RootPaneType.Split)
39+
.Orientation(DockSplitterOrientation.Vertical)
40+
.Panes(panes => {
41+
panes.Add().Type(PaneType.Split).Panes(top => {
42+
top.Add().Id("tools")
43+
.Type(PaneType.Content)
44+
.Title("Tools")
45+
.Dockable(dockable => dockable.InnerDock(false))
46+
.Content("Content");
47+
48+
top.Add().Id("files")
49+
.Type(PaneType.Tab)
50+
.Dockable(dockable => dockable.Dock(false))
51+
.Panes(tabs =>
52+
{
53+
tabs.Add().Id("file1").Type(PaneType.Content).Title("File 1").Content("File 1");
54+
tabs.Add().Id("file2").Type(PaneType.Content).Title("File 2").Content("File 2");
55+
tabs.Add().Id("file3").Type(PaneType.Content).Title("File 3").Unpinnable(u=>u.Unpinned(true)). Content("File 3");
56+
});
57+
});
58+
});
59+
})
60+
)
61+
```
62+
63+
{% if site.core %}
64+
```TagHelper
65+
<kendo-dockmanager name="dockmanager">
66+
<root-pane id="root" type="RootPaneType.Split" orientation="DockSplitterOrientation.Vertical">
67+
<panes>
68+
<pane id="nested" type="PaneType.Split">
69+
<dockable inner-dock="false" />
70+
<panes>
71+
<pane id="tools" type="PaneType.Content" title="Tools" content="Tools Content"></pane>
72+
<pane id="files" type="PaneType.Tab" title="Tools">
73+
<dockable dock="false" />
74+
<panes>
75+
<pane id="file1"
76+
type="PaneType.Content"
77+
title="File 1"
78+
content="File 1">
79+
</pane>
80+
<pane id="file2"
81+
type="PaneType.Content"
82+
title="File 2"
83+
content="File 2">
84+
</pane>
85+
<pane id="file3"
86+
type="PaneType.Content"
87+
title="File 3"
88+
content="File 3">
89+
</pane>
90+
</panes>
91+
</pane>
92+
</panes>
93+
</pane>
94+
</panes>
95+
</root-pane>
96+
</kendo-dockmanager>
97+
```
98+
{% endif %}
99+
100+
101+
## See Also
102+
103+
* [Server-Side API](/api/dockmanager)
104+
105+
106+
107+
108+
109+
110+
111+
112+

‎docs-aspnet/html-helpers/layout/dockmanager/events.md

Lines changed: 126 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
---
2+
title: Events
3+
page_title: Events
4+
description: "Learn how to handle the events of the Telerik UI DockManager component for {{ site.framework }}."
5+
slug: events_dockmanager_aspnetcore
6+
position: 3
7+
---
8+
9+
10+
# Events
11+
12+
The Telerik UI DockManager for {{ site.framework }} exposes multiple [events](/api/kendo.mvc.ui.fluent/dockmanagereventbuilder) that allow you to control and customize the behavior of the UI component.
13+
14+
For a complete example on basic DockManager events, refer to the [demo on using the events of the DockManager](https://demos.telerik.com/{{ site.platform }}/dockmanager/events).
15+
16+
17+
## Handling by Handler Name
18+
19+
The following example demonstrates how to subscribe to events by handler name.
20+
21+
22+
```HtmlHelper
23+
@(Html.Kendo().DockManager()
24+
.Name("dockmanager")
25+
.Events(events => events.Pin("onPin"))
26+
.RootPane(root =>
27+
{
28+
root.Id("root")
29+
.Panes(panes => {
30+
panes.Add().Type(PaneType.Split).Panes(top => {
31+
top.Add().Id("tools")
32+
.Type(PaneType.Content)
33+
.Title("Tools")
34+
.Content("Content");
35+
});
36+
});
37+
})
38+
)
39+
40+
<script>
41+
function onPin(e){
42+
// Handle the pin event.
43+
}
44+
</script>
45+
```
46+
47+
{% if site.core %}
48+
```TagHelper
49+
<kendo-dockmanager name="dockmanager" on-pin="onPin">
50+
<root-pane id="root" type="RootPaneType.Split">
51+
<panes>
52+
<pane id="nested" type="PaneType.Split">
53+
<panes>
54+
<pane id="tools" type="PaneType.Content" title="Tools" content="Tools Content"></pane>
55+
</panes>
56+
</pane>
57+
</panes>
58+
</root-pane>
59+
</kendo-dockmanager>
60+
61+
<script>
62+
function onPin(e){
63+
// Handle the pin event.
64+
}
65+
</script>
66+
```
67+
{% endif %}
68+
69+
70+
## Handling by Template Delegate
71+
72+
The following example demonstrates how to subscribe to events by using a template delegate.
73+
74+
75+
```HtmlHelper
76+
@(Html.Kendo().DockManager()
77+
.Name("dockmanager")
78+
.Events(events => events.Pin(@<text>
79+
function(e){
80+
// Handle the Pin event.
81+
}
82+
</text>)
83+
)
84+
.RootPane(root =>
85+
{
86+
root.Id("root")
87+
.Panes(panes => {
88+
panes.Add().Type(PaneType.Split).Panes(top => {
89+
top.Add().Id("tools")
90+
.Type(PaneType.Content)
91+
.Title("Tools")
92+
.Content("Content");
93+
});
94+
});
95+
})
96+
)
97+
```
98+
99+
{% if site.core %}
100+
```TagHelper
101+
<kendo-dockmanager name="dockmanager"
102+
on-pin="function(){
103+
// Handle the pin event.
104+
}">
105+
<root-pane id="root" type="RootPaneType.Split">
106+
<panes>
107+
<pane id="nested" type="PaneType.Split">
108+
<panes>
109+
<pane id="tools" type="PaneType.Content" title="Tools" content="Tools Content"></pane>
110+
</panes>
111+
</pane>
112+
</panes>
113+
</root-pane>
114+
</kendo-dockmanager>
115+
```
116+
{% endif %}
117+
118+
119+
## Next Steps
120+
121+
* [Using the DockManager Events (Demo)](https://demos.telerik.com/{{ site.platform }}/dockmanager/events)
122+
123+
124+
* [Using the API of the DockManager HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/dockmanager/api)
125+
* [DockManager Server-Side API](/api/dockmanager)
126+
* [DockManager Client-Side API](https://docs.telerik.com/kendo-ui/api/javascript/ui/dockmanager)

0 commit comments

Comments
 (0)