1

I'm trying to create a menu in admin side which show a table. now i'm done with adding new menu and which has two sublevel. i need to display third level having a table app/code/Dyode/Pricebeat/view/adminhtml/layout/dyode_pricebeat_form_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="styles"/>
<body>
    <referenceBlock name="menu">
        <action method="setActive">
            <argument name="itemId" xsi:type="string">Dyode_Pricebeat::forms</argument>
        </action>
    </referenceBlock>
    <referenceBlock name="page.title">
        <action method="setTitleClass">
            <argument name="class" xsi:type="string">complex</argument>
        </action>
    </referenceBlock>
    <referenceContainer name="content">
        <uiComponent name="dyode_pricebeat_form_listing"/>
    </referenceContainer>
</body>
</page>

app/code/Dyode/Pricebeat/view/adminhtml/layout/dyode_pricebeat_form_edit.xml

<?xml version="1.0"?>
 <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="admin-2columns-left" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd">
<body>
    <referenceContainer name="content">
        <block class="Dyode\Pricebeat\Block\Adminhtml\Form\Edit" name="dyode_pricebeat_form_edit"/>
    </referenceContainer>
    <referenceContainer name="left">
        <block class="Dyode\Pricebeat\Block\Adminhtml\Form\Edit\Tabs" name="dyode_pricebeat_form_tabs">
            <block class="Dyode\Pricebeat\Block\Adminhtml\Form\Edit\Tab\Form" name="dyode_pricebeat_form_edit_tab_form"/>
            <action method="addTab">
                <argument name="name" xsi:type="string">form</argument>
                <argument name="block" xsi:type="string">dyode_pricebeat_form_edit_tab_form</argument>
            </action>
        </block>
    </referenceContainer>
</body>
</page>

app/code/Dyode/Pricebeat/view/adminhtml/ui_component/dyode_pricebeat_form_listing.xml

