Skip to content

Remove Dollar Sign ($) from Magento Inline Edit

I have an inline edit module, and it’s working fine, but my price field displays the dollar sign “$” when I click on a record to edit inline. This is annoying because then I need to backspace the dollar sign to remove it each time I want to save, since it is not a number.

I tried both, from within the ProductDataProvider, and as a JS component, but neither are working for me. Any help is appreciated!

Thanks!

app/code/Vendor/GridInlineEditor/Ui/DataProvider/Product/ProductDataProvider.php:

    <?php
namespace VendorGridInlineEditorUiDataProviderProduct;

use MagentoCatalogUiDataProviderProductProductDataProvider as MagentoProductDataProvider;
use MagentoCatalogModelResourceModelProductCollectionFactory;
use MagentoFrameworkAppRequestInterface;
use MagentoFrameworkPricingPriceCurrencyInterface;

class ProductDataProvider extends MagentoProductDataProvider
{
    public function __construct(
        $name,
        $primaryFieldName,
        $requestFieldName,
        CollectionFactory $collectionFactory,
        array $addFieldStrategies = [],
        array $addFilterStrategies = [],
        array $meta = [],
        array $data = []
    ) {
        parent::__construct($name, $primaryFieldName, $requestFieldName, $collectionFactory, $addFieldStrategies, $addFilterStrategies, $meta, $data);
        
    $this->collection->addAttributeToSelect(['cost', 'status_watch', 'date_recent', 'band_color']);
}

public function getData()
{
    $data = parent::getData();

    foreach ($data['items'] as &$item) {
        if (isset($item['cost'])) {
            $item['cost'] = $this->removeFormatting($item['cost']);
        }
    }

    return $data;
}

private function removeFormatting($value)
{
    return preg_replace('/[^d.]/', '', $value);
}
}

app/code/Vendor/GridInlineEditor/view/adminhtml/web/js/grid/columns/price.js:

define([
    'Magento_Ui/js/grid/columns/column',
    'mage/utils/wrapper'
], function (Column, wrapper) {
    'use strict';

return Column.extend({
    initialize: function () {
        this._super();
        this.getFieldHandler = wrapper.wrap(this.getFieldHandler, this._wrapGetFieldHandler.bind(this));
    },

    _wrapGetFieldHandler: function (originalHandler) {
        return function (record) {
            var result = originalHandler.call(this, record);
            if (typeof result === 'object' && result.hasOwnProperty('value')) {
                // Only remove the dollar sign when editing the field inline
                result.value = this.removeDollarSign(result.value);
            }
            return result;
        }.bind(this);
    },

    removeDollarSign: function (value) {
        return value.replace(/^$/, '');
    }
});
});