[VUE 2] CellCopyPaste feature-level config not working, must be configured in `features` object

[tegus-engineering]

Hello,

I am working in a Vue 2 app with Bryntum Grid, and having trouble with the CellCopyPaste feature.

I've noticed that if you enable the feature using the suffixed cellCopyFasteFeature config, copying out of the grid does not work at all:

const grid = new Grid({
    cellCopyPasteFeature: {
    	disabled: false
    }
});

With this config, the copy menu appears, but copying does not actually work, and values are not copied to the clipboard.

However, if you enable the feature the "traditional" way using the "features" key in the config object:

const grid = new Grid({
    features : {
        cellCopyPaste : true
    }
});

...copy-pasting works fine. Unfortunately, if we do this, we get a warning in the development console that this method of specifying features is not recommended.

instrument.ts:130 BryntumGridComponent development warning!
Using "features" parameter for configuration is not recommended.
Solution: Use separate parameter for each "features" value to enable reactive updates of the API instance

Could this be a bug in Bryntum Grid? All of our other features specified the recommended way (with the feature suffix notation) are working just fine, except CellCopyPaste.

Thank you, let me know if there is any more info I can provide.

[tasnim]

Hi,

It seems to be working fine here. I tried brymtum latest version 5.3.2

Here is how my config looks like

const gridConfig = {
    selectionMode: {
        cell : true
    },

rowCopyPasteFeature : {
    disabled : true
},
cellCopyPasteFeature : {
    disabled : false
},

columnLines : false,
columns     : [
    {
        text  : 'Name',
        field : 'name',
        flex  : 1
    },
    {
        htmlEncodeHeaderText : false,

        text   : 'Percent Bar<br /><small>Vue Component</small>',
        field  : 'percent',
        flex   : 1,
        align  : 'center',
        editor : false,
        vue    : true,
        renderer({ record }) {
            // The object needed by the wrapper to render the component
            return {
                // Required. Name of the component to render.
                // The component must be registered globally in main.js
                // https://vuejs.org/v2/guide/components.html#Dynamic-Components
                is : 'PercentBar',

                // `record` is used by `ProgressBar` to show and manipulate values.
                record

                // Any other properties we provide for the Vue component, e.g. `value`.
            };
        }
    },
    {
        text  : 'Percent',
        field : 'percent',
        flex  : 1,
        type  : 'percent'
    },
    {
        htmlEncodeHeaderText : false,

        text   : 'Button<br /><small>Vue Component</small>',
        field  : 'city',
        align  : 'center',
        editor : false,
        width  : '15em',
        vue    : true,
        renderer({ grid: { extraData : { clickHandler } }, record }) {
            if (record.parentIndex % 2 === 0) {
                // The object needed by the wrapper to render the component
                return {
                    // Required. Name of the component to render.
                    // The component must be registered globally in main.js
                    // https://vuejs.org/v2/guide/components.html#Dynamic-Components
                    is : 'BlueButton',

                    // `BlueButton` gets its text from `record`
                    record,

                    // Button click handler defined above
                    clickHandler
                };
            }

            // The object needed by the wrapper to render the component
            return {
                // Required. Name of the component to render.
                // The component must be registered globally in main.js
                // https://vuejs.org/v2/guide/components.html#Dynamic-Components
                is : 'RedButton',

                // `RedButton` gets its text from `record`
                record,

                // Button click handler defined above
                clickHandler
            };
        }
    },
    {
        text                 : 'City<br /><small>Edit to update button</small>',
        htmlEncodeHeaderText : false,
        field                : 'city',
        width                : '12em'
    }
],
// Store will be created automatically, `syncDataOnLoad` is `true` by default (set in the wrapper)
data : DataGenerator.generateData(50)
};

[tegus-engineering]

Thanks for the reply Tasnim. Upgrading @bryntum/grid and @bryntum/grid-vue to the latest versions resolved this issue. Thank you!

[marcio]

Glad that worked!

Please if you need assistance or have questions, feel free to reach us anytime.