<?xml version="1.0"?>
<listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
<argument name="data" xsi:type="array">
    <item name="js_config" xsi:type="array">
        <item name="provider" xsi:type="string">dyode_pricebeat_form_listing.dyode_pricebeat_form_listing_data_source</item>
        <item name="deps" xsi:type="string">dyode_pricebeat_form_listing.dyode_pricebeat_form_listing_data_source</item>
    </item>
    <item name="spinner" xsi:type="string">dyode_pricebeat_form_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</item>
            <item name="class" xsi:type="string">primary</item>
            <item name="url" xsi:type="string">*/*/new</item>
        </item>
    </item>
</argument>
<dataSource name="dyode_pricebeat_form_listing_data_source">
    <argument name="dataProvider" xsi:type="configurableObject">
        <argument name="class" xsi:type="string">DyodePricebeatformGridDataProvider</argument>
        <argument name="name" xsi:type="string">dyode_pricebeat_form_listing_data_source</argument>
        <argument name="primaryFieldName" xsi:type="string">form_id</argument>
        <argument name="requestFieldName" xsi:type="string">form_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 name="stickyTmpl" xsi:type="string">ui/grid/sticky/toolbar</item>
        </item>
    </argument>
    <bookmark name="bookmarks">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="storageConfig" xsi:type="array">
                    <item name="namespace" xsi:type="string">dyode_pricebeat_form_listing</item>
                </item>
            </item>
        </argument>
    </bookmark>
    <component 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">dyode_pricebeat_form_listing.dyode_pricebeat_form_listing.dyode_pricebeat_form_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>
    </component>
    <exportButton name="export_button">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="selectProvider" xsi:type="string">dyode_pricebeat_form_listing.dyode_pricebeat_form_listing.dyode_pricebeat_form_columns.ids</item>
            </item>
        </argument>
    </exportButton>
    <filterSearch name="fulltext">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="provider" xsi:type="string">dyode_pricebeat_form_listing.dyode_pricebeat_form_listing_data_source</item>
                <item name="chipsProvider" xsi:type="string">dyode_pricebeat_form_listing.dyode_pricebeat_form_listing.listing_top.listing_filters_chips</item>
                <item name="storageConfig" xsi:type="array">
                    <item name="provider" xsi:type="string">dyode_pricebeat_form_listing.dyode_pricebeat_form_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="columnsProvider" xsi:type="string">dyode_pricebeat_form_listing.dyode_pricebeat_form_listing.dyode_pricebeat_form_columns</item>
                <item name="storageConfig" xsi:type="array">
                    <item name="provider" xsi:type="string">dyode_pricebeat_form_listing.dyode_pricebeat_form_listing.listing_top.bookmarks</item>
                    <item name="namespace" xsi:type="string">current.filters</item>
                </item>
                <item name="templates" xsi:type="array">
                    <item name="filters" xsi:type="array">
                        <item name="select" xsi:type="array">
                            <item name="component" xsi:type="string">Magento_Ui/js/form/element/ui-select</item>
                            <item name="template" xsi:type="string">ui/grid/filters/elements/ui-select</item>
                        </item>
                    </item>
                </item>
                <item name="childDefaults" xsi:type="array">
                    <item name="provider" xsi:type="string">dyode_pricebeat_form_listing.dyode_pricebeat_form_listing.listing_top.listing_filters</item>
                    <item name="imports" xsi:type="array">
                        <item name="visible" xsi:type="string">dyode_pricebeat_form_listing.dyode_pricebeat_form_listing.dyode_pricebeat_form_columns.${ $.index }:visible</item>
                    </item>
                </item>
            </item>
            <item name="observers" xsi:type="array">
                <item name="column" xsi:type="string">column</item>
            </item>
        </argument>
    </filters>
    <massaction name="listing_massaction">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="selectProvider" xsi:type="string">dyode_pricebeat_form_listing.dyode_pricebeat_form_listing.dyode_pricebeat_form_columns.ids</item>
                <item name="indexField" xsi:type="string">form_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="dyode_pricebeat/form/massDelete"/>
                    <item name="confirm" xsi:type="array">
                        <item name="title" xsi:type="string" translate="true">Delete Banners</item>
                        <item name="message" xsi:type="string" translate="true">Are you sure you wan't to delete selected Banners?</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">dyode_pricebeat_form_listing.dyode_pricebeat_form_listing.dyode_pricebeat_form_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">dyode_pricebeat_form_listing.dyode_pricebeat_form_listing.listing_top.bookmarks</item>
                    <item name="namespace" xsi:type="string">current.paging</item>
                </item>
                <item name="selectProvider" xsi:type="string">dyode_pricebeat_form_listing.dyode_pricebeat_form_listing.dyode_pricebeat_form_columns.ids</item>
            </item>
        </argument>
    </paging>
</container>
<columns name="dyode_pricebeat_form_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">dyode_pricebeat_form_listing.dyode_pricebeat_form_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">dyode_pricebeat_form_listing.dyode_pricebeat_form_listing.dyode_pricebeat_form_columns.ids</item>
                <item name="enabled" xsi:type="boolean">true</item>
                <item name="indexField" xsi:type="string">form_id</item>
                <item name="clientConfig" xsi:type="array">
                    <item name="saveUrl" xsi:type="url" path="dyode_pricebeat/form/inlineEdit"/>
                    <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">dyode_pricebeat_form_listing.dyode_pricebeat_form_listing.dyode_pricebeat_form_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="storageConfig" xsi:type="array">
                    <item name="provider" xsi:type="string">dyode_pricebeat_form_listing.dyode_pricebeat_form_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>
    <selectionsColumn name="ids">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="resizeEnabled" xsi:type="boolean">false</item>
                <item name="resizeDefaultWidth" xsi:type="string">55</item>
                <item name="indexField" xsi:type="string">form_id</item>
            </item>
        </argument>
    </selectionsColumn>
    <column name="form_id">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="filter" xsi:type="string">textRange</item>
                <item name="sorting" xsi:type="string">asc</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="config" xsi:type="array">
                <item name="filter" xsi:type="string">text</item>
                <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="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">Magento\Config\Model\Config\Source\Yesno</item>
            <item name="config" xsi:type="array">
                <item name="filter" xsi:type="string">select</item>
                <item name="editor" xsi:type="array">
                    <item name="editorType" xsi:type="string">select</item>
                    <item name="validation" xsi:type="array">
                        <item name="required-entry" xsi:type="boolean">true</item>
                    </item>
                </item>
                <item name="label" xsi:type="string" translate="true">Status</item>
                <item name="component" xsi:type="string">Magento_Ui/js/grid/columns/select</item>
                <item name="dataType" xsi:type="string">select</item>
            </item>
        </argument>
    </column>
    <column name="created_at" class="Magento\Ui\Component\Listing\Columns\Date">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="filter" xsi:type="string">dateRange</item>
                <item name="component" xsi:type="string">Magento_Ui/js/grid/columns/date</item>
                <item name="dataType" xsi:type="string">date</item>
                <item name="label" xsi:type="string" translate="true">Created</item>
            </item>
        </argument>
    </column>
    <column name="updated_at" class="Magento\Ui\Component\Listing\Columns\Date">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="filter" xsi:type="string">dateRange</item>
                <item name="component" xsi:type="string">Magento_Ui/js/grid/columns/date</item>
                <item name="dataType" xsi:type="string">date</item>
                <item name="label" xsi:type="string" translate="true">Modified</item>
            </item>
        </argument>
    </column>
    <actionsColumn name="actions" class="Dyode\Pricebeat\Ui\Component\Listing\Column\formActions">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="resizeEnabled" xsi:type="boolean">false</item>
                <item name="resizeDefaultWidth" xsi:type="string">107</item>
                <item name="indexField" xsi:type="string">form_id</item>
            </item>
        </argument>
    </actionsColumn>
</columns>
<container name="sticky">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="component" xsi:type="string">Magento_Ui/js/grid/sticky/sticky</item>
            <item name="toolbarProvider" xsi:type="string">dyode_pricebeat_form_listing.dyode_pricebeat_form_listing.listing_top</item>
            <item name="listingProvider" xsi:type="string">dyode_pricebeat_form_listing.dyode_pricebeat_form_listing.dyode_pricebeat_form_columns</item>
        </item>
    </argument>
</container>
</listing>

app/code/Dyode/Pricebeat/Ui/Component/Listing/Column/formActions.php

<?php
namespace Dyode\Pricebeat\Ui\Component\Listing\Column;

class formActions extends \Magento\Ui\Component\Listing\Columns\Column
 {
  /**
   * Url path  to edit
   *
   * @var string
  */
