How to create Admin Grid in Magento2?
Finally Grid is done with Ui Component Below are the steps and files which are need for grid with filter option.
First we need to create index action layout xml that is:
Sugarcode\Test\view\adminhtml\layout\test_lists_index.xml
<?xml version="1.0"?>
<!--
/**
* Copyright © 2015 Magento. All rights reserved.
* See COPYING.txt for license details.
*/
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd">
<update handle="styles"/>
<body>
<referenceContainer name="content">
<uiComponent name="test_lists_listing"/>
</referenceContainer>
</body>
</page>
Second file is ui component xml that is if we use this xml no need Grid.php every thing is configured from this xml only
code\Sugarcode\Test\view\adminhtml\ui_component\test_lists_listing.xml
<!--
/**
* Copyright © 2015 Magento. All rights reserved.
* See COPYING.txt for license details.
*/
-->
<listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../Ui/etc/ui_configuration.xsd">
<argument name="data" xsi:type="array">
<item name="js_config" xsi:type="array">
<item name="provider" xsi:type="string">test_lists_listing.test_lists_listing_data_source</item>
<item name="deps" xsi:type="string">test_lists_listing.test_lists_listing_data_source</item>
</item>
<item name="spinner" xsi:type="string">test_lists_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 Info</item>
<item name="class" xsi:type="string">primary</item>
<item name="url" xsi:type="string">*/*/new</item>
</item>
</item>
</argument>
<dataSource name="test_lists_listing_data_source">
<argument name="dataProvider" xsi:type="configurableObject">
<argument name="class" xsi:type="string">ListsGridDataProvider</argument>
<argument name="name" xsi:type="string">test_lists_listing_data_source</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">test_lists_listing</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">test_lists_listing.test_lists_listing.test_lists_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>
<filterSearch name="fulltext">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="component" xsi:type="string">Magento_Ui/js/grid/search/search</item>
<item name="displayArea" xsi:type="string">dataGridFilters</item>
<item name="provider" xsi:type="string">test_lists_listing.test_lists_listing_data_source</item>
<item name="chipsProvider" xsi:type="string">test_lists_listing.test_lists_listing.listing_top.listing_filters_chips</item>
<item name="storageConfig" xsi:type="array">
<item name="provider" xsi:type="string">test_lists_listing.test_lists_listing.listing_top.bookmarks</item>
<item name="namespace" xsi:type="string">current.search</item>
</item>
</item>
</argument>
</filterSearch>
<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">test_lists_listing.test_lists_listing.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">test_lists_listing.test_lists_listing.listing_top.listing_filters</item>
<item name="imports" xsi:type="array">
<item name="visible" xsi:type="string">test_lists_listing.test_lists_listing.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">test_lists_listing.test_lists_listing.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="title">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="dataScope" xsi:type="string">title</item>
<item name="label" xsi:type="string" translate="true">Title</item>
</item>
</argument>
</filterInput>
<filterRange name="created_at" class="Magento\Ui\Component\Filters\Type\DateRange">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="dataScope" xsi:type="string">created_at</item>
<item name="label" xsi:type="string" translate="true">Created</item>
<item name="childDefaults" xsi:type="array">
<item name="provider" xsi:type="string">test_lists_listing.test_lists_listing.listing_top.listing_filters</item>
</item>
</item>
</argument>
<filterDate 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 name="dateFormat" xsi:type="string" translate="true">MM/dd/YYYY</item>
</item>
</argument>
</filterDate>
<filterDate 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 name="dateFormat" xsi:type="string" translate="true">MM/dd/YYYY</item>
</item>
</argument>
</filterDate>
</filterRange>
</filters>
<massaction name="listing_massaction">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="selectProvider" xsi:type="string">test_lists_listing.test_lists_listing.test_lists_columns.ids</item>
<item name="displayArea" xsi:type="string">bottom</item>
<item name="actions" xsi:type="array">
<item name="delete" 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="string">test/lists/massDelete</item>
<item name="confirm" xsi:type="array">
<item name="title" xsi:type="string" translate="true">Delete items</item>
<item name="message" xsi:type="string" translate="true">Are you sure you wan't to delete selected items?</item>
</item>
</item>
<item name="disable" 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="string">test/lists/massDisable</item>
</item>
<item name="enable" 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="string">test/lists/massEnable</item>
</item> </item>
<item name="indexField" xsi:type="string">id</item>
</item>
</argument>
</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">test_lists_listing.test_lists_listing.listing_top.bookmarks</item>
<item name="namespace" xsi:type="string">current.paging</item>
</item>
<item name="selectProvider" xsi:type="string">test_lists_listing.test_lists_listing.test_lists_columns.ids</item>
<item name="displayArea" xsi:type="string">bottom</item>
<item name="options" xsi:type="array">
<item name="20" xsi:type="array">
<item name="value" xsi:type="number">20</item>
<item name="label" xsi:type="string" translate="true">20</item>
</item>
<item name="30" xsi:type="array">
<item name="value" xsi:type="number">30</item>
<item name="label" xsi:type="string" translate="true">30</item>
</item>
<item name="50" xsi:type="array">
<item name="value" xsi:type="number">50</item>
<item name="label" xsi:type="string" translate="true">50</item>
</item>
<item name="100" xsi:type="array">
<item name="value" xsi:type="number">100</item>
<item name="label" xsi:type="string" translate="true">100</item>
</item>
<item name="200" xsi:type="array">
<item name="value" xsi:type="number">200</item>
<item name="label" xsi:type="string" translate="true">200</item>
</item>
</item>
</item>
</argument>
</paging>
</container>
<columns name="test_lists_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">test_lists_listing.test_lists_listing.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">test_lists_listing.test_lists_listing.test_lists_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="controlVisibility" xsi:type="boolean">true</item>
<item name="storageConfig" xsi:type="array">
<item name="provider" xsi:type="string">test_lists_listing.test_lists_listing.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>
<column name="ids" class="Magento\Ui\Component\MassAction\Columns\Column">
<argument name="data" xsi:type="array">
<item name="js_config" xsi:type="array">
<item name="component" xsi:type="string">Magento_Ui/js/grid/columns/multiselect</item>
</item>
<item name="config" xsi:type="array">
<item name="indexField" xsi:type="string">id</item>
<item name="controlVisibility" xsi:type="boolean">false</item>
</item>
</argument>
</column>
<column name="id">
<argument name="data" xsi:type="array">
<item name="js_config" xsi:type="array">
<item name="component" xsi:type="string">Magento_Ui/js/grid/columns/column</item>
</item>
<item name="config" xsi:type="array">
<item name="dataType" xsi:type="string">text</item>
<item name="sorting" xsi:type="string">asc</item>
<item name="align" xsi:type="string">left</item>
<item name="label" xsi:type="string" translate="true">ID</item>
<item name="sortOrder" xsi:type="number">1</item>
</item>
<item name="sortOrder" xsi:type="number">1</item>
</argument>
</column>
<column name="title">
<argument name="data" xsi:type="array">
<item name="js_config" xsi:type="array">
<item name="component" xsi:type="string">Magento_Ui/js/grid/columns/column</item>
</item>
<item name="config" xsi:type="array">
<item name="dataType" xsi:type="string">text</item>
<item name="align" xsi:type="string">left</item>
<item name="label" xsi:type="string" translate="true">Title</item>
</item>
</argument>
</column>
<column name="status">
<argument name="data" xsi:type="array">
<item name="options" xsi:type="object">Sugarcode\Test\Model\Status</item>
<item name="js_config" xsi:type="array">
<item name="component" xsi:type="string">Magento_Ui/js/grid/columns/select</item>
</item>
<item name="config" xsi:type="array">
<item name="dataType" xsi:type="string">select</item>
<item name="align" xsi:type="string">left</item>
<item name="label" xsi:type="string" translate="true">Status</item>
<item name="sortOrder" xsi:type="number">3</item>
</item>
<item name="sortOrder" xsi:type="number">3</item>
</argument>
</column>
<column name="creation_at">
<argument name="data" xsi:type="array">
<item name="js_config" xsi:type="array">
<item name="component" xsi:type="string">Magento_Ui/js/grid/columns/date</item>
</item>
<item name="config" xsi:type="array">
<item name="dataType" xsi:type="string">date</item>
<item name="align" xsi:type="string">left</item>
<item name="label" xsi:type="string" translate="true">Created</item>
<item name="sortOrder" xsi:type="number">4</item>
</item>
<item name="sortOrder" xsi:type="number">4</item>
</argument>
</column>
<column name="actions" class="Sugarcode\Test\Ui\Component\Listing\Column\TestActions">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="draggable" xsi:type="boolean">false</item>
<item name="dataType" xsi:type="string">actions</item>
<item name="indexField" xsi:type="string">id</item>
<item name="align" xsi:type="string">left</item>
<item name="label" xsi:type="string" translate="true">Action</item>
<item name="data_type" xsi:type="string">actions</item>
<item name="filterable" xsi:type="boolean">false</item>
<item name="sortable" xsi:type="boolean">false</item>
<item name="sortOrder" xsi:type="number">5</item>
</item>
<item name="sortOrder" xsi:type="number">5</item>
</argument>
</column>
</columns>
</listing>
we need to mention few tags for data provider in di.xml
<?xml version="1.0"?>
<!--
/**
* Copyright © 2015 Magento. All rights reserved.
* See COPYING.txt for license details.
*/
-->
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../lib/internal/Magento/Framework/ObjectManager/etc/config.xsd">
<virtualType name="TestGirdFilterPool" type="Magento\Framework\View\Element\UiComponent\DataProvider\FilterPool">
<arguments>
<argument name="appliers" xsi:type="array">
<item name="regular" xsi:type="object">Magento\Framework\View\Element\UiComponent\DataProvider\RegularFilter</item>
<item name="fulltext" xsi:type="object">Magento\Framework\View\Element\UiComponent\DataProvider\FulltextFilter</item>
</argument>
</arguments>
</virtualType>
<virtualType name="ListsGridDataProvider" type="Magento\Framework\View\Element\UiComponent\DataProvider\DataProvider">
<arguments>
<argument name="collection" xsi:type="object" shared="false">Sugarcode\Test\Model\Resource\Test\Collection</argument>
<argument name="filterPool" xsi:type="object" shared="false">TestGirdFilterPool</argument>
</arguments>
</virtualType>
</config>
To achieve filters we need DataProvider which will be inside Model//DataProvider.php which is mentioned in test_lists_listing.xml that is
app\code\Magento\Cms\Model\Block\DataProvider.php
<?php
/**
* Copyright © 2015 Magento. All rights reserved.
* See COPYING.txt for license details.
*/
namespace Magento\Cms\Model\Block;
use Magento\Cms\Model\Resource\Block\CollectionFactory;
use Magento\Framework\View\Element\UiComponent\DataProvider\DataProviderInterface;
use Magento\Framework\View\Element\UiComponent\DataProvider\FilterPool;
/**
* Class DataProvider
*/
class DataProvider extends \Magento\Ui\DataProvider\AbstractDataProvider
{
/**
* @var \Magento\Cms\Model\Resource\Block\Collection
*/
protected $collection;
/**
* @var FilterPool
*/
protected $filterPool;
/**
* @param string $name
* @param string $primaryFieldName
* @param string $requestFieldName
* @param CollectionFactory $collectionFactory
* @param FilterPool $filterPool
* @param array $meta
* @param array $data
*/
public function __construct(
$name,
$primaryFieldName,
$requestFieldName,
CollectionFactory $collectionFactory,
FilterPool $filterPool,
array $meta = [],
array $data = []
) {
parent::__construct($name, $primaryFieldName, $requestFieldName, $meta, $data);
$this->collection = $collectionFactory->create();
$this->filterPool = $filterPool;
}
/**
* @return \Magento\Cms\Model\Resource\Block\Collection
*/
protected function getCollection()
{
return $this->collection;
}
/**
* @inheritdoc
*/
public function addFilter($condition, $field = null, $type = 'regular')
{
$this->filterPool->registerNewFilter($condition, $field, $type);
}
/**
* Get data
*
* @return array
*/
public function getData()
{
$this->filterPool->applyFilters($this->collection);
return $this->collection->toArray();
}
/**
* Retrieve count of loaded items
*
* @return int
*/
public function count()
{
$this->filterPool->applyFilters($this->collection);
return $this->collection->count();
}
}
if you have mass delete option then need to create massdelete action file in controller that is app\code\Sugarcode\Test\Controller\Adminhtml\Lists\MassDelete.php
<?php
namespace Sugarcode\Test\Controller\Adminhtml\Lists;
use Sugarcode\Test\Model\Resource\Test\Collection;
use Magento\Framework\Controller\ResultFactory;
/**
* Class MassDelete
*/
class MassDelete extends \Magento\Backend\App\Action
{
const ID_FIELD = 'id';
const REDIRECT_URL = 'test/lists/index';
protected $collection = 'Sugarcode\Test\Model\Resource\Test\Collection';
/**
* @return \Magento\Backend\Model\View\Result\Redirect
*/
public function execute()
{
$selected = $this->getRequest()->getParam('selected');
$excluded = $this->getRequest()->getParam('excluded');
//print_r($this->getRequest()->getPost()); exit;
$collection = $this->_objectManager->create($this->collection);
try {
if (!empty($excluded)) {
$collection->addFieldToFilter(static::ID_FIELD, ['nin' => $excluded]);
$this->massAction($collection);
} elseif (!empty($selected)) {
$collection->addFieldToFilter(static::ID_FIELD, ['in' => $selected]);
$this->massAction($collection);
} else {
$this->messageManager->addError(__('Please select product(s).'));
}
} catch (\Exception $e) {
$this->messageManager->addError($e->getMessage());
}
/** @var \Magento\Backend\Model\View\Result\Redirect $resultRedirect */
$resultRedirect = $this->resultFactory->create(ResultFactory::TYPE_REDIRECT);
return $resultRedirect->setPath(static::REDIRECT_URL);
}
/**
* Cancel selected orders
*
* @param Collection $collection
* @return void
*/
protected function massAction($collection)
{
$count = 0;
foreach ($collection->getItems() as $list) {
$list->delete();
++$count;
}
$this->messageManager->addSuccess(__('A total of %1 record(s) have been deleted.', $count));
}
}
Till here you can filter, sort option and mass action is done and its working fine but full text search is not working if that is fixed full grid is ready can any one help me to fix that issue .
First you need create page for grid. See magento2 new page example
Then add ui component in layout for this page view/adminhtml/layout/samplegrid_index_index.xml
<?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="sample_grid_entity_listing"/>
</referenceContainer>
</body>
</page>
and definition for ui component view/adminhtml/ui_component/sample_grid_entity_listing.xml
<?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">sample_grid_entity_listing.entity_listing_data_source</item>
<item name="deps" xsi:type="string">sample_grid_entity_listing.entity_listing_data_source</item>
</item>
<item name="spinner" xsi:type="string">sample_grid_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_source">
<argument name="dataProvider" xsi:type="configurableObject">
<argument name="class" xsi:type="string">EntityGridDataProvider</argument>
<argument name="name" xsi:type="string">entity_listing_data_source</argument>
<argument name="primaryFieldName" xsi:type="string">entity_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">sample_grid_entity_listing</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">sample_grid_entity_listing.sample_grid_entity_listing.sample_grid_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">sample_grid_entity_listing.sample_grid_entity_listing.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">sample_grid_entity_listing.sample_grid_entity_listing.listing_top.listing_filters</item>
<item name="imports" xsi:type="array">
<item name="visible" xsi:type="string">sample_grid_entity_listing.sample_grid_entity_listing.listing_top.bookmarks:current.columns.${ $.index }.visible</item>
</item>
</item>
</item>
</argument>
<filterRange name="entity_id">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="dataScope" xsi:type="string">entity_id</item>
<item name="label" xsi:type="string" translate="true">ID</item>
<item name="childDefaults" xsi:type="array">
<item name="provider" xsi:type="string">sample_grid_entity_listing.sample_grid_entity_listing.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="title">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="dataScope" xsi:type="string">title</item>
<item name="label" xsi:type="string" translate="true">Title</item>
</item>
</argument>
</filterInput>
<filterInput name="content">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="dataScope" xsi:type="string">content</item>
<item name="label" xsi:type="string" translate="true">Content</item>
</item>
</argument>
</filterInput>
<filterSelect name="is_active">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="caption" xsi:type="string" translate="true">Select...</item>
<item name="label" xsi:type="string" translate="true">Status</item>
<item name="dataScope" xsi:type="string">is_active</item>
<item name="options" xsi:type="array">
<item name="disable" xsi:type="array">
<item name="value" xsi:type="string">0</item>
<item name="label" xsi:type="string" translate="true">Disabled</item>
</item>
<item name="enable" xsi:type="array">
<item name="value" xsi:type="string">1</item>
<item name="label" xsi:type="string" translate="true">Enabled</item>
</item>
</item>
</item>
</argument>
</filterSelect>
<filterRange name="created_at" class="Magento\Ui\Component\Filters\Type\DateRange">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="dataScope" xsi:type="string">created_at</item>
<item name="label" xsi:type="string" translate="true">Created</item>
<item name="childDefaults" xsi:type="array">
<item name="provider" xsi:type="string">sample_grid_entity_listing.sample_grid_entity_listing.listing_top.listing_filters</item>
</item>
</item>
</argument>
<filterDate 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 name="dateFormat" xsi:type="string" translate="true">MM/dd/YYYY</item>
</item>
</argument>
</filterDate>
<filterDate 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 name="dateFormat" xsi:type="string" translate="true">MM/dd/YYYY</item>
</item>
</argument>
</filterDate>
</filterRange>
</filters>
<massaction name="listing_massaction">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="selectProvider" xsi:type="string">sample_grid_entity_listing.sample_grid_entity_listing.sample_grid_columns.ids</item>
<item name="displayArea" xsi:type="string">bottom</item>
<item name="indexField" xsi:type="string">entity_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="samplegrid/entity/massDelete"/>
<item name="confirm" xsi:type="array">
<item name="title" xsi:type="string" translate="true">Delete items</item>
<item name="message" xsi:type="string" translate="true">Are you sure you wan't to delete selected items?</item>
</item>
</item>
</argument>
</action>
<action name="edit">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="type" xsi:type="string">edit</item>
<item name="label" xsi:type="string" translate="true">Edit</item>
<item name="callback" xsi:type="array">
<item name="provider" xsi:type="string">sample_grid_entity_listing.sample_grid_entity_listing.sample_grid_columns_editor</item>
<item name="target" xsi:type="string">editSelected</item>
</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">sample_grid_entity_listing.sample_grid_entity_listing.listing_top.bookmarks</item>
<item name="namespace" xsi:type="string">current.paging</item>
</item>
<item name="selectProvider" xsi:type="string">sample_grid_entity_listing.sample_grid_entity_listing.sample_grid_columns.ids</item>
<item name="displayArea" xsi:type="string">bottom</item>
</item>
</argument>
</paging>
</container>
<columns name="sample_grid_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">sample_grid_entity_listing.sample_grid_entity_listing.listing_top.bookmarks</item>
<item name="namespace" xsi:type="string">current</item>
</item>
<item name="editorConfig" xsi:type="array">
<item name="selectProvider" xsi:type="string">sample_grid_entity_listing.sample_grid_entity_listing.sample_grid_columns.ids</item>
<item name="enabled" xsi:type="boolean">true</item>
<item name="indexField" xsi:type="string">entity_id</item>
<item name="clientConfig" xsi:type="array">
<item name="saveUrl" xsi:type="string">samplegrid/entity/inlineEdit</item>
<item name="validateUrl" xsi:type="string">/path/to</item>
<item name="validateBeforeSave" xsi:type="boolean">false</item>
</item>
</item>
<item name="childDefaults" xsi:type="array">
<item name="fieldAction" xsi:type="array">
<item name="provider" xsi:type="string">sample_grid_entity_listing.sample_grid_entity_listing.sample_grid_columns_editor</item>
<item name="target" xsi:type="string">startEdit</item>
<item name="params" xsi:type="array">
<item name="0" xsi:type="string">${ $.$data.rowIndex }</item>
<item name="1" xsi:type="boolean">true</item>
</item>
</item>
<item name="controlVisibility" xsi:type="boolean">true</item>
<item name="storageConfig" xsi:type="array">
<item name="provider" xsi:type="string">sample_grid_entity_listing.sample_grid_entity_listing.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>
<column name="ids" class="Magento\Ui\Component\MassAction\Columns\Column">
<argument name="data" xsi:type="array">
<item name="js_config" xsi:type="array">
<item name="component" xsi:type="string">Magento_Ui/js/grid/columns/multiselect</item>
</item>
<item name="config" xsi:type="array">
<item name="indexField" xsi:type="string">entity_id</item>
<item name="controlVisibility" xsi:type="boolean">false</item>
</item>
</argument>
</column>
<column name="entity_id">
<argument name="data" xsi:type="array">
<item name="js_config" xsi:type="array">
<item name="component" xsi:type="string">Magento_Ui/js/grid/columns/column</item>
</item>
<item name="config" xsi:type="array">
<item name="dataType" xsi:type="string">text</item>
<item name="sorting" xsi:type="string">asc</item>
<item name="align" xsi:type="string">left</item>
<item name="label" xsi:type="string" translate="true">ID</item>
</item>
</argument>
</column>
<column name="title">
<argument name="data" xsi:type="array">
<item name="js_config" xsi:type="array">
<item name="component" xsi:type="string">Magento_Ui/js/grid/columns/column</item>
</item>
<item name="config" xsi:type="array">
<item name="editor" xsi:type="array">
<item name="editorType" xsi:type="string">text</item>
<item name="validation" xsi:type="array">
<item name="required-entry" xsi:type="boolean">true</item>
</item>
</item>
<item name="dataType" xsi:type="string">text</item>
<item name="align" xsi:type="string">left</item>
<item name="label" xsi:type="string" translate="true">Title</item>
</item>
</argument>
</column>
<column name="content">
<argument name="data" xsi:type="array">
<item name="js_config" xsi:type="array">
<item name="component" xsi:type="string">Magento_Ui/js/grid/columns/column</item>
</item>
<item name="config" xsi:type="array">
<item name="editor" xsi:type="array">
<item name="editorType" xsi:type="string">text</item>
<item name="validation" xsi:type="array">
<item name="required-entry" xsi:type="boolean">true</item>
</item>
</item>
<item name="dataType" xsi:type="string">text</item>
<item name="align" xsi:type="string">left</item>
<item name="label" xsi:type="string" translate="true">Content</item>
</item>
</argument>
</column>
<column name="is_active">
<argument name="data" xsi:type="array">
<item name="js_config" xsi:type="array">
<item name="component" xsi:type="string">Magento_Ui/js/grid/columns/select</item>
</item>
<item name="options" xsi:type="array">
<item name="disable" xsi:type="array">
<item name="value" xsi:type="string">0</item>
<item name="label" xsi:type="string" translate="true">Disabled</item>
</item>
<item name="enable" xsi:type="array">
<item name="value" xsi:type="string">1</item>
<item name="label" xsi:type="string" translate="true">Enabled</item>
</item>
</item>
<item name="config" xsi:type="array">
<item name="editor" xsi:type="string">select</item>
<item name="dataType" xsi:type="string">select</item>
<item name="align" xsi:type="string">left</item>
<item name="label" xsi:type="string" translate="true">Status</item>
</item>
</argument>
</column>
<column name="created_at">
<argument name="data" xsi:type="array">
<item name="js_config" xsi:type="array">
<item name="component" xsi:type="string">Magento_Ui/js/grid/columns/date</item>
</item>
<item name="config" xsi:type="array">
<item name="dataType" xsi:type="string">date</item>
<item name="align" xsi:type="string">left</item>
<item name="label" xsi:type="string" translate="true">Created</item>
</item>
</argument>
</column>
</columns>
</listing>
and define collection provider in di
<?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="Magento\SampleGrid\Model\ResourceModel\Grid\Collection" type="Magento\Framework\View\Element\UiComponent\DataProvider\SearchResult">
<arguments>
<argument name="mainTable" xsi:type="string">sample_grid</argument>
<argument name="resourceModel" xsi:type="string">Magento\SampleGrid\Model\ResourceModel\Entity</argument>
</arguments>
</virtualType>
<type name="Magento\Framework\View\Element\UiComponent\DataProvider\CollectionFactory">
<arguments>
<argument name="collections" xsi:type="array">
<item name="entity_listing_data_source" xsi:type="string">Magento\SampleGrid\Model\ResourceModel\Grid\Collection</item>
</argument>
</arguments>
</type>
</config>
More details about UI components see in official documentation
to create new grid page please follow below steps in my ex i took mycustom module called test and also resources is also called test
etc/adminhtml/menu.xml
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../Backend/etc/menu.xsd">
<menu>
<add id="Sugarcode_Test::test" title="Test modules" module="Sugarcode_Test" sortOrder="50" resource="Sugarcode_Test::test"/>
<add id="Sugarcode_Test::lists" title="Lists" module="Sugarcode_Test" sortOrder="10" parent="Sugarcode_Test::test" action="test/lists/" resource="Sugarcode_Test::test"/>
</menu>
</config>
etc/adminhtml/acl.xml
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../lib/internal/Magento/Framework/Acl/etc/acl.xsd">
<acl>
<resources>
<resource id="Magento_Backend::admin">
<resource id="Magento_Backend::stores">
<resource id="Magento_Backend::stores_settings">
<resource id="Magento_Config::config">
<resource id="Sugarcode_Test::test" title="Test" />
</resource>
</resource>
</resource>
</resource>
</resources>
</acl>
</config>
make sure for admin there should be routers that is etc/adminhtml/routes.xml
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../lib/internal/Magento/Framework/App/etc/routes.xsd">
<router id="admin">
<route id="test" frontName="test">
<module name="Sugarcode_Test" before="Magento_Adminhtml" />
</route>
</router>
</config>
now create 2 new action one is for default view that is index action and second one is for after serach we need grid action
Controller/Adminhtml/Lists/Index.php
<?php
namespace Sugarcode\Test\Controller\Adminhtml\Lists;
use Magento\Backend\App\Action\Context;
use Magento\Framework\View\Result\PageFactory;
class Index extends \Magento\Backend\App\Action
{
/**
* @var PageFactory
*/
protected $resultPageFactory;
/**
* @param Context $context
* @param PageFactory $resultPageFactory
*/
public function __construct(
Context $context,
PageFactory $resultPageFactory
) {
parent::__construct($context);
$this->resultPageFactory = $resultPageFactory;
}
/**
* Index action
*
* @return void
*/
public function execute()
{
/** @var \Magento\Backend\Model\View\Result\Page $resultPage */
if ($this->getRequest()->getParam('ajax')) {
$this->_forward('grid');
return;
}
$resultPage = $this->resultPageFactory->create();
$resultPage->setActiveMenu('Sugarcode_Test::test');
$resultPage->addBreadcrumb(__('CMS'), __('CMS'));
$resultPage->addBreadcrumb(__('Test Data'), __('Lists'));
$resultPage->getConfig()->getTitle()->prepend(__('Lists'));
return $resultPage;
}
}
Controller/Adminhtml/Lists/Grid.php
<?php
/**
*
* Copyright © 2015 Magento. All rights reserved.
* See COPYING.txt for license details.
*/
namespace Sugarcode\Test\Controller\Adminhtml\Lists;
class Grid extends \Magento\Backend\App\Action
{
/**
* Queue list Ajax action
*
* @return void
*/
public function execute()
{
$this->_view->loadLayout(false);
$this->_view->getLayout()->getMessagesBlock()->setMessages($this->messageManager->getMessages(true));
$this->_view->renderLayout();
}
}
lets move on to block as like in magento1.x in magneto2 also we need container and Grid.php
Block\Adminhtml\Lists.php
<?php
namespace Sugarcode\Test\Block\Adminhtml;
class Lists extends \Magento\Backend\Block\Widget\Container
{
/**
* @var string
*/
protected $_template = 'lists/lists.phtml';
protected $_testFactory;
/**
* @param \Magento\Backend\Block\Widget\Context $context
* @param array $data
*/
public function __construct(
\Magento\Backend\Block\Widget\Context $context,
\Sugarcode\Test\Model\TestFactory $testFactory,
array $data = []
) {
$this->_testFactory = $testFactory;
parent::__construct($context, $data);
}
/**
* Prepare button and grid
*
* @return \Magento\Catalog\Block\Adminhtml\Product
*/
protected function _prepareLayout()
{
$addButtonProps = [
'id' => 'add_new_test_post',
'label' => __('Add New'),
'class' => 'add',
'button_class' => '',
'class_name' => 'Magento\Backend\Block\Widget\Button\SplitButton',
'options' => $this->_getAddButtonOptions(),
];
$this->buttonList->add('add_new', $addButtonProps);
$this->setChild(
'grid',
$this->getLayout()->createBlock('Sugarcode\Test\Block\Adminhtml\Lists\Grid', 'test.lists.grid')
);
return parent::_prepareLayout();
}
/**
*
*
* @return array
*/
protected function _getAddButtonOptions()
{
$splitButtonOptions[] = [
'label' => __('Add New'),
'onclick' => "setLocation('" . $this->_getCreateUrl() . "')"
];
return $splitButtonOptions;
}
/**
*
*
* @param string $type
* @return string
*/
protected function _getCreateUrl()
{
return $this->getUrl(
'test/*/new'
);
}
/**
* Render grid
*
* @return string
*/
public function getGridHtml()
{
return $this->getChildHtml('grid');
}
}
Block\Adminhtml\Lists\Grid.php you need to mention object manager for collection that is \Sugarcode\Test\Model\TestFactory $testFactory,
class Grid extends \Magento\Backend\Block\Widget\Grid\Extended
{
/**
* @var \Magento\Framework\Module\Manager
*/
protected $moduleManager;
protected $_testFactory;
protected $_status;
public function __construct(
\Magento\Backend\Block\Template\Context $context,
\Magento\Backend\Helper\Data $backendHelper,
\Sugarcode\Test\Model\TestFactory $testFactory,
\Sugarcode\Test\Model\Status $status,
\Magento\Framework\Module\Manager $moduleManager,
array $data = []
) {
$this->_testFactory = $testFactory;
$this->_status = $status;
$this->moduleManager = $moduleManager;
parent::__construct($context, $backendHelper, $data);
}
/**
* @return void
*/
protected function _construct()
{
parent::_construct();
$this->setId('listsGrid');
$this->setDefaultSort('id');
$this->setDefaultDir('DESC');
$this->setSaveParametersInSession(true);
$this->setUseAjax(true);
$this->setVarNameFilter('lists_filter');
}
/**
* @return $this
*/
protected function _prepareCollection()
{
$collection = $this->_testFactory->create()->getCollection();
$this->setCollection($collection);
parent::_prepareCollection();
return $this;
}
/**
* @return $this
* @SuppressWarnings(PHPMD.ExcessiveMethodLength)
*/
protected function _prepareColumns()
{
$this->addColumn(
'id',
[
'header' => __('ID'),
'type' => 'number',
'index' => 'id',
'header_css_class' => 'col-id',
'column_css_class' => 'col-id',
'name'=>'id'
]
);
$this->addColumn(
'title',
[
'header' => __('Title'),
'index' => 'title',
'class' => 'xxx',
'name'=>'title'
]
);
$this->addColumn(
'created_at',
[
'header' => __('Created Date'),
'index' => 'created_at',
'name'=>'created_at'
]
);
$this->addColumn(
'status',
[
'header' => __('Status'),
'index' => 'status',
'type' => 'options',
'name'=>'status',
'options' => $this->_status->getOptionArray()
]
);
$this->addColumn(
'edit',
[
'header' => __('Edit'),
'type' => 'action',
'getter' => 'getId',
'actions' => [
[
'caption' => __('Edit'),
'url' => [
'base' => '*/*/edit'
],
'field' => 'id'
]
],
'filter' => false,
'sortable' => false,
'index' => 'stores',
'header_css_class' => 'col-action',
'column_css_class' => 'col-action'
]
);
$block = $this->getLayout()->getBlock('grid.bottom.links');
if ($block) {
$this->setChild('grid.bottom.links', $block);
}
return parent::_prepareColumns();
}
/**
* @return $this
*/
protected function _prepareMassaction()
{
$this->setMassactionIdField('id');
//$this->getMassactionBlock()->setTemplate('Sugarcode_test::lists/grid/massaction_extended.phtml');
$this->getMassactionBlock()->setFormFieldName('lists_ids');
$this->getMassactionBlock()->addItem(
'delete',
[
'label' => __('Delete'),
'url' => $this->getUrl('test/*/massDelete'),
'confirm' => __('Are you sure?')
]
);
$statuses = $this->_status->getAllOptions();
array_unshift($statuses, ['label' => '', 'value' => '']);
$this->getMassactionBlock()->addItem(
'status',
[
'label' => __('Change status'),
'url' => $this->getUrl('test/*/massStatus', ['_current' => true]),
'additional' => [
'visibility' => [
'name' => 'status',
'type' => 'select',
'class' => 'required-entry',
'label' => __('Status'),
'values' => $statuses
]
]
]
);
return $this;
}
/**
* @return string
*/
public function getGridUrl()
{
return $this->getUrl('test/*/grid', ['_current' => true]);
}
/**
* @param \Magento\Framework\Object $row
* @return string
*/
public function getRowUrl($row)
{
return $this->getUrl(
'test/*/edit',
['id' => $row->getId()]
);
}
}
final steps are files is view layout xml, here also we have to layout for index and grid
view\adminhtml\layout\test_lists_index.xml
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd">
<update handle="formkey"/>
<update handle="test_lists_block"/>
<body>
<referenceContainer name="content">
<block class="Sugarcode\Test\Block\Adminhtml\Lists" name="adminhtml.test.lists.container"/>
</referenceContainer>
</body>
</page>
view\adminhtml\layout\test_lists_grid.xml
<?xml version="1.0"?>
<!--
/**
* Copyright © 2015 Magento. All rights reserved.
* See COPYING.txt for license details.
*/
-->
<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/layout_generic.xsd">
<update handle="formkey"/>
<container name="root" label="Root">
<block class="Sugarcode\Test\Block\Adminhtml\Lists\Grid" name="admin.lists.grid"/>
</container>
</layout>
in grid layout xml
<container name="root" label="Root">
impotent to replace only grid data after search
unlike magento1.x in magetno2 we need to mention template path in container block file and you need to create a file in template folder that is
view\adminhtml\templates\lists\lists.phtml and minimum one line code of
<?php echo $block->getGridHtml() ?>
that's it clear cache and you can see grid page