Sync with Kendo UI Professional

Author: kendo-bot

docs-aspnet/html-helpers/navigation/tabstrip/tabs.md

@@ -275,6 +275,180 @@ The following example showcases how to add a button element inside a specified t
 ```
 {% endif %}
 
+## Closable Tabs
+
+Use the `Closable` property to create closable tabs in the {{site.framework}} TabStrip component. When enabled for the entire component, every tab shows a **close** icon which hides the tab from view and removes it from the TabStrip. You can also control the closable behavior individually by setting the `closable` option for the respective tab. The default value is `false`.
+
+```HtmlHelper
+    @(Html.Kendo().TabStrip()
+            .Name("tabstrip")
+            .Items(tabstrip =>
+            {
+                 tabstrip.Add().Text("New Folder (Closable)")
+                 .Icon("folder-add")
+                 .IconPosition(IconPosition.Before)
+                 .Closable(true)
+                 .Content("New Folder Content");
+            })
+        .SelectedIndex(0)
+        )
+```
+{% if site.core %}
+```TagHelper
+    <kendo-tabstrip name="tabstrip">
+        <items>
+            <tabstrip-item icon="folder-add" icon-position="IconPosition.Before" text="New Folder (Closable)" closable="true">
+                <content>
+                    New Folder Content
+                </content>
+            </tabstrip-item>
+        </items>
+    </kendo-tabstrip>
+```
+{% endif %}
+
+## Disabled Tabs
+
+You can leverage the `Enable` property to specify whether a given tab should be enabled or disabled. Disabled tabs cannot be selected or focused and are displayed with a different visual style. The default value is `true`.
+
+```HtmlHelper
+    @(Html.Kendo().TabStrip()
+            .Name("tabstrip")
+            .Items(tabstrip =>
+            {
+                  tabstrip.Add().Text("Delete User (Disabled)")
+                  .Icon("x-outline")
+                  .Enabled(false)
+                  .Content("Delete User Content");
+            })
+        .SelectedIndex(0)
+        )
+```
+{% if site.core %}
+```TagHelper
+    <kendo-tabstrip name="tabstrip">
+        <items>
+            <tabstrip-item icon="x-outline" text="Delete User (Disabled)" enabled="false">
+                <content>
+                    Delete User Content
+                </content>
+            </tabstrip-item>
+        </items>
+    </kendo-tabstrip>
+```
+{% endif %}
+
+## Tabs Icons
+
+The TabStrip component provides built-in icons for each of its tabs. The icon is rendered inside the tab element.  You can use the name for an existing icon in a theme or SVG content. Check the [full list of Telerik icons](https://www.telerik.com/design-system/docs/foundation/iconography/icon-list/) for all the available icons.
+
+Use the `IconPosition` property to set the position of the icon relative to the tab text. Possible values are "IconPosition.Before" and "IconPosition.After".
+
+Use the `IconClass` setting to apply a custom CSS class to the icon element, allowing you to style it further.
+
+```HtmlHelper
+    @(Html.Kendo().TabStrip()
+            .Name("tabstrip")
+            .Items(tabstrip =>
+            {
+                 tabstrip.Add().Text("Privileges (Larger Icon)")
+                 .Icon("security-lock-solid")
+                 .IconPosition(IconPosition.After)
+                 .IconClass("larger-icon")
+                 .Content("Privileges Content");
+            })
+        .SelectedIndex(0)
+        )
+        <style>
+           .larger-icon {
+              scale: 1.5;
+           }
+         </style>
+```
+{% if site.core %}
+```TagHelper
+    <kendo-tabstrip name="tabstrip">
+        <items>
+            <tabstrip-item icon="security-lock-solid" icon-position="IconPosition.After" icon-class="larger-icon" text="Privileges (Larger Icon)">
+                <content>
+                    Privileges Content
+                </content>
+            </tabstrip-item>
+        </items>
+    </kendo-tabstrip>
+    <style>
+         .larger-icon {
+             scale: 1.5;
+         }
+     </style>
+```
+{% endif %}
+
+## Tab Actions
+
+Use the TabStrip `Actions` configuration to define a collection of action buttons that are rendered in the tab. The actions buttons are rendered as part of the tab and can be used to provide additional functionality beyond the built-in close button.
+
+Each action can be further customized with icons, attributes and a handler function that will be executed when the action is clicked.
+
+```HtmlHelper
+    @(Html.Kendo().TabStrip()
+            .Name("tabstrip")
+            .Items(tabstrip =>
+            {
+                 tabstrip.Add().Text("Account")
+                 .Icon("user-outline")
+                 .Actions(actions =>
+                 {
+                     actions.Add().Icon("envelope").Action("sendMessage").HtmlAttributes(new { title = "Send Message" });
+                     actions.Add().Icon("zoom-in").Action("zoomIn").HtmlAttributes(new { title = "Zoom In" });
+                      actions.Add().Icon("zoom-out").Action("zoomOut").HtmlAttributes(new { title = "Zoom Out" });
+                   })
+                  .Content("Account Content");
+            })
+           .SelectedIndex(0)
+        )
+       <script>
+         function sendMessage(e){
+             alert("Message Sent!");
+         }
+        function zoomIn(e){
+              $(".k-tabstrip-content.k-active").css("zoom",parseFloat($(".k-tabstrip-content.k-active").css("zoom"))+0.2);
+          }
+        function zoomOut(e){
+              $(".k-tabstrip-content.k-active").css("zoom",parseFloat($(".k-tabstrip-content.k-active").css("zoom"))-0.2);
+         }
+       </script>
+```
+{% if site.core %}
+```TagHelper
+    <kendo-tabstrip name="tabstrip">
+        <items>
+            <tabstrip-item icon="user-outline" icon-position="IconPosition.After" icon-class="larger-icon" text="Account">
+                <content>
+                    Account Content
+                </content>
+                <tabstrip-item-actions>
+                    <tabstrip-item-action icon="envelope" action-handler="sendMessage" html-attributes='new Dictionary<string, object>{ ["title"] = "Send Message" }'></tabstrip-item-action>
+                    <tabstrip-item-action icon="zoom-in" action-handler="zoomIn" html-attributes='new Dictionary<string, object>{ ["title"] = "Zoom In" }'></tabstrip-item-action>
+                    <tabstrip-item-action icon="zoom-out" action-handler="zoomOut" html-attributes='new Dictionary<string, object>{ ["title"] = "Zoom In" }'></tabstrip-item-action>
+                </tabstrip-item-actions>
+            </tabstrip-item>
+        </items>
+    </kendo-tabstrip>
+    <script>
+         function sendMessage(e){
+             alert("Message Sent!");
+         }
+        function zoomIn(e){
+              $(".k-tabstrip-content.k-active").css("zoom",parseFloat($(".k-tabstrip-content.k-active").css("zoom"))+0.2);
+          }
+        function zoomOut(e){
+              $(".k-tabstrip-content.k-active").css("zoom",parseFloat($(".k-tabstrip-content.k-active").css("zoom"))-0.2);
+         }
+    </script>
+```
+{% endif %}
+
 ## Selecting Tab on Initial Load
 
 You can select a tab and display its associated content upon the initial load of the TabStrip.

docs/api/javascript/ui/combobox.md

@@ -1006,6 +1006,24 @@ If set to `false`, the prefix adornment will not have a separator.
       })
     </script>
 
+### readonly `Boolean`*(default: "false")*
+
+If set to `true`, the widget will be readonly and will not allow user input. The widget is not readonly be default and allow user input.
+
+#### Example - make the widget readonly
+
+    <input id="combobox" />
+    <script>
+        $("#combobox").kendoComboBox({
+          readonly: true,
+          dataSource: [
+            { id: 1, name: "Apples" },
+            { id: 2, name: "Oranges" }
+          ],
+          dataTextField: "name",
+          dataValueField: "id",
+        });
+    </script>
 
 ### rounded `String`*(default: "medium")*
 

docs/api/javascript/ui/dropdownlist.md

@@ -928,6 +928,29 @@ The [template](/api/javascript/kendo/methods/template) used to render the option
     });
     </script>
 
+### readonly `Boolean`*(default: "false")*
+
+If set to `true`, the widget will be readonly and will not allow user input. The widget is not readonly be default and allow user input.
+
+#### Example - make the widget readonly
+
+    <input id="dropdownlist" />
+    <script>
+       $("#dropdownlist").kendoDropDownList({
+          readonly: true,
+          dataSource: [
+            { productName: "Product 1", productId: 1 },
+            { productName: "Product 2", productId: 2 },
+            { productName: "Product 3", productId: 3 },
+            { productName: "Product 4", productId: 4 }
+          ],
+          dataTextField: "productName",
+          dataValueField: "productId",
+          optionLabel: "-- Please select --",
+          optionLabelTemplate:'<span style="color:red">-- Please select --</span>'
+      });
+    </script>
+
 ### rounded `String`*(default: "medium")*
 
 Sets a value controlling the border radius. Can also be set to the following string values:

docs/api/javascript/ui/multiselect.md

@@ -1688,6 +1688,22 @@ The widget will pass the selected value(s) in the `valueMapper` function. In tur
         }
     </script>
 
+### readonly `Boolean`*(default: "false")*
+
+If set to `true`, the widget will be readonly and will not allow user input. The widget is not readonly be default and allow user input.
+
+#### Example - make the widget readonly
+
+    <select id="multiselect" multiple="multiple">
+        <option>Item1</option>
+        <option>Item2</option>
+    </select>
+    <script>
+    $("#multiselect").kendoMultiSelect({
+      readonly: true
+    });
+    </script>
+
 ### rounded `String`*(default: "medium")*
 
 Sets a value controlling the border radius. Can also be set to the following string values:

src/kendo.combobox.js

@@ -67,6 +67,7 @@ export const __meta__ = {
             options = that.options;
             element = that.element.on("focus" + ns, that._focusHandler.bind(that));
 
+            options.readonly = kendo.isPresent(options.readonly) ? options.readonly : Boolean(that.element.attr("readonly"));
             options.placeholder = options.placeholder || element.attr("placeholder");
             options.inputMode = options.inputMode || element.attr("inputmode") || "text";
 
@@ -147,6 +148,7 @@ export const __meta__ = {
             delay: 200,
             dataTextField: "",
             dataValueField: "",
+            readonly: false,
             minLength: 1,
             enforceMinLength: false,
             height: 200,

src/kendo.dropdownlist.js

@@ -66,6 +66,8 @@ export const __meta__ = {
             options = that.options;
             element = that.element.on("focus" + ns, that._focusHandler.bind(that));
 
+            options.readonly = kendo.isPresent(options.readonly) ? options.readonly : Boolean(that.element.attr("readonly"));
+
             that._focusInputHandler = that._focusInput.bind(that);
 
             that.optionLabel = $();
@@ -181,6 +183,7 @@ export const __meta__ = {
             autoWidth: false,
             popup: null,
             filterTitle: null,
+            readonly: false,
             size: "medium",
             fillMode: "solid",
             rounded: "medium",

src/kendo.list.js

@@ -951,7 +951,7 @@ export const __meta__ = {
             if (!options.enabled || disabled) {
                 that.enable(false);
             } else {
-                that.readonly(that.element.is("[readonly]"));
+                that.readonly(options.readonly || that.element.is("[readonly]"));
             }
         },
 

src/kendo.multiselect.js

@@ -87,6 +87,7 @@ export const __meta__ = {
             that._optionsMap = {};
             that._customOptions = {};
             that.options.inputMode = that.options.inputMode || that.element.attr("inputmode") || "text";
+            that.options.readonly = kendo.isPresent(that.options.readonly) ? that.options.readonly : Boolean(that.element.attr("readonly"));
 
             that._wrapper();
             that._inputValuesContainer();
@@ -166,6 +167,7 @@ export const __meta__ = {
             enabled: true,
             autoBind: true,
             autoClose: true,
+            readonly: false,
             highlightFirst: true,
             dataTextField: "",
             dataValueField: "",

tests/helpers/unit/upload-utils.js

@@ -8,6 +8,19 @@ export function copyUploadPrototype() {
     );
 }
 
+export function simulateDrop(srcFiles, uploadInstance) {
+    let dropEvent = $.Event("drop", {
+        originalEvent: {
+            dataTransfer: {
+                files: srcFiles
+            }
+        },
+        stopPropagation: function() { },
+        preventDefault: function() { }
+    });
+    $(uploadInstance.wrapper).find(".k-dropzone").trigger(dropEvent);
+}
+
 export function createHTML() {
     $("#testbed_container").remove();
     let html = '<div id="testbed_container"><div id="prototype" style="display:none">' +

tests/unit/combobox/initialization.js

@@ -1371,5 +1371,22 @@ import { stub } from '../../helpers/unit/stub.js';
             assert.equal(combobox.label.element.text(), "some label");
         });
 
+        it ("Should set readonly state", function() {
+            let combobox = new ComboBox(input, {
+                readonly: true,
+                dataValueField: "name",
+                dataTextField: "name",
+                dataSource: {
+                    data: [
+                        { name: "item1", value: "1" },
+                        { name: "item2", value: "2" },
+                        { name: "item3", value: "3" }
+                    ]
+                }
+            });
+
+            assert.isOk(combobox.wrapper.attr("aria-readonly", true));
+            assert.isOk(combobox.input.attr("readonly"));
+        })
     });