const URL_PATH_EDIT = 'dyode_pricebeat/form/edit';

/**
 * Url path  to delete
 *
 * @var string
 */
const URL_PATH_DELETE = 'dyode_pricebeat/form/delete';

/**
 * URL builder
 *
 * @var \Magento\Framework\UrlInterface
 */
protected $urlBuilder;

/**
 * constructor
 *
 * @param \Magento\Framework\UrlInterface $urlBuilder
 * @param \Magento\Framework\View\Element\UiComponent\ContextInterface $context
 * @param \Magento\Framework\View\Element\UiComponentFactory $uiComponentFactory
 * @param array $components
 * @param array $data
 */
public function __construct(
    \Magento\Framework\UrlInterface $urlBuilder,
    \Magento\Framework\View\Element\UiComponent\ContextInterface $context,
    \Magento\Framework\View\Element\UiComponentFactory $uiComponentFactory,
    array $components = [],
    array $data = []
)
{
    $this->urlBuilder = $urlBuilder;
    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) {
            if (isset($item['form_id'])) {
                $item[$this->getData('name')] = [
                    'edit' => [
                        'href' => $this->urlBuilder->getUrl(
                            static::URL_PATH_EDIT,
                            [
                                'form_id' => $item['form_id']
                            ]
                        ),
                        'label' => __('Edit')
                    ],
                    'delete' => [
                        'href' => $this->urlBuilder->getUrl(
                            static::URL_PATH_DELETE,
                            [
                                'form_id' => $item['form_id']
                            ]
                        ),
                        'label' => __('Delete'),
                        'confirm' => [
                            'title' => __('Delete "${ $.$data.title }"'),
                            'message' => __('Are you sure you wan\'t to delete the Form "${ $.$data.title }" ?')
                        ]
                    ]
                ];
            }
        }
    }
    return $dataSource;
}
}

app/code/Dyode/Pricebeat/etc/di.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../lib/internal/Magento/Framework/ObjectManager/etc/config.xsd">
<virtualType name="DyodePricebeatGirdFilterPool" 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="DyodePricebeatformGridDataProvider" type="Magento\Framework\View\Element\UiComponent\DataProvider\DataProvider">
    <arguments>
        <argument name="collection" xsi:type="object" shared="false">Dyode\Pricebeat\Model\ResourceModel\Video\Collection</argument>
        <argument name="filterPool" xsi:type="object" shared="false">DyodePricebeatGirdFilterPool</argument>
    </arguments>
</virtualType>
<type name="Dyode\Pricebeat\Model\ResourceModel\Form\Grid\Collection">
    <arguments>
        <argument name="mainTable" xsi:type="string">dyode_pricebeat_form</argument>
        <argument name="eventPrefix" xsi:type="string">dyode_pricebeat_form_grid_collection</argument>
        <argument name="eventObject" xsi:type="string">form_grid_collection</argument>
        <argument name="resourceModel" xsi:type="string">Dyode\Pricebeat\Model\ResourceModel\Form</argument>
    </arguments>
</type>
<type name="Magento\Framework\View\Element\UiComponent\DataProvider\CollectionFactory">
    <arguments>
        <argument name="collections" xsi:type="array">
            <item name="dyode_pricebeat_listing_data_source" xsi:type="string">Dyode\Pricebeat\Model\ResourceModel\Form\Grid\Collection</item>
        </argument>
    </arguments>
</type>
 </config>

the adminside only show the title and button enter image description here

  • You mean to say, you want to display gird here like product gird ? – user55548 Sep 15 '18 at 12:53
1
 Your handle name is different in the di.xml file hence the uicomponent didn't find a handle its throwing error.

  Your datasource name should be dyode_pricebeat_listing_data_source
  not dyode_pricebeat_form_listing_data_source

    https://magento.stackexchange.com/questions/224369/i-want-to-create-admin-grid-using-ui-component-if-you-have-any-article-or-blog/224381#224381

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.