Sync with Kendo UI Professional

Author: kendo-bot

Diff for: docs/api/javascript/ui/menu.md

@@ -305,6 +305,15 @@ Refer to the example below for a list of the supported properties.
 
                 // handle event
              }
+           },
+           {
+                text: "Item 6",
+                icon: "gear"
+           },
+           {
+                text: "Item 7",
+                icon: "pencil",
+                iconClass: "custom-icon-class"
            }]
         })
       });
@@ -427,15 +436,60 @@ Sets the field of the data item that provides the image url of the menu items.
         $("#menu").kendoMenu({
             dataSource: {
             data: [{
-                    Name: "Item 1",                
+                    Name: "Item 1",
                     imgUrl: "https://demos.telerik.com/kendo-ui/content/shared/icons/sports/golf.png"
                 }]
             },
-            dataTextField:"Name",            
+            dataTextField:"Name",
             dataImageUrlField:"imgUrl"
         });
     </script>
 
+### dataIconField `String`
+
+Sets the field of the data item that provides the icon name of the menu items.
+
+#### Example
+
+    <ul id="menu"></ul>
+    <script>
+        $("#menu").kendoMenu({
+            dataSource: {
+            data: [{
+                    Name: "Item 1",
+                    IconName: "gear",
+                    IconClass: "custom-icon-class"
+                }]
+            },
+            dataTextField:"Name",
+            dataIconField:"IconName",
+            dataIconClassField:"IconClass"
+        });
+    </script>
+
+### dataIconClassField `String`
+
+Sets the field of the data item that provides the icon class of the menu items.
+
+
+#### Example
+
+    <ul id="menu"></ul>
+    <script>
+        $("#menu").kendoMenu({
+            dataSource: {
+            data: [{
+                    Name: "Item 1",
+                    IconName: "gear",
+                    IconClass: "custom-icon-class"
+                }]
+            },
+            dataTextField:"Name",
+            dataIconField:"IconName",
+            dataIconClassField:"IconClass"
+        });
+    </script>
+
 ### dataContentField `String`
 
 Sets the field of the data item that provides the content of the menu items.
@@ -521,6 +575,25 @@ its sub menus to the left.
         });
     </script>
 
+### iconPosition `String` *(default: "before")*
+
+Specifies the position of the icon in the Menu items using the text content as a reference. The available options are:
+- `before` - the icon is positioned before the text
+- `after` - the icon is positioned after the text
+
+#### Example
+
+    <ul id="menu"></ul>
+    <script>
+        $("#menu").kendoMenu({
+            iconPosition: "after",
+            dataSource: [
+                { text: "Item 1", icon: "gear" },
+                { text: "Item 2", icon: "pencil" }
+            ]
+        });
+    </script>
+
 ### openOnClick `Boolean|Object`*(default: false)*
 
  Specifies that the root sub menus will be opened on item click.
@@ -719,6 +792,31 @@ Sets the scroll amount (in pixels) that the Menu scrolls when the scroll buttons
         });
     </script>
 
+### scrollable.scrollButtonsPosition `string` *(default: "split")*
+
+Determines where the scroll buttons appear when menu content overflows. Here's an explanation of the available options:
+
+- "split" (default): Places one scroll button at the beginning and another at the end of the scrollable container
+- "start": Places both scroll buttons at the beginning of the scrollable container
+- "end": Places both scroll buttons at the end of the scrollable container
+
+
+#### Example
+
+    <ul id="menu" style="width:150px;">
+        <li>Item 1</li>
+        <li>Item 2</li>
+        <li>Item 3</li>
+    </ul>
+
+    <script>
+        $("#menu").kendoMenu({
+            scrollable: {
+                scrollButtonsPosition: "start"
+            }
+        });
+    </script>
+
 ## Methods
 
 ### append

Diff for: src/kendo.menu.js

