diff --git a/_data/toc/javascript-developer-guide.yml b/_data/toc/javascript-developer-guide.yml index 766187c7430..0f3ff4f09de 100644 --- a/_data/toc/javascript-developer-guide.yml +++ b/_data/toc/javascript-developer-guide.yml @@ -82,6 +82,9 @@ pages: - label: Modal widget url: /javascript-dev-guide/widgets/widget_modal.html + - label: Multiselect widget + url: /javascript-dev-guide/widgets/widget-multiselect.html + - label: Navigation widget url: /javascript-dev-guide/widgets/widget_navigation.html diff --git a/common/images/widget/multiselect-widget-result.png b/common/images/widget/multiselect-widget-result.png new file mode 100644 index 00000000000..245e7418076 Binary files /dev/null and b/common/images/widget/multiselect-widget-result.png differ diff --git a/guides/v2.2/javascript-dev-guide/widgets/jquery-widgets-about.md b/guides/v2.2/javascript-dev-guide/widgets/jquery-widgets-about.md index b97816981b5..b1cfab274d7 100644 --- a/guides/v2.2/javascript-dev-guide/widgets/jquery-widgets-about.md +++ b/guides/v2.2/javascript-dev-guide/widgets/jquery-widgets-about.md @@ -20,6 +20,7 @@ This guide discusses the following widgets: - [Loader widget] - [Menu widget] - [Modal widget] +- [Multiselect widget] - [Navigation widget] - [PasswordStrengthIndicator widget] - [PopupWindow widget] @@ -50,6 +51,7 @@ Magento out of the box does not contain jQuery UI styles. Also, it is not recomm [Loader widget]: {{page.baseurl}}/javascript-dev-guide/widgets/widget_loader.html [Menu widget]: {{page.baseurl}}/javascript-dev-guide/widgets/widget_menu.html [Modal widget]: {{page.baseurl}}/javascript-dev-guide/widgets/widget_modal.html +[Multiselect widget]: {{page.baseurl}}/javascript-dev-guide/widgets/widget-multiselect.html [Navigation widget]: {{page.baseurl}}/javascript-dev-guide/widgets/widget_navigation.html [PasswordStrengthIndicator widget]: {{page.baseurl}}/javascript-dev-guide/widgets/widget_password_strength_indicator.html [PopupWindow widget]: {{page.baseurl}}/javascript-dev-guide/widgets/widget-popup-window.html diff --git a/guides/v2.2/javascript-dev-guide/widgets/widget-multiselect.md b/guides/v2.2/javascript-dev-guide/widgets/widget-multiselect.md new file mode 100644 index 00000000000..cf4ac6b1c2a --- /dev/null +++ b/guides/v2.2/javascript-dev-guide/widgets/widget-multiselect.md @@ -0,0 +1,158 @@ +--- +group: javascript-developer-guide +title: Multiselect widget +contributor_name: Atwix +contributor_link: https://www.atwix.com/ +--- + +This [widget](https://glossary.magento.com/widget/) enables multiple select capability in the search field to help users choose different options. + +The Multiselect widget source is the [lib/web/mage/multiselect.js][] file. + +## Initialize the Multiselect widget + +For information about how to initialize a widget in a JS component or `.phtml` template, see the [Initialize JavaScript][] topic. + +The following example shows how to instantiate the Multiselect widget: + +```javascript +$("#multiselect").multiselect2({}); +``` + +Where: + +- `#multiselect` is the selector of the select element for which Multiselect is initialized. + +Phtml template file examples using script: + +```html + +``` + +## Options + +The RedirectUrl widget has the following options: + +- [mselectContainer](#mselectcontainer) +- [mselectItemsWrapperClass](#mselectitemswrapperclass) +- [mselectCheckedClass](#mselectcheckedclass) +- [containerClass](#containerclass) +- [searchInputClass](#searchinputclass) +- [selectedItemsCountClass](#selecteditemscountclass) +- [currentPage](#currentpage) +- [lastAppendValue](#lastappendvalue) +- [updateDelay](#updatedelay) + +### `mselectContainer` + +Multiselect container selector. + +**Type**: String + +**Default value**: `'section.mselect-list'` + +### `mselectItemsWrapperClass` + +Multiselect items wrapper class. + +**Type**: String + +**Default value**: `'mselect-items-wrapper'` + +### `mselectCheckedClass` + +The class which is attached to a checked multi-select item. + +**Type**: String + +**Default value**: `'mselect-checked'` + +### `containerClass` + +The class which is attached to the container with [multi-select container selector](#mselectcontainer). + +**Type**: String + +**Default value**: `'paginated'` + +### `searchInputClass` + +Class of the search input. + +**Type**: String + +**Default value**: `'admin__action-multiselect-search'` + +### `selectedItemsCountClass` + +Class of the selected items counter. + +**Type**: String + +**Default value**: `'admin__action-multiselect-search'` + +### `currentPage` + +Current page of multi-select items. + +**Type**: Integer + +**Default value**: `1` + +### `lastAppendValue` + +The value of the last added multi-select item. + +**Type**: Integer, String + +**Default value**: `0` + +### `updateDelay` + +The search field update delay. + +**Type**: Integer, String + +**Default value**: `0` + +## Code sample + +The following example shows the multiselect field with search bar and **Add new value** button. + +```html +
+ + +
+``` + +## Result + +As a result, we see the multiselect field with search bar and **Add new value** button. +You can now search for an option in the search bar and the **Add new value** button allows you to add a new option to the multiselect feature. + +![Multiselect Widget Example]({{ site.baseurl }}/common/images/widget/multiselect-widget-result.png) + + +[lib/web/mage/multiselect.js]: {{ site.mage2bloburl }}/{{ page.guide_version }}/lib/web/mage/multiselect.js +[Initialize JavaScript]: {{page.baseurl}}/javascript-dev-guide/javascript/js_init.html diff --git a/guides/v2.3/javascript-dev-guide/widgets/widget-multiselect.md b/guides/v2.3/javascript-dev-guide/widgets/widget-multiselect.md new file mode 120000 index 00000000000..58cadbb5c03 --- /dev/null +++ b/guides/v2.3/javascript-dev-guide/widgets/widget-multiselect.md @@ -0,0 +1 @@ +../../../v2.2/javascript-dev-guide/widgets/widget-multiselect.md \ No newline at end of file