Sync with Kendo UI Professional

K-Pavlov · Jul 8, 2021 · 318bbfa · 318bbfa
1 parent 0a33f58
commit 318bbfa
Show file tree

Hide file tree

Showing 9 changed files with 249 additions and 10 deletions.
diff --git a/docs-aspnet/compatibility/visual-studio-support.md b/docs-aspnet/compatibility/visual-studio-support.md
@@ -13,7 +13,7 @@ The table below describes the minimum required version of Visual Studio based on
 
 | .NET CORE SDK     | VISUAL STUDIO                 | 
 | :---------------- | :---------------------------- | 
-| 5.0               | Visual Studio 2019 version 16.8 or higher. |
+| 5.0               | Visual Studio 2022, or Visual Studio 2019 version 16.8 or higher. |
 | 3.1               | Visual Studio 2019 version 16.4 or higher. |
 | 3.0               | Visual Studio 2019 version 16.3 or higher. |
 | 2.2               | Visual Studio 2017 version 15.9 or higher. |

diff --git a/docs-aspnet/getting-started-mvc/installation/overview.md b/docs-aspnet/getting-started-mvc/installation/overview.md
@@ -27,7 +27,7 @@ An alternative approach is to use [NuGet]({% slug aspnetmvc_nuget %}) and to ins
 
    * [A current .NET Framework version](https://dotnet.microsoft.com/download/dotnet-framework)
 
-   * [Visual Studio](https://www.visualstudio.com/downloads/)
+   * [Visual Studio](https://www.visualstudio.com/downloads/) 2012 or later
 
    * Microsoft SQL Server Express LocalDB
 

diff --git a/docs-aspnet/getting-started-mvc/vs-integration/introduction.md b/docs-aspnet/getting-started-mvc/vs-integration/introduction.md
@@ -16,7 +16,7 @@ The extensions handle the following major points:
 * Project [Creation]({% slug newprojectwizards_visualstudio_aspnetmvc %}) and [Configuration]({% slug projectwizardconfig_visualstudio_aspnetmvc %}) Wizards&mdash;Web asset management, adding the required settings to `web.config`, changing the theme.
 * Project [Upgrade]({% slug projectwizardupgrade_visualstudio_aspnetmvc %})&mdash;Upgrading Telerik UI for ASP.NET MVC to a new version.
 
-The Telerik UI for ASP.NET MVC VS Extensions are distributed with the Telerik UI for ASP.NET MVC installer. They support VS 2010, 2012, 2013, 2015, 2017, and 2019, which handle ASP.NET MVC 4 and 5 applications.
+The Telerik UI for ASP.NET MVC VS Extensions are distributed with the Telerik UI for ASP.NET MVC installer. They support Visual Studio 2022, 2019, 2017, 2015, 2013 and 2012.
 
 > VS Express editions are not supported.
 

diff --git a/docs-aspnet/installation/msi-install.md b/docs-aspnet/installation/msi-install.md
@@ -18,7 +18,7 @@ This article describes how to download and install Telerik UI for ASP.NET Core o
 * The Telerik UI for ASP.NET Core **Sample Application** distributed with the same package requires:
 
   * [.NET Core](https://dotnet.microsoft.com/learn/dotnet/hello-world-tutorial/install)
-  * [Visual Studio](https://www.visualstudio.com/downloads/) with completely installed `.NET Core cross-platform development` workload.
+  * [Visual Studio](https://www.visualstudio.com/downloads/) with completely installed `.NET Core cross-platform development` workload. See the Supported [Visual Studio Versions]({% slug visualstudiosupport_core %}).
 
 ## Download
 

diff --git a/docs-aspnet/installation/vs-integration/introduction.md b/docs-aspnet/installation/vs-integration/introduction.md
@@ -11,7 +11,7 @@ position: 1
 
 The {{ site.product_long }} Visual Studio (VS) Extensions enhance the experience in developing MVC web applications with {{ site.product }}.
 The VS Extensions come with handy templates that ease the creation of new projects. They also help you to add {{ site.product_short }} to an existing project or to upgrade the {{ site.product_short }} version.
-The {{ site.product_short }} VS extensions support VS 2017 and 2019 and are distributed with the {{ site.product }} installer.
+The {{ site.product_short }} VS extensions support VS 2022, 2019 and 2017, and are distributed with the {{ site.product }} installer.
 
 ### Benefits
 

diff --git a/docs-aspnet/introduction.md b/docs-aspnet/introduction.md
@@ -68,7 +68,7 @@ Telerik {{ site.product_short }} supports:
 * [C#](https://msdn.microsoft.com/en-us/library/aa288436(v=vs.71).aspx)  and [VB.NET](http://www.tutorialspoint.com/vb.net/).
 * [SharePoint 2010](https://msdn.microsoft.com/en-us/library/office/dd776256(v=office.12).aspx) and later.
 
-The Telerik UI for ASP.NET MVC Visual Studio extensions support Visual Studio 2015 and later.
+The Telerik UI for ASP.NET MVC Visual Studio extensions support Visual Studio 2012 and later.
 {% endif %}
 
 ### Monitoring the Progress Live Services

diff --git a/docs/backwards-compatibility/2021-backward-compatibility.md b/docs/backwards-compatibility/2021-backward-compatibility.md
@@ -10,6 +10,14 @@ position: 1
 
 This article lists the breaking or important changes in the 2021 releases of Kendo UI.
 
+## Kendo UI 2021 R3
+
+> Important change
+
+**MultiSelect**
+
+As of the 2021 R3 release the MultiSelect in virtualization scenario will no longer support `Shift` + `Arrow` key selection as it is described in the [Keyboard navigation demo](https://demos.telerik.com/kendo-ui/multiselect/keyboard-navigation). That is because when going from one virtual page of MultiSelect items to another the items indexes are reused. As the range selection functionality relies on indexes, executing it via the `Shift` + `Arrow` combination may result in improper selection in the widget. That is why it has been disabled for virtualized MultiSelect widgets.
+
 ## Kendo UI 2021 R2 SP1
 
 > Important change

diff --git a/src/kendo.multiselect.js b/src/kendo.multiselect.js
@@ -903,7 +903,7 @@ var __meta__ = { // jshint ignore:line
                     if (!listView.focus()) {
                         listView.focusLast();
                     } else {
-                        if (e.shiftKey) {
+                        if (e.shiftKey && !that.options.virtual) {
                             this._multipleSelection = true;
                             that._selectRange(activeItemIdx, listView.getElementIndex(listView.focus().first()) + dir);
                         }
@@ -923,7 +923,7 @@ var __meta__ = { // jshint ignore:line
                     if (!listView.focus()) {
                         that.close();
                     } else {
-                        if (e.shiftKey) {
+                        if (e.shiftKey && !that.options.virtual) {
                             this._multipleSelection = true;
                             that._selectRange(activeItemIdx, listView.getElementIndex(listView.focus().first()) + dir);
                         }
@@ -981,7 +981,7 @@ var __meta__ = { // jshint ignore:line
                     that._change();
                 });
                 e.preventDefault();
-            } else if (key === keys.SPACEBAR && e.shiftKey && visible) {
+            } else if (key === keys.SPACEBAR && e.shiftKey && visible && !that.options.virtual) {
                 var activeIndex = listView.getElementIndex(that._getActiveItem());
                 var currentIndex = listView.getElementIndex(listView.focus());
 

diff --git a/tests/multiselect/navigation.js b/tests/multiselect/navigation.js
@@ -1,7 +1,8 @@
 (function() {
     var MultiSelect = kendo.ui.MultiSelect,
         keys = kendo.keys,
-        select;
+        select,
+        CONTAINER_HEIGHT = 200;;
 
     function populateSelect(length) {
         var options = [];
@@ -543,6 +544,236 @@
     });
 });
 
+describe("kendo.ui.MultiSelect navigation in virtual scenario", function () {
+    function generateData(parameters) {
+        var items = [];
+        for (var i = parameters.skip, len = parameters.skip + parameters.take; i < len; i++) {
+            items.push({
+                id: i,
+                value: i,
+                text: "Item " + i
+            });
+        }
+
+        return items;
+    }
+
+    function createAsyncDataSource(options) {
+        options = options || {};
+        var transport = {
+            read: function(options) {
+                setTimeout(function() {
+                    options.success({ data: generateData(options.data), total: 300 });
+                }, 0);
+            }
+        };
+
+        return new kendo.data.DataSource({
+            transport: options.transport || transport,
+            serverPaging: true,
+            serverFiltering: true,
+            pageSize: 40,
+            schema: {
+                data: "data",
+                total: "total"
+            }
+        });
+    }
+
+    beforeEach(function() {
+        kendo.ns = "";
+        select = $("<select multiple />").appendTo(Mocha.fixture);
+    });
+    afterEach(function() {
+        if (select.data("kendoMultiSelect")) {
+            select.data("kendoMultiSelect").destroy();
+        }
+
+        select.parents(".k-widget").remove();
+    });
+
+    it("MultiSelect selects all on CTRL+A", function(done) {
+        var multiselect = new MultiSelect(select, {
+            height: CONTAINER_HEIGHT,
+            animation: false,
+            dataTextField: "text",
+            dataValueField: "value",
+            dataSource: createAsyncDataSource(),
+            virtual: {
+                valueMapper: function(o) { o.success(o.value); },
+                itemHeight: 40
+            }
+        });
+
+        multiselect.one("dataBound", function() {
+            multiselect.open();
+
+            multiselect.input.trigger({
+                type: "keydown",
+                keyCode: 65,
+                ctrlKey: true
+            });
+
+            assert.equal(multiselect.tagList.children().length, 0);
+            done();
+        });
+    });
+
+    it("MultiSelect selects multiple items on SHIFT+DOWN", function (done) {
+        var multiselect = new MultiSelect(select, {
+            height: CONTAINER_HEIGHT,
+            animation: false,
+            dataTextField: "text",
+            dataValueField: "value",
+            dataSource: createAsyncDataSource(),
+            virtual: {
+                valueMapper: function(o) { o.success(o.value); },
+                itemHeight: 40
+            }
+        });
+
+        multiselect.one("dataBound", function() {
+            multiselect.open();
+
+            multiselect.input.trigger({
+                type: "keydown",
+                keyCode: keys.DOWN
+            });
+
+            multiselect.input.trigger({
+                type: "keydown",
+                keyCode: keys.DOWN,
+                shiftKey: true
+            });
+
+            multiselect.input.trigger({
+                type: "keydown",
+                keyCode: keys.DOWN,
+                shiftKey: true
+            });
+
+            assert.equal(multiselect.tagList.children().length, 0);
+            done();
+        });
+    });
+
+    it("MultiSelect selects multiple items on SHIFT+UP", function (done) {
+        var multiselect = new MultiSelect(select, {
+            height: CONTAINER_HEIGHT,
+            animation: false,
+            dataTextField: "text",
+            dataValueField: "value",
+            dataSource: createAsyncDataSource(),
+            virtual: {
+                valueMapper: function(o) { o.success(o.value); },
+                itemHeight: 40
+            }
+        });
+
+        multiselect.one("dataBound", function() {
+            multiselect.open();
+
+            multiselect.input.trigger({
+                type: "keydown",
+                keyCode: keys.DOWN
+            });
+            multiselect.input.trigger({
+                type: "keydown",
+                keyCode: keys.DOWN
+            });
+
+            multiselect.input.trigger({
+                type: "keydown",
+                keyCode: keys.UP,
+                shiftKey: true
+            });
+
+            multiselect.input.trigger({
+                type: "keydown",
+                keyCode: keys.UP,
+                shiftKey: true
+            });
+
+            assert.equal(multiselect.tagList.children().length, 0);
+            done();
+        });
+    });
+
+    it("MultiSelect selects multiple items on CTRL+SHIFT+END", function (done) {
+        var multiselect = new MultiSelect(select, {
+            height: CONTAINER_HEIGHT,
+            animation: false,
+            dataTextField: "text",
+            dataValueField: "value",
+            dataSource: createAsyncDataSource(),
+            virtual: {
+                valueMapper: function(o) { o.success(o.value); },
+                itemHeight: 40
+            }
+        });
+
+        multiselect.one("dataBound", function() {
+            multiselect.open();
+
+            multiselect.input.trigger({
+                type: "keydown",
+                keyCode: keys.DOWN
+            });
+
+            multiselect.input.trigger({
+                type: "keydown",
+                keyCode: keys.END,
+                ctrlKey: true,
+                shiftKey: true
+            });
+
+            assert.equal(multiselect.tagList.children().length, 0);
+            done();
+        });
+    });
+
+    it("MultiSelect selects multiple items on CTRL+SHIFT+HOME", function (done) {
+        var multiselect = new MultiSelect(select, {
+            height: CONTAINER_HEIGHT,
+            animation: false,
+            dataTextField: "text",
+            dataValueField: "value",
+            dataSource: createAsyncDataSource(),
+            virtual: {
+                valueMapper: function(o) { o.success(o.value); },
+                itemHeight: 40
+            }
+        });
+
+        multiselect.one("dataBound", function() {
+            multiselect.open();
+
+            multiselect.input.trigger({
+                type: "keydown",
+                keyCode: keys.DOWN
+            });
+            multiselect.input.trigger({
+                type: "keydown",
+                keyCode: keys.DOWN
+            });
+            multiselect.input.trigger({
+                type: "keydown",
+                keyCode: keys.DOWN
+            });
+
+            multiselect.input.trigger({
+                type: "keydown",
+                keyCode: keys.HOME,
+                ctrlKey: true,
+                shiftKey: true
+            });
+
+            assert.equal(multiselect.tagList.children().length, 0);
+            done();
+        });
+    });
+});
+
     describe("kendo.ui.MultiSelect tag navigation", function () {
         beforeEach(function() {
             select = $("<select multiple=multiple/>").appendTo(document.body);