@@ -90,6 +90,8 @@ export const __meta__ = {
             text: "dataTextField",
             url: "dataUrlField",
             spriteCssClass: "dataSpriteCssClassField",
+            icon: "dataIconField",
+            iconClass: "dataIconClassField",
             imageUrl: "dataImageUrlField",
             imageAttr: "dataImageAttrField",
             content: "dataContentField"
@@ -260,7 +262,7 @@ export const __meta__ = {
         item
             .filter(".k-separator")
             .removeClass("k-menu-item")
-            .addClass("k-menu-separator")
+            .addClass("k-separator-horizontal")
             .empty()
             .append(" ");
 
@@ -542,6 +544,7 @@ export const __meta__ = {
             scrollable: false,
             popupCollision: null,
             autoSize: false,
+            iconPosition: "before", // "before" or "after" text content
         },
 
         _initData: function() {
@@ -639,8 +642,19 @@ export const __meta__ = {
                 backwardBtn = $(that.templates.scrollButton({ direction: backwardBtnIcon }));
                 forwardBtn = $(that.templates.scrollButton({ direction: forwardBtnIcon }));
 
-                backwardBtn.prependTo(that._scrollWrapper);
-                forwardBtn.appendTo(that._scrollWrapper);
+                switch (options.scrollable.scrollButtonsPosition) {
+                    case "start":
+                        forwardBtn.prependTo(that._scrollWrapper);
+                        backwardBtn.prependTo(that._scrollWrapper);
+                        break;
+                    case "end":
+                        backwardBtn.appendTo(that._scrollWrapper);
+                        forwardBtn.appendTo(that._scrollWrapper);
+                        break;
+                    default:
+                        backwardBtn.prependTo(that._scrollWrapper);
+                        forwardBtn.appendTo(that._scrollWrapper);
+                }
 
                 that._initScrolling(that.element, backwardBtn, forwardBtn, isHorizontal, isRtl);
 
@@ -687,7 +701,10 @@ export const __meta__ = {
         _reinitOverflow: function(options) {
             var that = this;
             var overflowChanged = ((options.scrollable && !that.options.scrollable) || (!options.scrollable && that.options.scrollable)) ||
-                (options.scrollable && that.options.scrollable && options.scrollable.distance != that.options.scrollable.distance) ||
+                (options.scrollable && that.options.scrollable && (
+                    options.scrollable.distance != that.options.scrollable.distance ||
+                    options.scrollable.scrollButtonsPosition != that.options.scrollable.scrollButtonsPosition
+                )) ||
                 options.orientation != that.options.orientation;
 
             if (overflowChanged) {
@@ -2306,6 +2323,8 @@ export const __meta__ = {
                     { field: "url" },
                     { field: "cssClass" },
                     { field: "spriteCssClass" },
+                    { field: "icon" },
+                    { field: "iconClass" },
                     { field: "imageUrl" },
                     { field: "imageAttr" },
                     { field: "attr" },
@@ -2485,15 +2504,21 @@ export const __meta__ = {
                 ),
                 itemWrapper: template((data) => {
                     var item = data.item;
+                    var iconPosition = this.options.iconPosition;
                     var url = fieldAccessor("url")(item);
                     var imageUrl = fieldAccessor("imageUrl")(item);
+                    var icon = fieldAccessor("icon")(item);
+                    var iconClass = fieldAccessor("iconClass")(item);
+                    var iconString = (icon ? kendo.ui.icon({ icon: icon, iconClass: iconClass }) : '' );
                     var imgAttributes = fieldAccessor("imageAttr")(item);
                     var tag = url ? 'a' : 'span';
 
                     return `<${tag} class='${rendering.textClass(item)}' role='none' ${url ? `href='${kendo.sanitizeLink(url)}'` : ''} >` +
                         (imageUrl ? `<img ${rendering.imageCssAttributes(imgAttributes)}  alt='' src='${imageUrl}' />` : '') +
+                        (iconPosition == "before" ? iconString : '') +
                         this.templates.sprite(item) +
                         this.options.template(data) +
+                        (iconPosition == "after" ? iconString : '') +
                         data.arrow(data) +
                         `</${tag}>`;
                 }),

Diff for: src/kendo.toolbar.js

@@ -962,10 +962,6 @@ export const __meta__ = {
             that.overflowMenu?.append(options);
             menuitem = that.overflowMenu.element.find(DOT + MENU_ITEM).last();
 
-            if (options.icon) {
-                menuitem.find(DOT + MENU_LINK).prepend(kendo.ui.icon(options.icon));
-            }
-
             if (component === "ToggleButton" || (component === "Button" && options.togglable === true)) {
                 menuitem.find(DOT + MENU_LINK).addClass(MENU_LINK_TOGGLE);
 

Diff for: tests/unit/menu/init.js

@@ -157,5 +157,74 @@ describe("menu init", function() {
 
         m.destroy();
     });
+});
+
+describe("menu icons", function() {
+
+    let menuElement;
+    let menu;
+
+    beforeEach(function() {
+        Mocha.fixture.append('<ul id="menu"></ul>');
+        menuElement = $("#menu");
+        menu = menuElement.kendoMenu({
+            iconPosition: "after",
+            dataSource: [
+                { text: "Item 1", icon: "gear", iconClass: "custom-gear-icon-class" },
+                { text: "Item 2", icon: "pencil" }
+            ]
+        }).data("kendoMenu");
+    });
+
+    afterEach(function() {
+        menu.destroy();
+        menuElement.remove();
+    });
+
+    it("applies icon classes if specified", function() {
+        assert.equal(menuElement.find('.k-icon.custom-gear-icon-class').length, 1);
+    });
+
+    it("places icons after text if iconPosition is 'after'", function() {
+        assert.equal(menuElement.find(".k-menu-link > .k-menu-link-text + .k-svg-i-gear").length, 1);
+    });
+});
 
+describe("menu scrollable", function() {
+    let menuElement;
+    let menu;
+
+    function initMenu(options) {
+        menu = menuElement.kendoMenu(options).data("kendoMenu");
+    }
+
+    beforeEach(function() {
+        Mocha.fixture.append(`<ul id="menu" style="width: 50px"> <li>Item 1</li>
+        <li>Item 2</li>
+        <li>Item 3</li></ul>`);
+        menuElement = $("#menu");
+    });
+
+    afterEach(function() {
+        menu.destroy();
+        menuElement.remove();
+    });
+
+    it("places scroll buttons at the start when scrollButtonsPosition is 'start'", function() {
+        initMenu({ scrollable: { scrollButtonsPosition: "start" } });
+        assert.isOk(menu.element.prev().prev().is(".k-menu-scroll-button-prev"));
+        assert.isOk(menu.element.prev().is(".k-menu-scroll-button-next"));
+    });
+
+    it("places scroll buttons at the end when scrollButtonsPosition is 'end'", function() {
+        initMenu({ scrollable: { scrollButtonsPosition: "end" } });
+        assert.isOk(menu.element.next().is(".k-menu-scroll-button-prev"));
+        assert.isOk(menu.element.next().next().is(".k-menu-scroll-button-next"));
+    });
+
+    it("places scroll buttons at the end when scrollButtonsPosition is 'split'", function() {
+        initMenu({ scrollable: { scrollButtonsPosition: "split" } });
+        assert.isOk(menu.element.prev().is(".k-menu-scroll-button-prev"));
+        assert.isOk(menu.element.next().is(".k-menu-scroll-button-next"));
+    });
 });