0

I have added a color picker in dynamic rows using below code:

protected function _prepareToRender() {
$this->addColumn(
'color_code,
[
'label' => __('Color Picker'),
'renderer' => $this->getColorRenderer(),
]);
}
private function getColorRenderer()
    {
        if (!$this->colorRenderer) {
            $this->colorRenderer = $this->getLayout()->createBlock(
                \Vendor\Module\Block\Adminhtml\Blocks\Edit\Tab\ColorRenderer::class,
                '',
                ['data' => ['is_render_to_js_template' => true]]
            );
        }
        return $this->colorRenderer;
}

class ColorRenderer is as given below

<?php

namespace Vendor\Module\Block\Adminhtml\Blocks\Edit\Tab;

class ColorRenderer extends \Magento\Framework\View\Element\AbstractBlock
{
    protected function _toHtml()
    {
        $html = '<input type="text" name="' . $this->getInputName() . '" id="' . $this->getInputId() . '" ';
        $html .= '<script type="text/javascript">
                require(["jquery","jquery/colorpicker/js/colorpicker"], function ($) {
                    $(document).ready(function () {
                        var $el = $("#'.$this->getInputId().'");
                        // Attach the color picker
                        $el.ColorPicker({
                            onChange: function (hsb, hex, rgb) {
                                $el.css("backgroundColor", "#" + hex).val("#" + hex);
                            }
                        });
                    });
                });
                </script>';

        return $html;
    }
}

Now I can see the color picker and data is getting saved in database.

enter image description here

Now in the dynamic row section I want to set the background color to the saved value. I know we can use _prepareArrayRow function to modify content.

protected function _prepareArrayRow(\Magento\Framework\DataObject $row)
    {
        if (isset($row['color_code'])) {
            $color = $row->getColorCode(); // getting hex code from dv
         // how to add style here like style="background-color:#FF0000;"
        }
}

Now how to set the background color for the existing rows using saved color code?

1 Answer 1

0

Seems like it may work, it is untested code,Just a hint to help you achieving it. You may have to replace the property backgroundcolor to color or background-color as per your need and need to check further what is exact property name.

protected function _prepareArrayRow(\Magento\Framework\DataObject $row)
    {
        if (isset($row['color_code'])) {
            $color = $row->getColorCode(); // getting hex code from dv
            $row->setData('backgroundcolor', $color);
         // how to add style here like style="background-color:#FF0000;"
          //$row->setData('option_extra_attrs', $options);

        }
}
2
  • Tried with color or background-color and unfortunately it has not added color. I thing there should be some approach to get current element and add style to that.
    – amitshree
    Jun 12, 2021 at 9:32
  • I want to get deep drill into this code, so that using anydesk we may fix it, may you please call me at 7895270333 or whatsapp ? Jun 13, 2021 at 6:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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