Sync with Kendo UI Professional

Author: kendo-bot

docs-aspnet/html-helpers/editors/timepicker/focused-time.md

@@ -0,0 +1,32 @@
+---
+title: Focused Time
+page_title: Focused Time
+description: "Get started with the {{ site.product }} TimePicker and learn how to set the focused time when the user opens the pop-up."
+slug: htmlhelpers_timepicker_aspnetcore_focusedtime
+position: 4
+---
+
+# Focused Time
+
+The TimePicker allows you to define focused time when the time chooser pop-up is opened. This will provide a convenient way for the user to easily select a highlighted time slot. Also, the pop-up container list is automatically scrolled according to this time item.
+
+The following example demonstrates how apply the FocusedTime setting. By default, the TimePicker focuses the default time of 12:00 AM. However, a common requirement is to have the focused time to be 8:00 AM. 
+
+```HtmlHelper
+   @(Html.Kendo().TimePicker()
+       .Name("timepicker")
+       .DateInput()
+       .FocusTime(new DateTime(2023, 5, 5, 8, 0, 0))
+   )
+```
+{% if site.core %}
+```TagHelper
+            <kendo-timepicker name="timepicker"
+                              date-input="true" focus-time="new DateTime(2023, 5, 5, 8, 0, 0)">
+            </kendo-timepicker>
+```
+{% endif %}
+
+## See Also
+
+* [Server-Side API](/api/timepicker)

docs-aspnet/html-helpers/editors/timepicker/overview.md

@@ -62,6 +62,7 @@ The TimePicker TagHelper configuration options are passed as attributes.
 ## Functionality and Features
 
 * [Selected time]({% slug htmlhelpers_timepicker_aspnetcore_selectedtimes %})—The TimePicker allows you to render a pre-selected time and also define the minimum and maximum time it displays.
+* [Focused time]({% slug htmlhelpers_timepicker_aspnetcore_focusedtime %})—The TimePicker allows you to define focused time when the pop-up is opened.
 * [Formats]({% slug formats_timepicker_aspnetcore %})—The TimePicker allows you to define its time formatting.
 * [Validation]({% slug htmlhelpers_timepicker_aspnetcore_validation %})—The TimePicker is designed to keep its input value unchanged even when the typed time is invalid.
 * [Globalization]({% slug globalization_timepicker_aspnetcore %})—The globalization process combines the translation of component messages (localization) with adapting them to specific cultures.

docs-aspnet/html-helpers/navigation/drawer/overview.md

@@ -71,6 +71,7 @@ The following example demonstrates how to define the Drawer.
 * [Templates]({% slug templates_drawer_aspnetcore %})—With the built-in item templates, you control how the Drawer items are rendered.
 * [Hierarchy]({% slug hierarchy_drawer_aspnetcore %})—The Drawer allows you to display hierarchically organized items.
 * [Events]({% slug events_drawer %})—The Drawer allows you to handle its events and implement custom functionality.
+* **Expanded**—The Drawer can be expanded by default using this setting.
 
 ## Next Steps
 

docs/_tools/check-redirects.sh

@@ -491,6 +491,34 @@ Sets the scroll amount (in pixels) applied when the user clicks on a scroll butt
 		});
 	</script>
 
+### sortable `Boolean` *(default: false)*
+
+If enabled, users will be able to sort the tabs by dragging them to the desired position.
+
+#### Example
+
+    <div id="tabstrip">
+		<ul>
+			<li>Tab Header Number 1</li>
+			<li>Tab Header Number 2</li>
+			<li>Tab Header Number 3</li>
+			<li>Tab Header Number 4</li>
+			<li>Tab Header Number 5</li>
+			<li>Tab Header Number 6</li>
+		</ul>
+		<div>Content 1</div>
+		<div>Content 2</div>
+		<div>Content 3</div>
+		<div>Content 4</div>
+		<div>Content 5</div>
+		<div>Content 6</div>
+	</div>
+	<script>
+		$("#tabstrip").kendoTabStrip({
+			sortable: true
+		});
+	</script>
+
 ### tabPosition `String`*(default: "top")*
 
 Specifies the position of the widget tabs. Valid values are `"top"` (default), `"left"`, `"right"` and `"bottom"`.

docs/api/javascript/ui/tabstrip.md

@@ -1,12 +1,13 @@
 import "./kendo.data.js";
 import "./kendo.icons.js";
