Sometime we come across a function where we need to show a custom html or form in our column in custom grid in admin.
In this blog we will create a column named action and render two html radio button and also display a submit button .
To create a column in grid open your custom listing xml file and add below code after oine of your column here I’m naming it as Action Column and Passing a class which will return the html code and render inside one of the column.
<column name="actioned" class="Gm\Module\Ui\Component\Listing\Column\LightSwitch"> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <item name="filter" xsi:type="string">text</item> <item name="bodyTmpl" xsi:type="string">ui/grid/cells/html</item> <item name="label" xsi:type="string" translate="true">Action</item> </item> </argument> </column>
Once the xml part is done we will create the php class file that is responsible of creating html in grid column.here LightSwitch is responsible of creating two radio button and another submit button paste the below code in your file and flush the cache the html will appear in your column in admin grid.
<?php namespace Gm\Module\Ui\Component\Listing\Column; use Magento\Framework\View\Element\UiComponent\ContextInterface; use Magento\Framework\View\Element\UiComponentFactory; use Magento\Ui\Component\Listing\Columns\Column; use Magento\Framework\Data\Form\FormKey; class LightSwitch extends Column { /** * @var \Magento\Framework\Data\Form\FormKey\Validator */ private $formKey; /** * ProductDetail constructor. * @param ContextInterface $context * @param UiComponentFactory $uiComponentFactory * @param array $components * @param array $data */ public function __construct( ContextInterface $context, UiComponentFactory $uiComponentFactory, array $components = [], FormKey $formKey, array $data = [] ) { parent::__construct($context, $uiComponentFactory, $components, $data); $this->formKey = $formKey; } /** * @param array $dataSource * @return array */ public function prepareDataSource(array $dataSource) { if (isset($dataSource['data']['items'])) { foreach ($dataSource['data']['items'] as &$items) { $rowid = $items["entity_id"]; $actioned_on = ""; $actioned_off = "checked"; if ($items["actioned"] == 1) { $actioned_on = "checked"; $actioned_off = ""; } $items['actioned'] = ' <input type="hidden" name="form_key" id="form_key_' . $rowid . '" value=' . $this->formKey->getFormKey() . '> <input type="hidden" name="entity_id" id="entity_id_' . $rowid . '" value=' . $items['entity_id'] . '> <input type="radio" id="lighton_' . $rowid . '" name="lighton_' . $rowid . '" value="LIGHT_ON" required ' . $actioned_on . '> <label for="lighton_' . $rowid . '">Turn On</label> <input type="radio" id="lightoff_' . $rowid . '" name="lighton_' . $rowid . '" value="LIGHT_OFF" ' . $actioned_off . '> <label for="lightoff_' . $rowid . '">Turn Off</label></br> <p id="actions_' . $rowid . '" style="color: red;margin-left: 20px"></p> <input type="button" id="submitlight_' . $rowid . '" class="action-primary" style="margin:5px 0 0 40px" onclick="SwitchLight(' . $rowid . ')" value=Submit>'; } } return $dataSource; } }
SwitchLight() function is the function that will control and check your action via submit button. I have created ajax call upon subit button click . You can add custom javascript by adding it to your head section of the layout.