From 5356b45041f5cb425830cf3503a6a14285028cc8 Mon Sep 17 00:00:00 2001 From: Sergiy Zhovnir Date: Wed, 11 Sep 2019 09:12:21 +0300 Subject: [PATCH 1/5] Added the information about nextPageUrl option and added the Methods section --- .../widgets/widget-multiselect.md | 108 ++++++++++++++++++ 1 file changed, 108 insertions(+) diff --git a/guides/v2.2/javascript-dev-guide/widgets/widget-multiselect.md b/guides/v2.2/javascript-dev-guide/widgets/widget-multiselect.md index cf4ac6b1c2a..79c060713ce 100644 --- a/guides/v2.2/javascript-dev-guide/widgets/widget-multiselect.md +++ b/guides/v2.2/javascript-dev-guide/widgets/widget-multiselect.md @@ -51,6 +51,7 @@ The RedirectUrl widget has the following options: - [currentPage](#currentpage) - [lastAppendValue](#lastappendvalue) - [updateDelay](#updatedelay) +- [nextPageUrl](#nextpageurl) ### `mselectContainer` @@ -124,6 +125,112 @@ The search field update delay. **Default value**: `0` +### `nextPageUrl` + +The url of the controller or API which should return the JSON response like the following: + +```json +{ + "success": true, + "errorMessage": "", + "result": [ + { + "value": "1", + "label": "Multi-select item label #1" + }, + { + "value": "2", + "label": "Multi-select item label #2" + } + ] +} +``` + +The example of the controller: [`/Controller/Adminhtml/Rule/AjaxLoadRates.php`][] + +**Type**: String + +**Default value**: `undefined` + +## Methods + +The Multiselect methods are the following: + +- [getCurrentPage()](#getcurrentpage) +- [setCurrentPage()](#setcurrentpage) +- [isOptionsLoaded()](#isoptionsloaded) +- [clearMultiselectOptions()](#clearmultiselectoptions) +- [appendOptions()](#appendoptions) +- [loadOptions()](#loadoptions) +- [getSearchCriteria()](#getsearchcriteria) + +### `getCurrentPage()` + +The method returns the number of the current page. + +```javascript +$('#multiselect').multiselect2('getCurrentPage'); +``` + +### `setCurrentPage(page)` + +The method configures the current page number. + +```javascript +$('#multiselect').multiselect2('setCurrentPage', 2); +``` + +### `isOptionsLoaded(options)` + +The method checks if all multi-select items are already loaded. + +```javascript +$('#multiselect').multiselect2('isOptionsLoaded', [{"value": "2", "label": "Label #2"}]); +``` + +This method returns `true` if multiple selection items are loaded, and it returns `false` if they are not loaded. + +### `clearMultiselectOptions()` + +The method clears all multi-select items. + +Code example: + +```javascript +$('#multiselect').multiselect2('clearMultiselectOptions'); +``` + +### `appendOptions(options)` + +The method appends multi-select items to the multi-select. + +Code example: + +```javascript +$('#multiselect').multiselect2('appendOptions', [{"value": "1", "label": "Label #1"}, {"value": "2", "label": "Label #2"}]); +``` + +### `loadOptions()` + +The method loads the next page with multi-select items from [nextPageUrl](#nextpageurl) according to the [search criteria](#getsearchcriteria). +The multi-select items from the Ajax response are appended to the multi-select. + +Code example: + +```javascript +$('#multiselect').multiselect2('loadOptions'); +``` + +### `getSearchCriteria()` + +The method returns the trimmed value of the search input. + +Code example: + +```javascript +$('#multiselect').multiselect2('getSearchCriteria'); +``` + ## Code sample The following example shows the multiselect field with search bar and **Add new value** button. @@ -156,3 +263,4 @@ You can now search for an option in the search bar and the **Add new value** but [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 +[`/Controller/Adminhtml/Rule/AjaxLoadRates.php`]: {{ site.mage2bloburl }}/{{ page.guide_version }}/app/code/Magento/Tax/Controller/Adminhtml/Rule/AjaxLoadRates.php From 97373249c139844a672b23500c02be7a7afe8322 Mon Sep 17 00:00:00 2001 From: Sergiy Zhovnir Date: Wed, 11 Sep 2019 13:51:58 +0300 Subject: [PATCH 2/5] Adjusted the description for clearMultiselectOptions() method --- guides/v2.2/javascript-dev-guide/widgets/widget-multiselect.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/guides/v2.2/javascript-dev-guide/widgets/widget-multiselect.md b/guides/v2.2/javascript-dev-guide/widgets/widget-multiselect.md index 79c060713ce..e42e5e4d48b 100644 --- a/guides/v2.2/javascript-dev-guide/widgets/widget-multiselect.md +++ b/guides/v2.2/javascript-dev-guide/widgets/widget-multiselect.md @@ -192,7 +192,7 @@ This method returns `true` if multiple selection items are loaded, and it return ### `clearMultiselectOptions()` -The method clears all multi-select items. +The method removes all multi-select items. Code example: From 0c0e8fde25a0e69c7ad149771fc55de3e769c34d Mon Sep 17 00:00:00 2001 From: Sergiy Zhovnir Date: Thu, 12 Sep 2019 22:55:32 +0300 Subject: [PATCH 3/5] Sorted the list of options and methods alphabetically --- .../widgets/widget-multiselect.md | 158 +++++++++--------- 1 file changed, 79 insertions(+), 79 deletions(-) diff --git a/guides/v2.2/javascript-dev-guide/widgets/widget-multiselect.md b/guides/v2.2/javascript-dev-guide/widgets/widget-multiselect.md index e42e5e4d48b..9d48a8f1818 100644 --- a/guides/v2.2/javascript-dev-guide/widgets/widget-multiselect.md +++ b/guides/v2.2/javascript-dev-guide/widgets/widget-multiselect.md @@ -42,40 +42,16 @@ Phtml template file examples using script: The RedirectUrl widget has the following options: +- [containerClass](#containerclass) +- [currentPage](#currentpage) +- [lastAppendValue](#lastappendvalue) +- [mselectCheckedClass](#mselectcheckedclass) - [mselectContainer](#mselectcontainer) - [mselectItemsWrapperClass](#mselectitemswrapperclass) -- [mselectCheckedClass](#mselectcheckedclass) -- [containerClass](#containerclass) +- [nextPageUrl](#nextpageurl) - [searchInputClass](#searchinputclass) - [selectedItemsCountClass](#selecteditemscountclass) -- [currentPage](#currentpage) -- [lastAppendValue](#lastappendvalue) - [updateDelay](#updatedelay) -- [nextPageUrl](#nextpageurl) - -### `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` @@ -85,22 +61,6 @@ The class which is attached to the container with [multi-select container select **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. @@ -117,13 +77,29 @@ The value of the last added multi-select item. **Default value**: `0` -### `updateDelay` +### `mselectCheckedClass` -The search field update delay. +The class which is attached to a checked multi-select item. -**Type**: Integer, String +**Type**: String -**Default value**: `0` +**Default value**: `'mselect-checked'` + +### `mselectContainer` + +Multiselect container selector. + +**Type**: String + +**Default value**: `'section.mselect-list'` + +### `mselectItemsWrapperClass` + +Multiselect items wrapper class. + +**Type**: String + +**Default value**: `'mselect-items-wrapper'` ### `nextPageUrl` @@ -146,73 +122,99 @@ The url of the controller or API which should return the JSON response like the } ``` -The example of the controller: [`/Controller/Adminhtml/Rule/AjaxLoadRates.php`][] +The example of the controller: [`/Controller/Adminhtml/Rule/AjaxLoadRates.php`][] **Type**: String **Default value**: `undefined` +### `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'` + +### `updateDelay` + +The search field update delay. + +**Type**: Integer, String + +**Default value**: `0` + ## Methods The Multiselect methods are the following: +- [appendOptions()](#appendoptions) +- [clearMultiselectOptions()](#clearmultiselectoptions) - [getCurrentPage()](#getcurrentpage) -- [setCurrentPage()](#setcurrentpage) +- [getSearchCriteria()](#getsearchcriteria) - [isOptionsLoaded()](#isoptionsloaded) -- [clearMultiselectOptions()](#clearmultiselectoptions) -- [appendOptions()](#appendoptions) - [loadOptions()](#loadoptions) -- [getSearchCriteria()](#getsearchcriteria) +- [setCurrentPage()](#setcurrentpage) -### `getCurrentPage()` +### `appendOptions(options)` -The method returns the number of the current page. +The method appends multi-select items to the multi-select. + +Code example: ```javascript -$('#multiselect').multiselect2('getCurrentPage'); +$('#multiselect').multiselect2('appendOptions', [{"value": "1", "label": "Label #1"}, {"value": "2", "label": "Label #2"}]); ``` -### `setCurrentPage(page)` +### `clearMultiselectOptions()` -The method configures the current page number. +The method removes all multi-select items. + +Code example: ```javascript -$('#multiselect').multiselect2('setCurrentPage', 2); +$('#multiselect').multiselect2('clearMultiselectOptions'); ``` -### `isOptionsLoaded(options)` +### `getCurrentPage()` -The method checks if all multi-select items are already loaded. +The method returns the number of the current page. ```javascript -$('#multiselect').multiselect2('isOptionsLoaded', [{"value": "2", "label": "Label #2"}]); +$('#multiselect').multiselect2('getCurrentPage'); ``` -This method returns `true` if multiple selection items are loaded, and it returns `false` if they are not loaded. - -### `clearMultiselectOptions()` +### `getSearchCriteria()` -The method removes all multi-select items. +The method returns the trimmed value of the search input. Code example: ```javascript -$('#multiselect').multiselect2('clearMultiselectOptions'); +$('#multiselect').multiselect2('getSearchCriteria'); ``` -### `appendOptions(options)` - -The method appends multi-select items to the multi-select. +### `isOptionsLoaded(options)` -Code example: +The method checks if all multi-select items are already loaded. ```javascript -$('#multiselect').multiselect2('appendOptions', [{"value": "1", "label": "Label #1"}, {"value": "2", "label": "Label #2"}]); +$('#multiselect').multiselect2('isOptionsLoaded', [{"value": "2", "label": "Label #2"}]); ``` +This method returns `true` if multiple selection items are loaded, and it returns `false` if they are not loaded. + ### `loadOptions()` -The method loads the next page with multi-select items from [nextPageUrl](#nextpageurl) according to the [search criteria](#getsearchcriteria). +The method loads the next page with multi-select items from [nextPageUrl](#nextpageurl) according to the [search criteria](#getsearchcriteria). The multi-select items from the Ajax response are appended to the multi-select. Code example: @@ -221,14 +223,12 @@ Code example: $('#multiselect').multiselect2('loadOptions'); ``` -### `getSearchCriteria()` - -The method returns the trimmed value of the search input. +### `setCurrentPage(page)` -Code example: +The method configures the current page number. ```javascript -$('#multiselect').multiselect2('getSearchCriteria'); +$('#multiselect').multiselect2('setCurrentPage', 2); ``` ## Code sample From 263186b5c1d8e1bb33934a143495259ff133ccc2 Mon Sep 17 00:00:00 2001 From: Donald Booth Date: Thu, 19 Sep 2019 09:24:33 -0500 Subject: [PATCH 4/5] Small formatting changes. --- .../widgets/widget-multiselect.md | 28 +++++++++---------- 1 file changed, 13 insertions(+), 15 deletions(-) diff --git a/guides/v2.2/javascript-dev-guide/widgets/widget-multiselect.md b/guides/v2.2/javascript-dev-guide/widgets/widget-multiselect.md index c41de89570e..b8849e40df9 100644 --- a/guides/v2.2/javascript-dev-guide/widgets/widget-multiselect.md +++ b/guides/v2.2/javascript-dev-guide/widgets/widget-multiselect.md @@ -19,9 +19,7 @@ The following example shows how to instantiate the Multiselect widget: $("#multiselect").multiselect2({}); ``` -Where: - -- `#multiselect` is the selector of the select element for which Multiselect is initialized. +where `#multiselect` is the selector of the select element for which Multiselect is initialized. The following example shows a PHTML file using the script: @@ -42,16 +40,16 @@ The following example shows a PHTML file using the script: The RedirectUrl widget has the following options: -- [containerClass](#containerclass) -- [currentPage](#currentpage) -- [lastAppendValue](#lastappendvalue) -- [mselectCheckedClass](#mselectcheckedclass) -- [mselectContainer](#mselectcontainer) -- [mselectItemsWrapperClass](#mselectitemswrapperclass) -- [nextPageUrl](#nextpageurl) -- [searchInputClass](#searchinputclass) -- [selectedItemsCountClass](#selecteditemscountclass) -- [updateDelay](#updatedelay) +- [containerClass](#containerclass) +- [currentPage](#currentpage) +- [lastAppendValue](#lastappendvalue) +- [mselectCheckedClass](#mselectcheckedclass) +- [mselectContainer](#mselectcontainer) +- [mselectItemsWrapperClass](#mselectitemswrapperclass) +- [nextPageUrl](#nextpageurl) +- [searchInputClass](#searchinputclass) +- [selectedItemsCountClass](#selecteditemscountclass) +- [updateDelay](#updatedelay) ### `containerClass` @@ -103,7 +101,7 @@ Multiselect items wrapper class. ### `nextPageUrl` -The url of the controller or API which should return the JSON response like the following: +The url of the controller or API which returns the JSON response. ```json { @@ -122,7 +120,7 @@ The url of the controller or API which should return the JSON response like the } ``` -The example of the controller: [`/Controller/Adminhtml/Rule/AjaxLoadRates.php`][] +An example of the controller: [`/Controller/Adminhtml/Rule/AjaxLoadRates.php`][] **Type**: String From 07bc0defe89d297edabb8006c79a135c4a93e129 Mon Sep 17 00:00:00 2001 From: Donald Booth Date: Thu, 19 Sep 2019 10:00:47 -0500 Subject: [PATCH 5/5] Fixed anchor name headers --- .../widgets/widget-multiselect.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/guides/v2.2/javascript-dev-guide/widgets/widget-multiselect.md b/guides/v2.2/javascript-dev-guide/widgets/widget-multiselect.md index b8849e40df9..605013423c7 100644 --- a/guides/v2.2/javascript-dev-guide/widgets/widget-multiselect.md +++ b/guides/v2.2/javascript-dev-guide/widgets/widget-multiselect.md @@ -162,7 +162,7 @@ The Multiselect methods are the following: - [loadOptions()](#loadoptions) - [setCurrentPage()](#setcurrentpage) -### `appendOptions(options)` +### `appendOptions` The method appends multi-select items to the multi-select. @@ -172,7 +172,7 @@ Code example: $('#multiselect').multiselect2('appendOptions', [{"value": "1", "label": "Label #1"}, {"value": "2", "label": "Label #2"}]); ``` -### `clearMultiselectOptions()` +### `clearMultiselectOptions` The method removes all multi-select items. @@ -182,7 +182,7 @@ Code example: $('#multiselect').multiselect2('clearMultiselectOptions'); ``` -### `getCurrentPage()` +### `getCurrentPage` The method returns the number of the current page. @@ -190,7 +190,7 @@ The method returns the number of the current page. $('#multiselect').multiselect2('getCurrentPage'); ``` -### `getSearchCriteria()` +### `getSearchCriteria` The method returns the trimmed value of the search input. @@ -200,7 +200,7 @@ Code example: $('#multiselect').multiselect2('getSearchCriteria'); ``` -### `isOptionsLoaded(options)` +### `isOptionsLoaded` The method checks if all multi-select items are already loaded. @@ -210,7 +210,7 @@ $('#multiselect').multiselect2('isOptionsLoaded', [{"value": "2", "label": "Labe This method returns `true` if multiple selection items are loaded, and it returns `false` if they are not loaded. -### `loadOptions()` +### `loadOptions` The method loads the next page with multi-select items from [nextPageUrl](#nextpageurl) according to the [search criteria](#getsearchcriteria). The multi-select items from the Ajax response are appended to the multi-select. @@ -221,7 +221,7 @@ Code example: $('#multiselect').multiselect2('loadOptions'); ``` -### `setCurrentPage(page)` +### `setCurrentPage` The method configures the current page number.