I've build a Magento 2 admin grid using ui-components.
But I don't want the default paging of 20, 30, 50, ….
I want my own values.
For example 1,2 and 3.
I remember that in a beta version I could have done this inside my ui-component grid file
<paging name="listing_paging">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="options" xsi:type="array">
<item name="1" xsi:type="array">
<item name="value" xsi:type="number">1</item>
<item name="label" xsi:type="string" translate="true">1</item>
</item>
<item name="2" xsi:type="array">
<item name="value" xsi:type="number">2</item>
<item name="label" xsi:type="string" translate="true">2</item>
</item>
<item name="3" xsi:type="array">
<item name="value" xsi:type="number">3</item>
<item name="label" xsi:type="string" translate="true">3</item>
</item>
</item>
</item>
</argument>
</paging>
But that doesn't work anymore.
Is there a way to do that in 2.1?
And as a bonus question, How can I allow or restrict the custom value option?
Best Answer
The Javascript that handles the amounts is in a different class:
js/grid/paging/sizes.js
. In that class, there is a list ofoptions
. There are two ways to do what you are going after. One approach is to extend the Javascript class and the second is to set the options with XML. The Javascript approach has some advantages, which are described below, but for what you described, the XML is the most succinct.XML Approach:
You need to use the same keys that are in the
defaults
object of thesizes
class. As a result, thename="xx"
looks strange. Also, note theminSize
andmaxSize
items. That will set the delimiters for the Custom value.Javascript Approach:
XML:
The
item name="config"
only needs to have the new component location:JS:
There are a few things to note on the Javascript above. Because the
defaults
are merged (or technically "extended"), the coreSizes.js
option's come along for the ride. Without deleting the core options, they would display in the list. This can be circumvented, however, if you declare 5 or more options and use the same keys as the core (example below). Obviously, doing that isn't as ideal when reading the code as it doesn't make a huge amount of sense.Minimal
defaults
:With this, no
initialize()
override is needed.Limiting Custom:
You have a few options here if you are extending the Javascript class. The easiest is to set
minSize
andmaxSize
to more limited values. Alternatively, you can override theapplyCustom()
method ornormalize()
(the latter is preferred) to add custom rules if needed.A note regarding state:
Beware of the
statefull
(sic) object. It adds that property to the list of what gets saved into the database. As you are working on this, check theui_bookmark
, and clean thecms_page_listing
for your user ID if necessary.