To create a grid in admin panel you have to define a controller first.
To define a controller create a new file:
app/code/Webkul/Hello/Controller/Adminhtml/Employee/Index.php
Here Webkul is a Namespace, Hello is a module name.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<?php namespace Webkul\Hello\Controller\Adminhtml\Employee; use Magento\Backend\App\Action\Context; use Magento\Framework\View\Result\PageFactory; class Index extends \Magento\Backend\App\Action { const ADMIN_RESOURCE = 'Webkul_Hello::employee'; /** * @var \Magento\Framework\View\Result\PageFactory */ protected $resultPageFactory; /** * @param \Magento\Framework\App\Action\Context $context * @param \Magento\Framework\View\Result\PageFactory resultPageFactory */ public function __construct( \Magento\Framework\App\Action\Context $context, \Magento\Framework\View\Result\PageFactory $resultPageFactory ) { parent::__construct($context); $this->resultPageFactory = $resultPageFactory; } /** * Default customer account page * * @return void */ public function execute() { $resultPage = $this->resultPageFactory->create(); $resultPage->setActiveMenu('Webkul_Hello::employee'); $resultPage->addBreadcrumb(__('Employee Data'), __('Employee Data')); $resultPage->addBreadcrumb(__('Employee Data'), __('Employee Data')); $resultPage->getConfig()->getTitle()->prepend(__('Employee Data')); return $resultPage; } }?> |
After defining Index.php we have to define a layout file for the same controller.
For which we need to create file:
app/code/Webkul/Hello/view/adminhtml/layout/hello_employee_index.xml
Here, we simply register our UI component.
1 2 3 4 5 6 7 8 |
<?xml version="1.0"?> <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <body> <referenceContainer name="content"> <uiComponent name="webkul_emp_data"/> </referenceContainer> </body> </page> |
Now, after registering a Ui component, now we need to create it:
app/code/Webkul/Hello/view/adminhtml/ui_component/webkul_emp_data.xml
Here we define grid’s columns, filters and actions.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 |
<?xml version="1.0" encoding="UTF-8"?> <listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Ui/etc/ui_configuration.xsd"> <argument name="data" xsi:type="array"> <item name="js_config" xsi:type="array"> <item name="provider" xsi:type="string">webkul_emp_data.entity_listing_data_source1</item> <item name="deps" xsi:type="string">webkul_emp_data.entity_listing_data_source1</item> </item> <item name="spinner" xsi:type="string">wk_emp_data_columns</item> <item name="buttons" xsi:type="array"> <item name="add" xsi:type="array"> <item name="name" xsi:type="string">add</item> <item name="label" xsi:type="string" translate="true">Add New Entity</item> <item name="class" xsi:type="string">primary</item> <item name="url" xsi:type="string">*/*/new</item> </item> </item> </argument> <dataSource name="entity_listing_data_source1"> <argument name="dataProvider" xsi:type="configurableObject"> <argument name="class" xsi:type="string">Magento\Framework\View\Element\UiComponent\DataProvider\DataProvider</argument> <argument name="name" xsi:type="string">entity_listing_data_source1</argument> <argument name="primaryFieldName" xsi:type="string">id</argument> <argument name="requestFieldName" xsi:type="string">id</argument> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <item name="update_url" xsi:type="url" path="mui/index/render"/> </item> </argument> </argument> <argument name="data" xsi:type="array"> <item name="js_config" xsi:type="array"> <item name="component" xsi:type="string">Magento_Ui/js/grid/provider</item> </item> </argument> </dataSource> <container name="listing_top"> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <item name="template" xsi:type="string">ui/grid/toolbar</item> </item> </argument> <bookmark name="bookmarks"> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <item name="component" xsi:type="string">Magento_Ui/js/grid/controls/bookmarks/bookmarks</item> <item name="displayArea" xsi:type="string">dataGridActions</item> <item name="storageConfig" xsi:type="array"> <item name="saveUrl" xsi:type="url" path="mui/bookmark/save"/> <item name="deleteUrl" xsi:type="url" path="mui/bookmark/delete"/> <item name="namespace" xsi:type="string">webkul_emp_data</item> </item> </item> </argument> </bookmark> <container name="columns_controls"> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <item name="columnsData" xsi:type="array"> <item name="provider" xsi:type="string">webkul_emp_data.webkul_emp_data.wk_emp_data_columns</item> </item> <item name="component" xsi:type="string">Magento_Ui/js/grid/controls/columns</item> <item name="displayArea" xsi:type="string">dataGridActions</item> </item> </argument> </container> <filters name="listing_filters"> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <item name="displayArea" xsi:type="string">dataGridFilters</item> <item name="dataScope" xsi:type="string">filters</item> <item name="storageConfig" xsi:type="array"> <item name="provider" xsi:type="string">webkul_emp_data.webkul_emp_data.listing_top.bookmarks</item> <item name="namespace" xsi:type="string">current.filters</item> </item> <item name="childDefaults" xsi:type="array"> <item name="provider" xsi:type="string">webkul_emp_data.webkul_emp_data.listing_top.listing_filters</item> <item name="imports" xsi:type="array"> <item name="visible" xsi:type="string">webkul_emp_data.webkul_emp_data.listing_top.bookmarks:current.columns.${ $.index }.visible</item> </item> </item> </item> </argument> <filterRange name="id"> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <item name="dataScope" xsi:type="string">id</item> <item name="label" xsi:type="string" translate="true">ID</item> <item name="childDefaults" xsi:type="array"> <item name="provider" xsi:type="string">webkul_emp_data.webkul_emp_data.listing_top.listing_filters</item> </item> </item> </argument> <filterInput name="from"> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <item name="dataScope" xsi:type="string">from</item> <item name="label" xsi:type="string" translate="true">from</item> <item name="placeholder" xsi:type="string" translate="true">From</item> </item> </argument> </filterInput> <filterInput name="to"> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <item name="dataScope" xsi:type="string">to</item> <item name="label" xsi:type="string" translate="true">to</item> <item name="placeholder" xsi:type="string" translate="true">To</item> </item> </argument> </filterInput> </filterRange> <filterInput name="empname"> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <item name="dataScope" xsi:type="string">empname</item> <item name="label" xsi:type="string" translate="true">empname</item> </item> </argument> </filterInput> <filterInput name="status"> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <item name="dataScope" xsi:type="string">status</item> <item name="label" xsi:type="string" translate="true">status</item> </item> </argument> </filterInput> </filters> <massaction name="listing_massaction"> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <item name="selectProvider" xsi:type="string">webkul_emp_data.webkul_emp_data.wk_emp_data_columns.ids</item> <item name="component" xsi:type="string">Magento_Ui/js/grid/tree-massactions</item> <item name="indexField" xsi:type="string">id</item> </item> </argument> <action name="delete"> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <item name="type" xsi:type="string">delete</item> <item name="label" xsi:type="string" translate="true">delete</item> <item name="url" xsi:type="url" path="hello/employee/massDelete"/> </item> </argument> </action> <action name="status"> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <item name="type" xsi:type="string">status</item> <item name="label" xsi:type="string" translate="true">Change status</item> </item> </argument> <argument name="actions" xsi:type="array"> <item name="0" xsi:type="array"> <item name="type" xsi:type="string">enable</item> <item name="label" xsi:type="string" translate="true">Enable</item> <item name="url" xsi:type="url" path="hello/employee/massStatus"> <param name="status">1</param> </item> </item> <item name="1" xsi:type="array"> <item name="type" xsi:type="string">disable</item> <item name="label" xsi:type="string" translate="true">Disable</item> <item name="url" xsi:type="url" path="hello/employee/massStatus"> <param name="status">0</param> </item> </item> </argument> </action> </massaction> <paging name="listing_paging"> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <item name="storageConfig" xsi:type="array"> <item name="provider" xsi:type="string">webkul_emp_data.webkul_emp_data.listing_top.bookmarks</item> <item name="namespace" xsi:type="string">current.paging</item> </item> <item name="selectProvider" xsi:type="string">webkul_emp_data.webkul_emp_data.wk_emp_data_columns.ids</item> <item name="displayArea" xsi:type="string">bottom</item> </item> </argument> </paging> </container> <columns name="wk_emp_data_columns"> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <item name="storageConfig" xsi:type="array"> <item name="provider" xsi:type="string">webkul_emp_data.webkul_emp_data.listing_top.bookmarks</item> <item name="namespace" xsi:type="string">current</item> </item> <item name="childDefaults" xsi:type="array"> <item name="fieldAction" xsi:type="array"> <item name="provider" xsi:type="string">webkul_emp_data.webkul_emp_data.wk_emp_data_columns.actions</item> <item name="target" xsi:type="string">applyAction</item> <item name="params" xsi:type="array"> <item name="0" xsi:type="string">edit</item> <item name="1" xsi:type="string">${ $.$data.rowIndex }</item> </item> </item> <item name="storageConfig" xsi:type="array"> <item name="provider" xsi:type="string">webkul_emp_data.webkul_emp_data.listing_top.bookmarks</item> <item name="root" xsi:type="string">columns.${ $.index }</item> <item name="namespace" xsi:type="string">current.${ $.storageConfig.root}</item> </item> </item> </item> </argument> <selectionsColumn name="ids"> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <item name="indexField" xsi:type="string">id</item> <item name="sortOrder" xsi:type="number">0</item> </item> </argument> </selectionsColumn> <column name="id"> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <item name="filter" xsi:type="string">text</item> <item name="component" xsi:type="string">Magento_Ui/js/grid/columns/column</item> <item name="dataType" xsi:type="string">text</item> <item name="label" xsi:type="string" translate="true">id</item> <item name="sortOrder" xsi:type="number">10</item> </item> </argument> </column> <column name="empname"> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <item name="filter" xsi:type="string">text</item> <item name="component" xsi:type="string">Magento_Ui/js/grid/columns/column</item> <item name="dataType" xsi:type="string">text</item> <item name="label" xsi:type="string" translate="true">empname</item> <item name="sortOrder" xsi:type="number">20</item> </item> </argument> </column> <column name="email"> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <item name="filter" xsi:type="string">text</item> <item name="component" xsi:type="string">Magento_Ui/js/grid/columns/column</item> <item name="dataType" xsi:type="string">text</item> <item name="label" xsi:type="string" translate="true">email</item> <item name="sortOrder" xsi:type="number">20</item> </item> </argument> </column> <column name="address"> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <item name="filter" xsi:type="string">text</item> <item name="component" xsi:type="string">Magento_Ui/js/grid/columns/column</item> <item name="dataType" xsi:type="string">text</item> <item name="label" xsi:type="string" translate="true">address</item> <item name="sortOrder" xsi:type="number">20</item> </item> </argument> </column> <column name="status"> <argument name="data" xsi:type="array"> <item name="options" xsi:type="object">Webkul\Hello\Model\Employee\Source\Status</item> <item name="config" xsi:type="array"> <item name="filter" xsi:type="string">select</item> <item name="component" xsi:type="string">Magento_Ui/js/grid/columns/select</item> <item name="editor" xsi:type="string">select</item> <item name="dataType" xsi:type="string">select</item> <item name="label" xsi:type="string" translate="true">Status</item> <item name="sortOrder" xsi:type="number">30</item> </item> </argument> </column> <actionsColumn name="actions" class="Webkul\Hello\Ui\Component\Listing\Column\EmployeeActions"> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <item name="indexField" xsi:type="string">id</item> <item name="sortOrder" xsi:type="number">200</item> </item> </argument> </actionsColumn> </columns> </listing> |
In the above file we defined data provider under data source tag.
which brings concept of dependency injection.
Now we need to create di file under,
app/code/Webkul/Hello/etc/di.xml
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<?xml version="1.0"?> <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd"> <virtualType name="Webkul\Hello\Model\ResourceModel\Employee\Grid\Collection"> <arguments> <argument name="mainTable" xsi:type="string">wk_emp_data</argument> <argument name="resourceModel" xsi:type="string">Webkul\Hello\Model\ResourceModel\Employee</argument> </arguments> </virtualType> <type name="Magento\Framework\View\Element\UiComponent\DataProvider\CollectionFactory"> <arguments> <argument name="collections" xsi:type="array"> <item name="entity_listing_data_source1" xsi:type="string">Webkul\Hello\Model\ResourceModel\Employee\Grid\Collection</item> </argument> </arguments> </type> </config> |
Here, “wk_emp_data” is our main table.
To display available columns for the status we define a separate class:
app/code/Webkul/Hello/Model/Employee/Source/Status.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<?php namespace Webkul\Hello\Model\Employee\Source; class Status implements \Magento\Framework\Data\OptionSourceInterface { protected $emp; public function __construct(\Webkul\Hello\Model\Employee $emp) { $this->emp = $emp; } /** * Get options * * @return array */ public function toOptionArray() { $options[] = ['label' => '', 'value' => '']; $availableOptions = $this->getOptionArray(); foreach ($availableOptions as $key => $value) { $options[] = [ 'label' => $value, 'value' => $key, ]; } return $options; } public static function getOptionArray() { return [1 => __('Enabled'), 0 => __('Disabled')]; } } |
Now, to define actions, we need to create a file at:
app/code/Webkul/Hello/Ui/Component/Listing/Column/EmployeeActions.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 |
<?php namespace Webkul\Hello\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\UrlInterface; class EmployeeActions extends Column { /** Url path */ const Employee_URL_PATH_EDIT = 'hello/employee/edit'; const Employee_URL_PATH_DELETE = 'hello/employee/delete'; /** @var UrlInterface */ protected $urlBuilder; /** * @var string */ private $editUrl; /** * @param ContextInterface $context * @param UiComponentFactory $uiComponentFactory * @param UrlInterface $urlBuilder * @param array $components * @param array $data * @param string $editUrl */ public function __construct( ContextInterface $context, UiComponentFactory $uiComponentFactory, UrlInterface $urlBuilder, array $components = [], array $data = [], $editUrl = self::Employee_URL_PATH_EDIT ) { $this->urlBuilder = $urlBuilder; $this->editUrl = $editUrl; parent::__construct($context, $uiComponentFactory, $components, $data); } /** * Prepare Data Source * * @param array $dataSource * @return array */ public function prepareDataSource(array $dataSource) { if (isset($dataSource['data']['items'])) { foreach ($dataSource['data']['items'] as & $item) { $name = $this->getData('name'); if (isset($item['id'])) { $item[$name]['edit'] = [ 'href' => $this->urlBuilder->getUrl($this->editUrl, ['id' => $item['id']]), 'label' => __('Edit') ]; $item[$name]['delete'] = [ 'href' => $this->urlBuilder->getUrl(self::Employee_URL_PATH_DELETE, ['id' => $item['id']]), 'label' => __('Delete'), 'confirm' => [ 'title' => __('Delete "${ $.$data.empname }"'), 'message' => __('Are you sure you wan\'t to delete a "${ $.$data.empname }" record?') ] ]; } } } return $dataSource; } } |
That’s all to create a grid in admin panel using magento 2.
Now, to perform action you need to create actions under controller.
Fatal error: Method Magento\Ui\TemplateEngine\Xhtml\Result::__toString() must not throw an exception, caught TypeError: Argument 1 passed to Magento\Framework\View\Element\UiComponent\DataProvider\DataProvider::searchResultToOutput() must implement interface Magento\Framework\Api\Search\SearchResultInterface, instance of Ktpl\Gallery\Model\ResourceModel\Event\Collection given, called in /var/www/html/magento2.6/vendor/magento/framework/View/Element/UiComponent/DataProvider/DataProvider.php on line 284 in /var/www/html/magento2.6/vendor/magento/module-ui/Component/Wrapper/UiComponent.php on line 0