Sync with Kendo UI Professional

telerik · Oct 10, 2023 · b5b965b · b5b965b
1 parent 66e29be
commit b5b965b
Show file tree

Hide file tree

Showing 28 changed files with 2,145 additions and 22 deletions.
diff --git a/docs-aspnet/_config.yml b/docs-aspnet/_config.yml
@@ -635,6 +635,8 @@ navigation:
         title: "Sortable"
      "*splitter":
         title: "Splitter"
+     "*dockmanager":
+        title: "DockManager"
      "*stacklayout":
         title: "StackLayout"
      "*gridlayout":
@@ -695,13 +697,13 @@ navigation:
 baseurl: /aspnet-core
 
 ## The Kendo UI version used
-cdnVersion: "2023.2.829"
+cdnVersion: "2023.3.1010"
 
 ## The themes CDN used
-themesCdnVersion: "6.7.0"
+themesCdnVersion: "7.0.1"
 
 ## The MVC Core version used
-mvcCoreVersion: "2023.2.829"
+mvcCoreVersion: "2023.3.1010"
 
 ff-sheet-id: 1mottKpkbJFxkUq6rS3CsPrT8JQOE2JlUtsJBR622cxs
 

diff --git a/docs-aspnet/html-helpers/layout/dockmanager/dock-types.md b/docs-aspnet/html-helpers/layout/dockmanager/dock-types.md
@@ -0,0 +1,112 @@
+---
+title: Dock Types
+page_title: Dock Types
+description: "Learn the specifics of the Telerik UI DockManager component for {{ site.framework }} Dock Types."
+slug: dock_types_dockmanager_aspnetcore
+position: 1
+---
+
+# Docking Panes
+
+The Telerik UI for {{ site.framework }} DockManager component exposes the ability to dock panes globally or within other panes.  
+
+## Dock Types
+
+The following dock types are supported:
+
+- Global Docking
+- Inner Docking
+
+### Global Docking
+
+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.
+
+### Inner Docking
+
+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.
+
+## Control the Docking Behavior
+
+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.
+
+```HtmlHelper
+    @(Html.Kendo().DockManager()
+        .Name("dockmanager")
+        .RootPane(root =>
+        {
+            root.Id("root")
+            .Type(RootPaneType.Split)
+            .Orientation(DockSplitterOrientation.Vertical)
+            .Panes(panes  => {
+                panes.Add().Type(PaneType.Split).Panes(top => {
+                    top.Add().Id("tools")
+                       .Type(PaneType.Content)
+                       .Title("Tools")
+                       .Dockable(dockable => dockable.InnerDock(false))
+                       .Content("Content");
+
+                    top.Add().Id("files")
+                        .Type(PaneType.Tab)
+                        .Dockable(dockable => dockable.Dock(false))
+                        .Panes(tabs =>
+                        {
+                            tabs.Add().Id("file1").Type(PaneType.Content).Title("File 1").Content("File 1");
+                            tabs.Add().Id("file2").Type(PaneType.Content).Title("File 2").Content("File 2");
+                            tabs.Add().Id("file3").Type(PaneType.Content).Title("File 3").Unpinnable(u=>u.Unpinned(true)).  Content("File 3");
+                        });
+                });
+            });
+        })
+    )
+```
+
+{% if site.core %}
+```TagHelper
+    <kendo-dockmanager name="dockmanager">
+    <root-pane id="root" type="RootPaneType.Split" orientation="DockSplitterOrientation.Vertical">
+        <panes>
+            <pane id="nested" type="PaneType.Split">
+                <dockable inner-dock="false" />
+                <panes>
+                    <pane id="tools" type="PaneType.Content" title="Tools" content="Tools Content"></pane>
+                    <pane id="files" type="PaneType.Tab" title="Tools">
+                        <dockable dock="false" />
+                        <panes>
+                            <pane id="file1" 
+                                  type="PaneType.Content" 
+                                  title="File 1"
+                                  content="File 1">
+                            </pane>
+                            <pane id="file2" 
+                                  type="PaneType.Content" 
+                                  title="File 2"
+                                  content="File 2">
+                            </pane>
+                            <pane id="file3"
+                                  type="PaneType.Content"
+                                  title="File 3"
+                                  content="File 3">
+                            </pane>
+                        </panes>
+                    </pane>
+                </panes>
+            </pane>
+        </panes>
+    </root-pane>
+  </kendo-dockmanager>
+```
+{% endif %}
+
+
+## See Also
+
+* [Server-Side API](/api/dockmanager)
+
+
+
+
+
+
+
+
+
diff --git a/docs-aspnet/html-helpers/layout/dockmanager/events.md b/docs-aspnet/html-helpers/layout/dockmanager/events.md
@@ -0,0 +1,126 @@
+---
+title: Events
+page_title: Events
+description: "Learn how to handle the events of the Telerik UI DockManager component for {{ site.framework }}."
+slug: events_dockmanager_aspnetcore
+position: 3
+---
+
+
+# Events
+
+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.
+
+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).
+
+
+## Handling by Handler Name
+
+The following example demonstrates how to subscribe to events by handler name.
+
+
+```HtmlHelper
+    @(Html.Kendo().DockManager()
+        .Name("dockmanager")
+        .Events(events => events.Pin("onPin"))
+        .RootPane(root =>
+        {
+            root.Id("root")
+            .Panes(panes  => {
+                panes.Add().Type(PaneType.Split).Panes(top => {
+                     top.Add().Id("tools")
+                        .Type(PaneType.Content)
+                        .Title("Tools")
+                        .Content("Content");
+                });
+            });
+        })
+    )
+
+    <script>
+        function onPin(e){
+             // Handle the pin event.
+        }
+    </script>
+```
+
+{% if site.core %}
+```TagHelper
+    <kendo-dockmanager name="dockmanager" on-pin="onPin">
+      <root-pane id="root" type="RootPaneType.Split">
+          <panes>
+              <pane id="nested" type="PaneType.Split">
+                  <panes>
+                      <pane id="tools" type="PaneType.Content" title="Tools" content="Tools Content"></pane>
+                  </panes>
+              </pane>
+          </panes>
+      </root-pane>
+    </kendo-dockmanager>
+
+     <script>
+        function onPin(e){
+             // Handle the pin event.
+        }
+    </script>
+```
+{% endif %}
+
+
+## Handling by Template Delegate
+
+The following example demonstrates how to subscribe to events by using a template delegate.
+
+
+```HtmlHelper
+    @(Html.Kendo().DockManager()
+        .Name("dockmanager")
+        .Events(events => events.Pin(@<text>
+                            function(e){
+                                // Handle the Pin event.
+                            }
+                        </text>)
+        )
+        .RootPane(root =>
+        {
+            root.Id("root")
+            .Panes(panes  => {
+                panes.Add().Type(PaneType.Split).Panes(top => {
+                     top.Add().Id("tools")
+                        .Type(PaneType.Content)
+                        .Title("Tools")
+                        .Content("Content");
+                });
+            });
+        })
+    )
+```
+
+{% if site.core %}
+```TagHelper
+    <kendo-dockmanager name="dockmanager" 
+                       on-pin="function(){
+                            // Handle the pin event.
+                       }">
+      <root-pane id="root" type="RootPaneType.Split">
+          <panes>
+              <pane id="nested" type="PaneType.Split">
+                  <panes>
+                      <pane id="tools" type="PaneType.Content" title="Tools" content="Tools Content"></pane>
+                  </panes>
+              </pane>
+          </panes>
+      </root-pane>
+    </kendo-dockmanager>
+```
+{% endif %}
+
+
+## Next Steps
+
+* [Using the DockManager Events (Demo)](https://demos.telerik.com/{{ site.platform }}/dockmanager/events)
+
+
+* [Using the API of the DockManager HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/dockmanager/api)
+* [DockManager Server-Side API](/api/dockmanager)
+* [DockManager Client-Side API](https://docs.telerik.com/kendo-ui/api/javascript/ui/dockmanager)