+import "./kendo.sortable.js";
 
 var __meta__ = {
     id: "tabstrip",
     name: "TabStrip",
     category: "web",
     description: "The TabStrip widget displays a collection of tabs with associated tab content.",
-    depends: [ "data", "icons" ],
+    depends: [ "data", "icons", "sortable" ],
     features: [ {
         id: "tabstrip-fx",
         name: "Animation",
@@ -68,13 +69,14 @@ var __meta__ = {
         templates = {
             content: (data) =>
                 `<div class='k-tabstrip-content k-content' ${data.contentAttributes(data)} tabindex='0'>${data.content(data.item)}</div>`,
-            itemWrapper: ({ tag, item , contentUrl, textAttributes, image, sprite, text }) =>
+            textWrapper: ({ tag, item , contentUrl, textAttributes, image, sprite, text }) =>
                 `<${tag(item)} class='k-link' ${contentUrl(item)} ${textAttributes(item)}>` +
                     `${image(item)}${sprite(item)}${text(item)}` +
                 `</${tag(item)}>`,
-            item: (data) =>
+            item: (data) =>templates.itemWrapper(data,`${data.textWrapper(data)}`),
+            itemWrapper: (data, item) =>
                 `<li class='${data.wrapperCssClass(data.group, data.item)}' role='tab' ${data.item.active ? "aria-selected='true'" : ''}>` +
-                    `${data.itemWrapper(data)}` +
+                    item +
                 "</li>",
             image: ({ imageUrl }) => `<img class='k-image' alt='' src='${imageUrl}' />`,
             sprite: ({ spriteCssClass }) => `<span class='k-sprite ${spriteCssClass}'></span>`,
@@ -199,6 +201,7 @@ var __meta__ = {
 
             that._tabPosition();
             that._scrollable();
+            that._sortable();
             that._processContentUrls();
             that._attachEvents();
 
@@ -236,6 +239,7 @@ var __meta__ = {
             dataSpriteCssClass: "",
             dataContentUrlField: "",
             tabPosition: "top",
+            tabTemplate: null,
             animation: {
                 open: {
                     effects: "expand:vertical fadeIn",
@@ -251,7 +255,8 @@ var __meta__ = {
             applyMinHeight: true,
             scrollable: {
                 distance: DEFAULTDISTANCE
-            }
+            },
+            sortable: false
         },
 
         setDataSource: function(dataSource) {
@@ -779,6 +784,11 @@ var __meta__ = {
                     text: text(view[idx])
                 };
 
+                if (options.tabTemplate) {
+                    tab.model = view[idx];
+                    tab.template = options.tabTemplate;
+                }
+
                 if (options.dataEncodedField) {
                     tab.encoded = encoded(view[idx]);
                 }
@@ -1383,6 +1393,44 @@ var __meta__ = {
             });
         },
 
+        _sortable: function() {
+            var that = this,
+            options = that.options,
+            position = options.tabPosition,
+            axis = position === 'left' || position === 'right' ? 'y' : 'x';
+
+            if (!that.options.sortable) {
+                return;
+            }
+
+            that.sortable = new kendo.ui.Sortable(that.tabGroup, {
+                filter: "li.k-tabstrip-item",
+                axis,
+                container: that.tabWrapper,
+                hint: el => `<div id='hint' class='k-tabstrip k-tabstrip-${position}'>
+                                <div class= 'k-tabstrip-items-wrapper k-hstack'>
+                                    <ul class='k-tabstrip-items k-reset'>
+                                        <li class='k-item k-tabstrip-item k-first k-active k-tab-on-${position}'>${el.html()}</li>
+                                    </ul>
+                                </div>
+                            </div>`,
+                change: that._sortChange.bind(that),
+                start: e => that.activateTab(e.item)
+            });
+
+        },
+
+        _sortChange: function(e) {
+            var that = this,
+                reference = that.tabGroup.children().eq(e.newIndex);
+
+            if (e.oldIndex < e.newIndex) {
+                that.insertAfter(e.item, reference);
+            } else {
+                that.insertBefore(e.item, reference);
+            }
+        },
+
         _tabPosition: function() {
             var that = this,
                 tabPosition = that.options.tabPosition;
@@ -1565,13 +1613,18 @@ var __meta__ = {
             options = extend({ tabStrip: {}, group: {} }, options);
 
             var empty = templates.empty,
-                item = options.item;
+                item = options.item,
+                templateOptions = extend(options, {
+                    image: item.imageUrl ? templates.image : empty,
+                    sprite: item.spriteCssClass ? templates.sprite : empty,
+                    textWrapper: templates.textWrapper
+                }, rendering);
+
+                if (item.template) {
+                    return templates.itemWrapper(templateOptions, kendo.template(item.template)(item.model));
+                }
 
-            return templates.item(extend(options, {
-                image: item.imageUrl ? templates.image : empty,
-                sprite: item.spriteCssClass ? templates.sprite : empty,
-                itemWrapper: templates.itemWrapper
-            }, rendering));
+            return templates.item(templateOptions);
         },
 
         renderContent: function(options) {

src/kendo.tabstrip.js

@@ -108,5 +108,16 @@
             assert.equal(tabstrip.wrapper.find("div[tabindex=0]").length, 2);
         });
 
+        it("function tab template is applied correctly", function() {
+            tabstrip = new kendo.ui.TabStrip(dom, {
+                dataContentField: "content",
+                tabTemplate: data => `<span class='customClass'>${data.text}</span>`,
+                dataSource: [{
+                    text: "one", content: "Content one"
+                }]
+            });
+
+            assert.equal(tabstrip.wrapper.find("span.customClass").text(), "one");
+        });
     });
 }());