From b5b965bbdb3fb6200a04e96592cac73e9d73d68a Mon Sep 17 00:00:00 2001 From: kendo-bot Date: Tue, 10 Oct 2023 04:18:44 +0000 Subject: [PATCH] Sync with Kendo UI Professional --- docs-aspnet/_config.yml | 8 +- .../layout/dockmanager/dock-types.md | 112 ++ .../html-helpers/layout/dockmanager/events.md | 126 ++ .../layout/dockmanager/overview.md | 190 +++ .../layout/dockmanager/pane-types.md | 83 ++ .../sass-themes/compatibility.md | 1 + docs/_config.yml | 8 +- docs/api/javascript/ui/dockmanager.md | 1305 +++++++++++++++++ docs/controls/PDFViewer/overview.md | 2 +- docs/controls/buttongroup/overview.md | 2 +- docs/controls/captcha/overview.md | 2 +- docs/controls/daterangepicker/overview.md | 2 +- docs/controls/dockmanager/dock-types.md | 98 ++ docs/controls/dockmanager/overview.md | 109 ++ docs/controls/dockmanager/pane-types.md | 94 ++ docs/controls/draganddrop/overview.md | 2 +- docs/controls/dropdowntree/overview.md | 2 +- docs/controls/listbox/overview.md | 2 +- docs/controls/multiviewcalendar/overview.md | 2 +- docs/controls/pager/overview.md | 2 +- docs/controls/popover/overview.md | 2 +- docs/controls/popup/overview.md | 2 +- docs/controls/rating/overview.md | 2 +- docs/controls/scheduler/overview.md | 2 +- docs/controls/tilelayout/overview.md | 2 +- docs/controls/timepicker/overview.md | 2 +- .../sass-themes/compatibility.md | 1 + typescript/kendo.all.d.ts | 2 +- 28 files changed, 2145 insertions(+), 22 deletions(-) create mode 100644 docs-aspnet/html-helpers/layout/dockmanager/dock-types.md create mode 100644 docs-aspnet/html-helpers/layout/dockmanager/events.md create mode 100644 docs-aspnet/html-helpers/layout/dockmanager/overview.md create mode 100644 docs-aspnet/html-helpers/layout/dockmanager/pane-types.md create mode 100644 docs/api/javascript/ui/dockmanager.md create mode 100644 docs/controls/dockmanager/dock-types.md create mode 100644 docs/controls/dockmanager/overview.md create mode 100644 docs/controls/dockmanager/pane-types.md diff --git a/docs-aspnet/_config.yml b/docs-aspnet/_config.yml index 0842baaf498..3076524ca6c 100644 --- 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 new file mode 100644 index 00000000000..0f3b9a67250 --- /dev/null +++ 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 + + + + + + + + + + + + + + + + + + + + + + + +``` +{% 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 new file mode 100644 index 00000000000..f06ce0f500d --- /dev/null +++ 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"); + }); + }); + }) + ) + + +``` + +{% if site.core %} +```TagHelper + + + + + + + + + + + + + +``` +{% 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(@ + function(e){ + // Handle the Pin event. + } + ) + ) + .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 + + + + + + + + + + + +``` +{% 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) diff --git a/docs-aspnet/html-helpers/layout/dockmanager/overview.md b/docs-aspnet/html-helpers/layout/dockmanager/overview.md new file mode 100644 index 00000000000..fbe3cb44c12 --- /dev/null +++ b/docs-aspnet/html-helpers/layout/dockmanager/overview.md @@ -0,0 +1,190 @@ +--- +title: Overview +page_title: Overview +description: "Learn the basics when working with the Telerik UI DockManager component for {{ site.framework }}." +slug: overview_dockmanagerhelper_aspnetcore +position: 0 +--- + +# {{ site.framework }} DockManager Overview + +{% if site.core %} +The Telerik UI DockManager TagHelper and HtmlHelper for {{ site.framework }} are server-side wrappers for the Kendo UI DockManager widget. +{% else %} +The Telerik UI DockManager HtmlHelper for {{ site.framework }} is a server-side wrapper for the Kendo UI DockManager widget. +{% endif %} + +The DockManager is a UI component that replicates the docks, along with their behaviors. It gives you the ability to have full control over the layout of your application through panes. This allows end users to alter the existing layout by pinning, resizing and moving panes. + +* [Demo page for the DockManager HtmlHelper](https://demos.telerik.com/{{ site.platform }}/dockmanager/index) + +## Initializing the DockManager + +The following example demonstrates how to define the DockManager. + +```HtmlHelper + @(Html.Kendo().DockManager() + .Name("dockmanager") + .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 + + + + + + + + + + + +``` +{% endif %} + +## Basic Configuration + +The DockManager provides a variety of options for configuring the pane hierarchy. The following example shows how to configure the panes. + +> It is mandatory to define a root pane that will contain all other 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).Size("80%").Orientation(DockSplitterOrientation.Horizontal).Panes(top => { + top.Add().Id("tools").Type(PaneType.Content).Title("Tools").Content("Content").Size("20%"); + top.Add().Id("files").Type(PaneType.Tab).Size("40%").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 + @addTagHelper *, Kendo.Mvc + + + + + + + + + + + + + + + + + + + + + + +``` +{% endif %} + +## Using a Template + +You can set the DockManager pane content through the `Content()`, `ContentHandler()` and `ContentTemplate()` methods. The `ContentTemplate()` method allos you to use the [`Template` component]({% slug htmlhelpers_overview_template %}) to define the content of the pane. + +```HtmlHelper + @(Html.Kendo().DockManager() + .Name("dockmanager") + .RootPane(root => + { + root.Id("root") + .Type(RootPaneType.Split) + .Orientation(DockSplitterOrientation.Vertical) + .Panes(panes => { + panes.Add().Type(PaneType.Split).Size("80%").Orientation(DockSplitterOrientation. Horizontal).Panes(top => { + top.Add().Id("tools") + .Type(PaneType.Content) + .Title("Tools") + .ContentTemplate(Html.Kendo().Template() + .AddHtml("
Some Content") + .AddComponent(btn => btn.Button().Name("toolBtn").Content("Tools")) + .AddHtml("
") + ) + .Size("20%"); + }); + }); + }) + ) +``` +{% if site.core %} +```TagHelper + + + + + + + +
+ + Tools + +
+ + + + + + + +``` +{% endif %} + +## Functionality and Features + +* [Docking Panes]({% slug dock_types_dockmanager_aspnetcore %})—You can dock panes globally or within other inner panes. +* [Pane Types]({% slug pane_types_dockmanager_aspnetcore %})—Use different pane types depending on the hierarchical structure you want to achieve. +* [Events](% slug events_dockmanager_aspnetcore%)—You can explicitly handle a variety of event in order to manipulate the component. + +## Next Steps + +* [Basic Usage of the DockManager HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/dockmanager/index) + +## See Also + +* [Using the API of the DockManager HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/dockmanager/api) +* [Server-Side API](/api/dockmanager) +* [Knowledge Base Section](/knowledge-base) diff --git a/docs-aspnet/html-helpers/layout/dockmanager/pane-types.md b/docs-aspnet/html-helpers/layout/dockmanager/pane-types.md new file mode 100644 index 00000000000..b04ddb254bf --- /dev/null +++ b/docs-aspnet/html-helpers/layout/dockmanager/pane-types.md @@ -0,0 +1,83 @@ +--- +title: Pane Types +page_title: Pane Types +description: "Learn how to configure different pane types for the Telerik UI DockManager component for {{ site.framework }}" +slug: pane_types_dockmanager_aspnetcore +position: 1 +--- + +## Pane Types + +The Telerik UI for {{ site.framework }} DockManager component exposes the ability to configure different pane types. The following types are as follows. + +* `Tab`—panes of tab type will group panes in a tab strip way, similar to the `TabStrip` component, users can navigate through panes via tabs in the header. +* `Split`— with split panes, you are able to group panes in a Splitter fashion, by splitting the container pane either `horizontally` or `vertically`. +* `Content`— with content panes, you have full control on explicitly specifying arbitrary content that will be rendered for a given pane as per your requirements. + +> The root pane can either be of type `Split` or `Tab`. + +The following example illustrates configure the pane types. + +```HtmlHelper + @(Html.Kendo().DockManager() + .Name("dockmanager") + .RootPane(root => + { + root.Id("root") + .Type(RootPaneType.Split) + .Orientation(DockSplitterOrientation.Vertical) + .Panes(panes => { + panes.Add().Type(PaneType.Split).Size("80%").Orientation(DockSplitterOrientation.Horizontal).Panes(top => { + top.Add().Id("tools").Type(PaneType.Content).Title("Tools").Content("Content").Size("20%"); + top.Add().Id("files").Type(PaneType.Tab).Size("40%").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 + @addTagHelper *, Kendo.Mvc + + + + + + + + + + + + + + + + + + + + + + +``` +{% endif %} + + +## See Also + +* [Server-Side API](/api/dockmanager) diff --git a/docs-aspnet/styles-and-layout/sass-themes/compatibility.md b/docs-aspnet/styles-and-layout/sass-themes/compatibility.md index 6ac6b326fca..e67c0ecdc30 100644 --- a/docs-aspnet/styles-and-layout/sass-themes/compatibility.md +++ b/docs-aspnet/styles-and-layout/sass-themes/compatibility.md @@ -12,6 +12,7 @@ The following table lists the Telerik UI for {{ site.framework }} themes and the | Telerik UI for {{ site.framework }} | Kendo UI Sass Themes | |:--- |:--- | +| Telerik UI 2023.3.1010 (R3 2023) | @progress/kendo-theme-bootstrap@7.0.1
@progress/kendo-theme-classic@7.0.1
@progress/kendo-theme-default@7.0.1
@progress/kendo-theme-fluent@7.0.1
@progress/kendo-theme-material@7.0.1 | | Telerik UI 2023.2.829 (R2 2023 SP2) | @progress/kendo-theme-bootstrap@6.7.0
@progress/kendo-theme-classic@6.7.0
@progress/kendo-theme-default@6.7.0
@progress/kendo-theme-fluent@6.7.0
@progress/kendo-theme-material@6.7.0 | | Telerik UI 2023.2.718 (R2 2023 SP1) | @progress/kendo-theme-bootstrap@6.6.0
@progress/kendo-theme-classic@6.6.0
@progress/kendo-theme-default@6.6.0
@progress/kendo-theme-fluent@6.6.0
@progress/kendo-theme-material@6.6.0 | | Telerik UI 2023.2.606 (R2 2023) | @progress/kendo-theme-bootstrap@6.4.0
@progress/kendo-theme-classic@6.4.0
@progress/kendo-theme-default@6.4.0
@progress/kendo-theme-fluent@6.4.0
@progress/kendo-theme-material@6.4.0 | diff --git a/docs/_config.yml b/docs/_config.yml index d7d6e7fce1c..c3cf21eb3e3 100644 --- a/docs/_config.yml +++ b/docs/_config.yml @@ -643,6 +643,8 @@ navigation: title: "Sortable" "*splitter": title: "Splitter" + "*dockmanager": + title: "DockManager" "*tabstrip": title: "TabStrip" "*taskboard": @@ -699,13 +701,13 @@ navigation: baseurl: /kendo-ui ## 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" ## Progress NPM Registry registry_url: 'https://registry.npm.telerik.com/' diff --git a/docs/api/javascript/ui/dockmanager.md b/docs/api/javascript/ui/dockmanager.md new file mode 100644 index 00000000000..f3c10cb4c12 --- /dev/null +++ b/docs/api/javascript/ui/dockmanager.md @@ -0,0 +1,1305 @@ +--- +title: DockManager +page_title: Configuration, methods and events of Kendo UI DockManager +description: Configuration options, methods and events for the Kendo UI DockManager widget. +res_type: api +component: dockmanager +--- + +# kendo.ui.DockManager + +Represents the Kendo UI TaskBoard. Inherits from [Widget](/api/javascript/ui/widget). + +## Configuration + +### rootPane `Object` + +Defines the root pane configuration. + +#### Example +
+
+
+ + +### rootPane.id `String` + +Defines the id of the root pane + +#### Example +
+
+
+ + +### rootPane.orientation `String` *(default: "horizontal")* + +Defines the orientation of the split pane. Available options are `horizontal` or `vertical`. + +#### Example +
+
+
+ + +### rootPane.panes `Array` + +An array of pane definitions. + +### rootPane.panes.closeable `Boolean` *(default: true)* + +Specifies if the pane can be closed. Available only for panes of type `content`. + +#### Example +
+
+
+ + +### rootPane.panes.content `String|Function` + +The content of the pane. Available only for panes of type `content`. + +#### Example +
+
+
+ + +### rootPane.panes.dockable `Object|Boolean` *(default: true)* + +Specifies if the pane can be docked and allow inner docking of other panes. Accepts boolean or object. Available only for panes of type `content`. + +#### Example +
+
+
+ + +### rootPane.panes.dockable.dock `Boolean` *(default: true)* + +Specifies if the pane is docked. Available only for panes of type `content`. + +### rootPane.panes.dockable.innerDock `Boolean` *(default: true)* + +Specifies if the pane allows inner docks. Available only for panes of type `content`. + +#### Example +
+
+
+ + +### rootPane.panes.header `String|Function` + +Sets the content of the header. Accepts a string or a kendo template. By default, the same content is displayed in the tab when the pane is unpinned or within a pane of type `tab`. If not specified the title is displayed. Available only for panes of type `content`. + +#### Example +
+
+
+ + +### rootPane.panes.id `String` + +Defines the id of the pane + +#### Example +
+
+
+ + +### rootPane.panes.orientation `String` *(default: "horizontal")* + +Specifies the orientation of a split pane. Supported values are "horizontal" and "vertical". + +#### Example +
+
+
+ + +### rootPane.panes.panes `Array` + +Specifies an array of pane definitions. + +### rootPane.panes.selected `Number` + +Specifies the index of the initially selected tab. Available only for panes of type `tab`. + +#### Example +
+
+
+ + +### rootPane.panes.size `String` + +Specifies the size of a pane defined as pixels (i.e. "200px") or as a percentage (i.e. "50%"). + +#### Example +
+
+
+ + + +### rootPane.panes.tabHeader `String|Function` + +Sets the content of the tab when the pane is unpinned or within a `tab` pane. If not specified, `header` content is used. Available only for panes of type `content`. + +#### Example +
+
+
+ + +### rootPane.panes.title `String` + +Sets the title of the pane. Available only for panes of type `content`. + +#### Example +
+
+
+ + + +### rootPane.panes.type `String` + +Specifies the type of the pane. Available options are `tab`, `split` or `content`. + +#### Example +
+
+
+ + +### rootPane.panes.unpinnable `Object|Boolean` *(default: true)* + +Specifies if the pane can be pinned/unpinnned. Available only for panes of type `content`. + +### rootPane.panes.unpinnable.unpinned `Boolean` *(default: true)* + +Specifies if the pane is unpinned. Available only for panes of type `content`. + +#### Example +
+
+
+ + +### rootPane.panes.unpinnable.unpinnedSize `String` + +The size of the pane when unpinned. If not specified the pinned size is used. Available only for panes of type `content`. + +#### Example +
+
+
+ + +### rootPane.panes.visible `Boolean` *(default: true)* + +Specifies if the pane is initially visible. + +#### Example +
+
+
+ + +### rootPane.type `String` *(default: "split")* + +Defines the id of the root pane. Available options are `tab` or `split`. + +#### Example +
+
+
+ + +## Methods + +### togglePane + +Toggles the visibility of a pane. + +#### Example +
+
+
+ + +#### Parameters + +##### id `String` + +The `id` assigned as a configuration option of the pane. + +### refresh + +Renders all panes with the current `panes` configuration. + +#### Example +
+
+
+ + +### removePane + +Toggles the visibility of a pane + +#### Parameters + +##### id `String` + +The `id` assigned as a configuration option of the pane. + +#### Example +
+
+
+ + +## Events + +### close + +Triggered when the pane is closed. + +#### Example - subscribing to the close event during initialization + +
+
+
+ + +#### Example - subscribing to the close event after initialization + +
+
+
+ + +### dock + +Triggered when a pane is docked. + +#### Example - subscribing to the dock event during initialization + +
+
+
+ + +#### Example - subscribing to the dock event after initialization + +
+
+
+ + +### drag + +Triggered when a pane is dragged. + +#### Example - subscribing to the drag event during initialization + +
+
+
+ + +#### Example - subscribing to the drag event after initialization + +
+
+
+ + +### dragEnd + +#### Example - subscribing to the dragEnd event during initialization + +
+
+
+ + +#### Example - subscribing to the dragEnd event after initialization + +
+
+
+ + +### dragStart + +Triggered when item drag starts. + +#### Example - subscribing to the dragStart event during initialization + +
+
+
+ + +#### Example - subscribing to the dragStart event after initialization + +
+
+
+ + +### innerDock + +Triggered when a pane is docked in the current pane. + +#### Example - subscribing to the innerDock event during initialization + +
+
+
+ + +#### Example - subscribing to the innerDock event after initialization + +
+
+
+ + +### pin + +Triggered when a pane is pinned. + +#### Example - subscribing to the pin event during initialization + +
+
+
+ + +#### Example - subscribing to the pin event after initialization + +
+
+
+ + +### resize + +Triggered when a pane is resized. + +#### Example - subscribing to the resize event during initialization + +
+
+
+ + +#### Example - subscribing to the resize event after initialization + +
+
+
+ + +### unpin + +Triggered when a pane is unpinned. + +#### Example - subscribing to the unpin event during initialization + +
+
+
+ + +#### Example - subscribing to the unpin event after initialization + +
+
+
+ + diff --git a/docs/controls/PDFViewer/overview.md b/docs/controls/PDFViewer/overview.md index b0e9ad475c0..2598b742742 100644 --- a/docs/controls/PDFViewer/overview.md +++ b/docs/controls/PDFViewer/overview.md @@ -12,7 +12,7 @@ The PDFViewer displays PDF files in the browser and consists of a toolbar and a The default tools collection includes the `pager`, `open`, and `download` tools. For processing files, it supports the PDF.JS Processing and Telerik DPL Processing libraries. Among the key features the PDFViewer provides are the selection of a PDF processing library, a built-in paging mechanism, virtualization capabilities, a built-in default toolbar collection, and responsive capabilities and page scaling. -![Kendo UI for jQuery PDFViewer Overview](pdfviewer-overview.png) +![Kendo UI for jQuery PDFViewer Overview](pdfviewer-overview.PNG) ## Functionality and Features diff --git a/docs/controls/buttongroup/overview.md b/docs/controls/buttongroup/overview.md index c84be88b989..6f565e75fd2 100644 --- a/docs/controls/buttongroup/overview.md +++ b/docs/controls/buttongroup/overview.md @@ -10,7 +10,7 @@ position: 0 The ButtonGroup is a container for two or more Buttons. Each Button in the component can be configured separately depending on the requirements of your project. -![Kendo UI for jQuery ButtonGroup Overview](buttongroup-overview.png) +![Kendo UI for jQuery ButtonGroup Overview](buttongroup-overview.PNG) ## Functionality and Features diff --git a/docs/controls/captcha/overview.md b/docs/controls/captcha/overview.md index 2eceaafff32..963098c0a3d 100644 --- a/docs/controls/captcha/overview.md +++ b/docs/controls/captcha/overview.md @@ -10,7 +10,7 @@ position: 0 The Kendo UI Captcha component is a security measure that prevents automated spam from performing tasks such as form submissions in your application. The widget generates distorted images of letters and numbers that are easily decipherable to humans, but not to automated programs (spam bots). -![Kendo UI for jQuery Captcha Overview](captcha-overview.png) +![Kendo UI for jQuery Captcha Overview](captcha-overview.PNG) ## Functionality and Features diff --git a/docs/controls/daterangepicker/overview.md b/docs/controls/daterangepicker/overview.md index f76f5d98455..8613d20d8bf 100644 --- a/docs/controls/daterangepicker/overview.md +++ b/docs/controls/daterangepicker/overview.md @@ -12,7 +12,7 @@ The DateRangePicker is a container for holding start and end date inputs. It allows the user to select a date range from a calendar or through a direct input. The widget also supports custom templates for its `month` view, configuration options for minimum and maximum dates, a start view, and a depth for navigation. The first day of the week in the **Calendar** view depends on the applied [culture]({% slug culture_definition_kendoui_globalization %}). -![Kendo UI for jQuery DateRangePicker Overview](daterangepicker-overview.png) +![Kendo UI for jQuery DateRangePicker Overview](daterangepicker-overview.PNG) ## Functionality and Features diff --git a/docs/controls/dockmanager/dock-types.md b/docs/controls/dockmanager/dock-types.md new file mode 100644 index 00000000000..3ccf8eada9f --- /dev/null +++ b/docs/controls/dockmanager/dock-types.md @@ -0,0 +1,98 @@ +--- +title: Dock Types +page_title: jQuery Dialog Documentation - Dock Types +description: "Get started with the jQuery DockManager by Kendo UI and learn the different dock types." +slug: dock_types_kendoui_dockmanager +position: 1 +--- + +# Docking Panes + +The Kendo UI for jQuery DockManager widget exposes the ability to dock 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 option. The following example illustrates how to alter the behavior of the docking panes. + +```dojo +
+ + +``` + +## See Also + +* [JavaScript API Reference of the DockManager](/api/javascript/ui/dockmanager) diff --git a/docs/controls/dockmanager/overview.md b/docs/controls/dockmanager/overview.md new file mode 100644 index 00000000000..ea8bbec8e62 --- /dev/null +++ b/docs/controls/dockmanager/overview.md @@ -0,0 +1,109 @@ +--- +title: Overview +page_title: jQuery DockManager Documentation - Dialog Overview +description: "Learn the basics when working with the Kendo UI for jQuery DockManager." +slug: overview_kendoui_dockmanager_widget +position: 0 +--- + +# {{ site.product }} DockManager Overview + +The Dock Manager is a UI component that replicates the docks, along with their behaviors. It gives you the ability to have full control over the layout of your application through panes. This allows end users to alter the existing layout by pinning, resizing, moving, maximizing and hiding panes. + +* [Demo page for the DockManager widget](https://demos.telerik.com/kendo-ui/dockmanager/index) + + +## Basic Configuration + +The following example demonstrates how to define the DockManager. + +> It is mandatory to define a root pane that will contain all other panes. + +```dojo +
+ + +``` +## Functionality and Features + +* [Docking Panes({% slug dock_types_kendoui_dockmanager %})—You can dock panes globally or within other inner panes. +* [Pane Types]({% slug pane_types_kendoui_dockmanager %})—Use different pane types depending on the hierarchical structure you want to achieve. + +## Next Steps + +* [Basic Usage of the DockManager (Demo)](https://demos.telerik.com/kendo-ui/dockmanager/index) + +## See Also + +* [JavaScript API Reference of the DockManager](/api/javascript/ui/dockmanager) +* [Demo Page for the jQuery DockManager](https://demos.telerik.com/kendo-ui/dockmanager/index) +* [Knowledge Base Section](/knowledge-base) +* [jQuery DockManager Product Page](https://www.telerik.com/kendo-jquery-ui/dockmanager) diff --git a/docs/controls/dockmanager/pane-types.md b/docs/controls/dockmanager/pane-types.md new file mode 100644 index 00000000000..fb1f68ed0d6 --- /dev/null +++ b/docs/controls/dockmanager/pane-types.md @@ -0,0 +1,94 @@ +--- +title: Pane Types +page_title: jQuery Dialog Documentation - Pane Types +description: "Get started with the jQuery DockManager by Kendo UI and learn the different pane types." +slug: pane_types_kendoui_dockmanager +position: 2 +--- + + +The Kendo UI for jQuery DockManager widget exposes the ability to configure different pane types. The following types are as follows. + +* `tab`—panes of tab type will group panes in a tab strip way, similar to the `TabStrip` component, users can navigate through panes via tabs in the header. +* `split`— with split panes, you are able to group panes in a Splitter fashion, by splitting the container pane either `horizontally` or `vertically`. +* `content`— with content panes, you have full control on explicitly specifying arbitrary content that will be rendered for a given pane as per your requirements. + +> The root pane can either be of type `split` or `tab`. + +```dojo +
+ + +``` + +## See Also + +* [JavaScript API Reference of the DockManager](/api/javascript/ui/dockmanager) diff --git a/docs/controls/draganddrop/overview.md b/docs/controls/draganddrop/overview.md index bb49b74e8bf..1aa1643b084 100644 --- a/docs/controls/draganddrop/overview.md +++ b/docs/controls/draganddrop/overview.md @@ -14,7 +14,7 @@ Kendo UI for jQuery provides options to handle drag-and-drop scenarios by combin `kendoDropTarget` creates the droppable zones and marks a DOM element as a drop target for the Draggable. The `DropTargetArea` enables you to create multiple `DropTarget` elements that are located in the area container which is a useful scenario when the `DropTarget` elements are added dynamically. -![Kendo UI for jQuery Draggable Overview](draggable-overview.png) +![Kendo UI for jQuery Draggable Overview](draggable-overview.PNG) ## Functionality and Features diff --git a/docs/controls/dropdowntree/overview.md b/docs/controls/dropdowntree/overview.md index e441ea57d9b..f944f08e089 100644 --- a/docs/controls/dropdowntree/overview.md +++ b/docs/controls/dropdowntree/overview.md @@ -12,7 +12,7 @@ The DropDownTree represents an editor of hierarchical data, rendered in a tree-l The DropDownTree is available in the Kendo UI for jQuery suite as of the Kendo UI R2 2018. -![Kendo UI for jQuery DropDownTree Overview](dropdowntree-overview.png) +![Kendo UI for jQuery DropDownTree Overview](dropdowntree-overview.PNG) ## Functionality and Features diff --git a/docs/controls/listbox/overview.md b/docs/controls/listbox/overview.md index d0bf7d02ca4..ba5832f8a73 100644 --- a/docs/controls/listbox/overview.md +++ b/docs/controls/listbox/overview.md @@ -12,7 +12,7 @@ The ListBox provides suggestions depending on the typed text and allows multiple The component displays a list of data that is contained in a box and allows single or multiple selection, reordering of selected items, and deleting items and features keyboard navigation as well as the dragging and dropping of items. You can also connect the ListBox with another list-box and customize the component with the use of templates, toolbar positioning, placeholder and hint, and localization of its command buttons messages. -![Kendo UI for jQuery ListBox Overview](listbox-overview.png) +![Kendo UI for jQuery ListBox Overview](listbox-overview.PNG) ## Functionality and Features diff --git a/docs/controls/multiviewcalendar/overview.md b/docs/controls/multiviewcalendar/overview.md index c388a7928d9..76e43a002aa 100644 --- a/docs/controls/multiviewcalendar/overview.md +++ b/docs/controls/multiviewcalendar/overview.md @@ -12,7 +12,7 @@ The MultiViewCalendar renders a graphical Gregorian calendar with multiple horiz It supports the selection and navigation between dates as well as data templates and ranges for scheduling appointments. -![Kendo UI for jQuery MultiViewCalendar Overview](multiviewcalendar-overview.png) +![Kendo UI for jQuery MultiViewCalendar Overview](multiviewcalendar-overview.PNG) ## Functionality and Features diff --git a/docs/controls/pager/overview.md b/docs/controls/pager/overview.md index 346ea446779..35e921d012e 100644 --- a/docs/controls/pager/overview.md +++ b/docs/controls/pager/overview.md @@ -14,7 +14,7 @@ The user interface of the Pager is useful for paging data-bound components that You can customize the page number templates or use an input for navigation to a specific page, toggle the visibility of previous and next buttons, include a pagesize dropdown and alter the information messages. The pager API also offers the ability to [localize its messages]({% slug localization_kendoui_pager_widget %}). -![Kendo UI for jQuery Pager Overview](pager-overview.png) +![Kendo UI for jQuery Pager Overview](pager-overview.PNG) ## Functionality and Features diff --git a/docs/controls/popover/overview.md b/docs/controls/popover/overview.md index 322d63bf091..3206639dda9 100644 --- a/docs/controls/popover/overview.md +++ b/docs/controls/popover/overview.md @@ -10,7 +10,7 @@ position: 0 The Kendo UI Popover widget for jQuery provides a simple way to display additional content next to a specific anchor element that appears when users perform actions on that anchor element such as click or hover. -![Kendo UI for jQuery Popover Overview](popover-overview.png) +![Kendo UI for jQuery Popover Overview](popover-overview.PNG) ## Functionality and Features diff --git a/docs/controls/popup/overview.md b/docs/controls/popup/overview.md index 8e24da1c675..d49152fc1c0 100644 --- a/docs/controls/popup/overview.md +++ b/docs/controls/popup/overview.md @@ -10,7 +10,7 @@ position: 0 The Kendo UI Popup positions content next to a specific anchor. -![Kendo UI for jQuery Popup](popup.png) +![Kendo UI for jQuery Popup](popup.PNG) ## Functionality and Features diff --git a/docs/controls/rating/overview.md b/docs/controls/rating/overview.md index 2b849513ee8..c6c0d03c04f 100644 --- a/docs/controls/rating/overview.md +++ b/docs/controls/rating/overview.md @@ -10,7 +10,7 @@ position: 0 The Rating allows to intuitively rate by selecting number of items stars from a predefined maximum number of items. -![Kendo UI for jQuery Rating Overview](rating-overview.png) +![Kendo UI for jQuery Rating Overview](rating-overview.PNG) ## Functionality and Features diff --git a/docs/controls/scheduler/overview.md b/docs/controls/scheduler/overview.md index 87c22728f4f..30d54c9d507 100644 --- a/docs/controls/scheduler/overview.md +++ b/docs/controls/scheduler/overview.md @@ -20,7 +20,7 @@ As of the Kendo UI 2016 Q2 (2016.2.504) release: The change was driven by the [RFC 5545](http://tools.ietf.org/html/rfc5545#page-120) specification. Note that the previously demonstrated behavior had been incorrect. -![Kendo UI for jQuery Scheduler Overview](scheduler-overview.png) +![Kendo UI for jQuery Scheduler Overview](scheduler-overview.PNG) ## Functionality and Features diff --git a/docs/controls/tilelayout/overview.md b/docs/controls/tilelayout/overview.md index 2f4277ddcde..63156f11b64 100644 --- a/docs/controls/tilelayout/overview.md +++ b/docs/controls/tilelayout/overview.md @@ -14,7 +14,7 @@ The Kendo UI TileLayout widget allows you configure a two-dimensional grid-based The TileLayout is based on the [CSS Grid](https://css-tricks.com/snippets/css/complete-guide-grid/) with all its features and uses additional JavaScript logic to provide resizing, reordering, and template customizations. -![Kendo UI for jQuery TileLayout Overview](tilelayout-overview.png) +![Kendo UI for jQuery TileLayout Overview](tilelayout-overview.PNG) ## Functionality and Features diff --git a/docs/controls/timepicker/overview.md b/docs/controls/timepicker/overview.md index b60ebcc0bbb..f2763fe0a1a 100644 --- a/docs/controls/timepicker/overview.md +++ b/docs/controls/timepicker/overview.md @@ -12,7 +12,7 @@ The TimePicker enables users to select time values from a predefined list or ent The widget supports configurable options for setting its format, minimum and maximum time, and the interval between the predefined values in the list. -![Kendo UI for jQuery TimePicker Overview](timepicker-overview.png) +![Kendo UI for jQuery TimePicker Overview](timepicker-overview.PNG) ## Functionality and Features diff --git a/docs/styles-and-layout/sass-themes/compatibility.md b/docs/styles-and-layout/sass-themes/compatibility.md index 44ba9b2fc22..427c05b4628 100644 --- a/docs/styles-and-layout/sass-themes/compatibility.md +++ b/docs/styles-and-layout/sass-themes/compatibility.md @@ -13,6 +13,7 @@ The following table lists the Kendo UI for jQuery and Kendo UI Sass themes versi | kendo UI for jQuery | Kendo UI Sass Themes | |:--- |:--- | +| Kendo UI 2023.3.1010 (R3 2023) | @progress/kendo-theme-bootstrap@7.0.1
@progress/kendo-theme-classic@7.0.1
@progress/kendo-theme-default@7.0.1
@progress/kendo-theme-fluent@7.0.1
@progress/kendo-theme-material@7.0.1 | | Kendo UI 2023.2.829 (R2 2023 SP2) | @progress/kendo-theme-bootstrap@6.7.0
@progress/kendo-theme-classic@6.7.0
@progress/kendo-theme-default@6.7.0
@progress/kendo-theme-fluent@6.7.0
@progress/kendo-theme-material@6.7.0 | | Kendo UI 2023.2.718 (R2 2023 SP1) | @progress/kendo-theme-bootstrap@6.6.0
@progress/kendo-theme-classic@6.6.0
@progress/kendo-theme-default@6.6.0
@progress/kendo-theme-fluent@6.6.0
@progress/kendo-theme-material@6.6.0 | | Kendo UI 2023.2.606 (R2 2023) | @progress/kendo-theme-bootstrap@6.4.0
@progress/kendo-theme-classic@6.4.0
@progress/kendo-theme-default@6.4.0
@progress/kendo-theme-fluent@6.4.0
@progress/kendo-theme-material@6.4.0 | diff --git a/typescript/kendo.all.d.ts b/typescript/kendo.all.d.ts index ad61312983a..0733573d860 100644 --- a/typescript/kendo.all.d.ts +++ b/typescript/kendo.all.d.ts @@ -1,4 +1,4 @@ -// Type definitions for Kendo UI Professional v2023.2.829 +// Type definitions for Kendo UI Professional v2023.3.1010 // Project: http://www.telerik.com/kendo-ui // Definitions by: Telerik // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped