0

I want to ask if there is a way to override the per page drop down for all pages in magento 2 admin. I want to override this and even I add a custom page in the admin, it will still be implemented. enter image description here

Thanks in advance, Help to be appreciated

0

The default values are stored here in this file :

vendor/magento/module-ui/view/base/web/js/grid/paging/sizes.js

Override the file and you should be good :)

| improve this answer | |
0

You can create your Backend theme. You can check this for reference how you can create custom backend theme in Magento 2 here. I've created one sample here.

Then after you can override this JS file in your adminhtml theme.

vendor/magento/module-ui/view/base/web/js/grid/paging/sizes.js

You can add that here in your custom theme

app/design/adminhtml/Vendor/Theme/Magento_Ui/web/js/grid/paging/sizes.js

Content for this file is..

/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

/**
 * @api
 */
define([
    'ko',
    'underscore',
    'mageUtils',
    'uiElement'
], function (ko, _, utils, Element) {
    'use strict';

    return Element.extend({
        defaults: {
            template: 'ui/grid/paging/sizes',
            minSize: 1,
            maxSize: 999,
            value: 12,
            listens: {
                value: 'onValueChange',
                options: 'onSizesChange'
            },
            options: {
                '12': {
                    value: 12,
                    label: 12
                },
                '23': {
                    value: 23,
                    label: 23
                },
                '35': {
                    value: 35,
                    label: 35
                }
            },
            excludedOptions: ['20', '30', '50', '100'],
            statefull: {
                options: false
            }
        },

        /**
         * Initializes sizes component.
         *
         * @returns {Sizes} Chainable.
         */
        initialize: function () {
            this._super()
                .updateArray();

            return this;
        },

        /**
         * Initializes observable properties.
         *
         * @returns {Sizes} Chainable.
         */
        initObservable: function () {
            this._super()
                .track([
                    'value',
                    'editing',
                    'customVisible',
                    'customValue'
                ])
                .track({
                    optionsArray: []
                });

            this._value = ko.pureComputed({
                read: ko.getObservable(this, 'value'),

                /**
                 * Validates input field prior to updating 'value' property.
                 */
                write: function (value) {
                    value = this.normalize(value);

                    this.value = value;
                    this._value.notifySubscribers(value);
                },

                owner: this
            });

            return this;
        },

        /**
         * Starts editing of the specified size.
         *
         * @param {Number} value - Value of the size.
         * @returns {Sizes} Chainable.
         */
        edit: function (value) {
            this.editing = value;

            return this;
        },

        /**
         * Discards changes made to the currently editable size.
         *
         * @returns {Sizes} Chainable.
         */
        discardEditing: function () {
            var value = this.editing;

            if (value) {
                this.updateSize(value, value);
            }

            return this;
        },

        /**
         * Invokes 'discardEditing' and 'discardCustom' actions.
         *
         * @returns {Sizes} Chainable.
         */
        discardAll: function () {
            this.discardEditing()
                .discardCustom();

            return this;
        },

        /**
         * Returns value of the first size.
         *
         * @returns {Number}
         */
        getFirst: function () {
            return this.optionsArray[0].value;
        },

        /**
         * Returns size which matches specified value.
         *
         * @param {Number} value - Value of the item.
         * @returns {Object|Undefined}
         */
        getSize: function (value) {
            return this.options[value];
        },

        /**
         * Sets current size to the specified value.
         *
         * @param {Number} value - Value of the size.
         * @returns {Sizes} Chainable.
         */
        setSize: function (value) {
            this.value = value;

            return this;
        },

        /**
         * Adds a new value to sizes list.
         *
         * @param {Number} value - Value to be added.
         * @returns {Sizes} Chainable.
         */
        addSize: function (value) {
            var size;

            if (!this.hasSize(value)) {
                size = this.createSize(value);

                this.set('options.' + value, size);
            }

            return this;
        },

        /**
         * Removes provided value from the sizes list.
         *
         * @param {Number} value - Value to be removed.
         * @returns {Sizes} Chainable.
         */
        removeSize: function (value) {
            if (!this.hasSize(value)) {
                return this;
            }

            this.remove('options.' + value);

            if (this.isSelected(value)) {
                this.setSize(this.getFirst());
            }

            return this;
        },

        /**
         * Updates existing value to the provided one. If new value
         * is not specified, then sizes' '_value' property will be taken.
         *
         * @param {Number} value - Existing value that should be updated.
         * @param {(Number|String)} [newValue=size._value] - New size value.
         * @returns {Sizes} Chainable.
         */
        updateSize: function (value, newValue) {
            var size = this.getSize(value);

            if (!size) {
                return this;
            }

            newValue = newValue || size._value;

            if (isNaN(+newValue)) {
                this.discardEditing();

                return this;
            }

            newValue = this.normalize(newValue);

            this.remove('options.' + value)
                .addSize(newValue);

            if (this.isSelected(value)) {
                this.setSize(newValue);
            }

            return this;
        },

        /**
         * Creates new editable size instance with the provided value.
         *
         * @param {Number} value - Value of the size.
         * @returns {Object}
         */
        createSize: function (value) {
            return {
                value: value,
                label: value,
                _value: value,
                editable: true
            };
        },

        /**
         * Checks if provided value exists in the sizes list.
         *
         * @param {Number} value - Value to be checked.
         * @returns {Boolean}
         */
        hasSize: function (value) {
            return !!this.getSize(value);
        },

        /**
         * Hides and clears custom field.
         *
         * @returns {Sizes} Chainable.
         */
        discardCustom: function () {
            this.hideCustom()
                .clearCustom();

            return this;
        },

        /**
         * Shows custom field.
         *
         * @returns {Sizes} Chainable.
         */
        showCustom: function () {
            this.customVisible = true;

            return this;
        },

        /**
         * Hides custom field.
         *
         * @returns {Sizes} Chainable.
         */
        hideCustom: function () {
            this.customVisible = false;

            return this;
        },

        /**
         * Empties value of the custom field.
         *
         * @returns {Sizes} Chainable.
         */
        clearCustom: function () {
            this.customValue = '';

            return this;
        },

        /**
         * Adds a new size specified in the custom field.
         *
         * @returns {Sizes} Chainable.
         */
        applyCustom: function () {
            var value = this.customValue;

            value = this.normalize(value);

            this.addSize(value)
                .setSize(value)
                .discardCustom();

            return this;
        },

        /**
         * Checks if custom field is visible.
         *
         * @returns {Boolean}
         */
        isCustomVisible: function () {
            return this.customVisible;
        },

        /**
         * Converts provided value to a number and puts
         * it in range between 'minSize' and 'maxSize' properties.
         *
         * @param {(Number|String)} value - Value to be normalized.
         * @returns {Number}
         */
        normalize: function (value) {
            value = +value;

            if (isNaN(value)) {
                return this.getFirst();
            }

            return utils.inRange(Math.round(value), this.minSize, this.maxSize);
        },

        /**
         * Updates the array of options.
         *
         * @returns {Sizes} Chainable.
         */
        updateArray: function () {
            var array = _.values(this.options);

            this.optionsArray = _.sortBy(array, 'value');

            return this;
        },

        /**
         * Checks if provided value is in editing state.
         *
         * @param {Number} value - Value to be checked.
         * @returns {Boolean}
         */
        isEditing: function (value) {
            return this.editing === value;
        },

        /**
         * Checks if provided value is selected.
         *
         * @param {Number} value - Value to be checked.
         * @returns {Boolean}
         */
        isSelected: function (value) {
            return this.value === value;
        },

        /**
         * Listener of the 'value' property changes.
         */
        onValueChange: function () {
            this.discardAll()
                .trigger('close');
        },

        /**
         * Listener of the 'options' object changes.
         */
        onSizesChange: function () {
            this.editing = false;

            this.updateArray();
        }
    });
});

You can define your custom options in JS file and you can also define what options you want to exclude like this

defaults: {
    options: {
        '12': {
            value: 12,
            label: 12
        },
        '23': {
            value: 23,
            label: 23
        },
        '35': {
            value: 35,
            label: 35
        }
    },
    excludedOptions: ['20', '30', '50', '100']
}

Then run below command once

php bin/magento setup:upgrade
php bin/magento setup:di:compile
php bin/magento cache:clean
php bin/magento cache:flush

You can download this module here

Hope this will work!

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.