How To Custom Admin Grid In Magento 2
In the previous lesson, I introduced How To Create Admin Grid In Magento 2. You should read that lesson to be able to do How To Custom Admin Grid In Magento 2 lesson.
Module File Structure
We updated our module file structure looks as follows:
Add action to admin grid
Here I will guide adding checkbox actions, edit links.
You edit the file helloworld_posts_grid_block.xml.
You add the code below.
<!--Add action here-->
<block class="Magento\Backend\Block\Widget\Grid\Massaction"
name="helloworld_posts_grid_block.grid.massaction" as="grid.massaction">
<arguments>
<argument name="massaction_id_field" xsi:type="string">id</argument>
<argument name="form_field_name" xsi:type="string">posts</argument>
<argument name="options" xsi:type="array">
<item name="delete" xsi:type="array">
<item name="label" xsi:type="string" translate="true">Delete</item>
<item name="url" xsi:type="string">*/*/massDelete</item>
<item name="confirm" xsi:type="string" translate="true">Are you sure you want to delete?</item>
</item>
<item name="enable" xsi:type="array">
<item name="label" xsi:type="string" translate="true">Enabled</item>
<item name="url" xsi:type="string">*/*/massStatus/status/1/</item>
<item name="confirm" xsi:type="string" translate="true">Are you sure?</item>
</item>
<item name="disable" xsi:type="array">
<item name="label" xsi:type="string" translate="true">Disabled</item>
<item name="url" xsi:type="string">*/*/massStatus/status/0/</item>
<item name="confirm" xsi:type="string" translate="true">Are you sure?</item>
</item>
</argument>
</arguments>
</block>
To create the edit link column, you add the code below.
<!--Add Edit Link Column-->
<block class="Magento\Backend\Block\Widget\Grid\Column" as="action"
acl="Magetop_Helloworld::posts_menu">
<arguments>
<argument name="id" xsi:type="string">action</argument>
<argument name="header" xsi:type="string" translate="true">Action</argument>
<argument name="type" xsi:type="string">action</argument>
<argument name="getter" xsi:type="string">getId</argument>
<argument name="filter" xsi:type="boolean">false</argument>
<argument name="sortable" xsi:type="boolean">false</argument>
<argument name="index" xsi:type="string">stores</argument>
<argument name="is_system" xsi:type="boolean">true</argument>
<argument name="actions" xsi:type="array">
<item name="view_action" xsi:type="array">
<item name="caption" xsi:type="string" translate="true">Edit</item>
<item name="url" xsi:type="array">
<item name="base" xsi:type="string">*/*/edit</item>
</item>
<item name="field" xsi:type="string">id</item>
</item>
</argument>
<argument name="header_css_class" xsi:type="string">col-actions</argument>
<argument name="column_css_class" xsi:type="string">col-actions</argument>
</arguments>
</block>
You access in Magento Admin Panel and check it. You can see checkbox action and edit link has been added.
Show Image in Grid
To be able to Show Image in Grid, you need to create a field image in the magetop_blog table. This I have introduced in How To Create Database Table, you can review it here.
After adding that field, we will add it to the admin grid.
Still in file helloworld_posts_grid_block.xml, you add the code below.
<!--Add Image Column-->
<block class="Magento\Backend\Block\Widget\Grid\Column" as="image">
<arguments>
<argument name="header" xsi:type="string" translate="true">Image</argument>
<argument name="index" xsi:type="string">image</argument>
<argument name="renderer" xsi:type="string">Magetop\Helloworld\Block\Adminhtml\Renderer\Image</argument>
</arguments>
</block>
In order for the image to be displayed, you need to create a file to render it.
Create Image.php according to the path: Magetop/Helloworld/Block/Adminhtml/Renderer/Image.php
<?php
namespace Magetop\Helloworld\Block\Adminhtml\Renderer;
use Magento\Backend\Block\Widget\Grid\Column\Renderer\AbstractRenderer;
class Image extends AbstractRenderer
{
protected $storeManager;
public function __construct(
\Magento\Backend\Block\Context $context,
\Magento\Store\Model\StoreManagerInterface $storeManager,
array $data = [])
{
parent::__construct($context, $data);
$this->storeManager = $storeManager;
}
public function render(\Magento\Framework\DataObject $row)
{
$image = $this->_getValue($row);
$mediaUrl = $this ->storeManager-> getStore()->getBaseUrl(\Magento\Framework\UrlInterface::URL_TYPE_MEDIA );
$strImage = '<img width="100" height="100" src="'.$mediaUrl. 'helloworld/images/'.$image.'" />';
return $strImage;
}
}
You need to add photos in the folder <magento_root>/pub/media/helloworld/images.
Then add it to the database.
You access in Magento Admin Panel click your module and check it.
I hope through this series you can create your own complete module. Good luck!
In addition to How To Custom Admin Grid In Magento 2, you can read the articles How To Add Mass Actions In Magento 2.
Follow us for the more helpful article!
We hope this is a useful series for you.
Thank you for reading!
