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.
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?
