From 830bd2e6ccebd13e1b0139c48153d291f745ee20 Mon Sep 17 00:00:00 2001 From: harshil Date: Thu, 28 Jan 2021 10:00:05 +0000 Subject: [PATCH 1/5] ui-columncontrols-clarification-7730 --- .../components/ui-columnscontrols.md | 61 ++++++++++++++----- 1 file changed, 45 insertions(+), 16 deletions(-) diff --git a/src/guides/v2.3/ui_comp_guide/components/ui-columnscontrols.md b/src/guides/v2.3/ui_comp_guide/components/ui-columnscontrols.md index 82b2734d09e..6074312d8c8 100644 --- a/src/guides/v2.3/ui_comp_guide/components/ui-columnscontrols.md +++ b/src/guides/v2.3/ui_comp_guide/components/ui-columnscontrols.md @@ -25,22 +25,51 @@ Extends [`uiCollection`]({{ page.baseurl }}/ui_comp_guide/concepts/ui_comp_uicol ## Examples -### Add ColumnsControls component to Listing basic component - -```xml -- ... - - ... - - - 1 - 3 - - - - ... - +### You can simply change "minVisible" and "maxVisible" values in the JS file. + +For this, you have to override the vendor JS file in your custom module. + +vendor file js path : +/vendor/magento/module-ui/view/base/web/js/grid/controls/columns.js + +#### For override JS file follow step Below: + +#### First step : +/app/code/[VENDOR_NAME]/[MODULE_NAME]/view/base/requirejs-config.js + +```js + +var config = { + map: { + '*': { + 'Magento_Ui/js/grid/controls/columns':'VENDOR_NAME_MODULE_NAME/js/grid/controls/columns' + } + } +} + +``` + +#### Second step : +/app/code/[VENDOR_NAME]/[MODULE_NAME]/view/base/web/js/grid/controls/columns.js +(In this JS change "minVisible" and "maxVisible" values as per your requirement) + +```js +return Collection.extend({ + defaults: { + template: 'ui/grid/controls/columns', + minVisible: 1, + maxVisible: 4, + viewportSize: 18, + displayArea: 'dataGridActions', + columnsProvider: 'ns = ${ $.ns }, componentType = columns', + imports: { + addColumns: '${ $.columnsProvider }:elems' + }, + templates: { + headerMsg: $t('${ $.visible } out of ${ $.total } visible') + } + } + }); ``` #### Result From e9b2f45e76607b99bf9be76bec00a828a57f9dfd Mon Sep 17 00:00:00 2001 From: Santosh Yadav Date: Mon, 1 Feb 2021 14:49:00 +0530 Subject: [PATCH 2/5] fix some issue of Ui-columnscontrols-clarification-7730 --- .../v2.3/ui_comp_guide/components/ui-columnscontrols.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/guides/v2.3/ui_comp_guide/components/ui-columnscontrols.md b/src/guides/v2.3/ui_comp_guide/components/ui-columnscontrols.md index 6074312d8c8..e4b573e0dd7 100644 --- a/src/guides/v2.3/ui_comp_guide/components/ui-columnscontrols.md +++ b/src/guides/v2.3/ui_comp_guide/components/ui-columnscontrols.md @@ -32,12 +32,12 @@ For this, you have to override the vendor JS file in your custom module. vendor file js path : /vendor/magento/module-ui/view/base/web/js/grid/controls/columns.js -#### For override JS file follow step Below: +#### For override JS file follow step Below: -#### First step : +#### First step : /app/code/[VENDOR_NAME]/[MODULE_NAME]/view/base/requirejs-config.js -```js +```js var config = { map: { From b99e3d6a416683005a892936532ede73793ef279 Mon Sep 17 00:00:00 2001 From: Santosh Yadav Date: Mon, 1 Feb 2021 16:09:22 +0530 Subject: [PATCH 3/5] changes as reviewer request --- .../v2.3/ui_comp_guide/components/ui-columnscontrols.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/guides/v2.3/ui_comp_guide/components/ui-columnscontrols.md b/src/guides/v2.3/ui_comp_guide/components/ui-columnscontrols.md index e4b573e0dd7..a3a898c9a4a 100644 --- a/src/guides/v2.3/ui_comp_guide/components/ui-columnscontrols.md +++ b/src/guides/v2.3/ui_comp_guide/components/ui-columnscontrols.md @@ -25,14 +25,14 @@ Extends [`uiCollection`]({{ page.baseurl }}/ui_comp_guide/concepts/ui_comp_uicol ## Examples -### You can simply change "minVisible" and "maxVisible" values in the JS file. +### Change "minVisible" and "maxVisible" values in the JS file. For this, you have to override the vendor JS file in your custom module. vendor file js path : /vendor/magento/module-ui/view/base/web/js/grid/controls/columns.js -#### For override JS file follow step Below: +#### To override the JS file follow the step below: #### First step : /app/code/[VENDOR_NAME]/[MODULE_NAME]/view/base/requirejs-config.js From 7b241e2053420fc4363f4d17bcfe308ecdb8d940 Mon Sep 17 00:00:00 2001 From: Donald Booth Date: Tue, 2 Feb 2021 07:31:57 -0500 Subject: [PATCH 4/5] Formatting update --- .../components/ui-columnscontrols.md | 22 ++++++++----------- 1 file changed, 9 insertions(+), 13 deletions(-) diff --git a/src/guides/v2.3/ui_comp_guide/components/ui-columnscontrols.md b/src/guides/v2.3/ui_comp_guide/components/ui-columnscontrols.md index a3a898c9a4a..47039940147 100644 --- a/src/guides/v2.3/ui_comp_guide/components/ui-columnscontrols.md +++ b/src/guides/v2.3/ui_comp_guide/components/ui-columnscontrols.md @@ -25,20 +25,17 @@ Extends [`uiCollection`]({{ page.baseurl }}/ui_comp_guide/concepts/ui_comp_uicol ## Examples -### Change "minVisible" and "maxVisible" values in the JS file. +### Changing "minVisible" and "maxVisible" values in the javascript file. -For this, you have to override the vendor JS file in your custom module. +For this, you have to override the vendor JS file in your custom module: -vendor file js path : -/vendor/magento/module-ui/view/base/web/js/grid/controls/columns.js +`/vendor/magento/module-ui/view/base/web/js/grid/controls/columns.js` -#### To override the JS file follow the step below: +#### Step one: override the javascript file -#### First step : -/app/code/[VENDOR_NAME]/[MODULE_NAME]/view/base/requirejs-config.js - -```js +In `/app/code/[VENDOR_NAME]/[MODULE_NAME]/view/base/requirejs-config.js`, add the following: +```javascript var config = { map: { '*': { @@ -46,12 +43,11 @@ var config = { } } } - ``` -#### Second step : -/app/code/[VENDOR_NAME]/[MODULE_NAME]/view/base/web/js/grid/controls/columns.js -(In this JS change "minVisible" and "maxVisible" values as per your requirement) +#### Step two: set the custom values + +In `/app/code/[VENDOR_NAME]/[MODULE_NAME]/view/base/web/js/grid/controls/columns.js`, change the "minVisible" and "maxVisible" values as per your requirement: ```js return Collection.extend({ From 7336b71bc3e44d1bda0196b4ff3875a30d3e7aa9 Mon Sep 17 00:00:00 2001 From: Donald Booth Date: Thu, 11 Feb 2021 07:25:28 -0500 Subject: [PATCH 5/5] Small grammar update --- .../v2.3/ui_comp_guide/components/ui-columnscontrols.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/guides/v2.3/ui_comp_guide/components/ui-columnscontrols.md b/src/guides/v2.3/ui_comp_guide/components/ui-columnscontrols.md index 47039940147..45c3da723f2 100644 --- a/src/guides/v2.3/ui_comp_guide/components/ui-columnscontrols.md +++ b/src/guides/v2.3/ui_comp_guide/components/ui-columnscontrols.md @@ -23,11 +23,11 @@ Extends [`uiCollection`]({{ page.baseurl }}/ui_comp_guide/concepts/ui_comp_uicol * [`app/code/Magento/Ui/view/base/web/js/grid/controls/columns.js`]({{ site.mage2bloburl }}/{{ page.guide_version }}/app/code/Magento/Ui/view/base/web/js/grid/controls/columns.js) * [`app/code/Magento/Ui/view/base/web/templates/grid/controls/columns.html`]({{ site.mage2bloburl }}/{{ page.guide_version }}/app/code/Magento/Ui/view/base/web/templates/grid/controls/columns.html) -## Examples +## Example ### Changing "minVisible" and "maxVisible" values in the javascript file. -For this, you have to override the vendor JS file in your custom module: +To change attribute values, override the vendor JS file in a custom module: `/vendor/magento/module-ui/view/base/web/js/grid/controls/columns.js` @@ -47,7 +47,7 @@ var config = { #### Step two: set the custom values -In `/app/code/[VENDOR_NAME]/[MODULE_NAME]/view/base/web/js/grid/controls/columns.js`, change the "minVisible" and "maxVisible" values as per your requirement: +In `/app/code/[VENDOR_NAME]/[MODULE_NAME]/view/base/web/js/grid/controls/columns.js`, change the "minVisible" and "maxVisible" values as needed: ```js return Collection.extend({