1

I've created custom admin tab with layout form.

But i am failing to render grid in my created tab.

Below is my Block code where i would like to show products.

../Block/Adminhtml/Grid/Edit/Tab/Products.php

class Products extends \Magento\Backend\Block\Template implements \Magento\Backend\Block\Widget\Tab\TabInterface
{

    public function __construct(
        Context $context,
        \Magento\Catalog\Model\ResourceModel\Product\CollectionFactory $productCollectionFactory,
        array $data = []
    )
    {
        parent::__construct($context);
        $this->productCollectionFactory = $productCollectionFactory;
    }

    protected function _construct()
    {
        parent::_construct();
        $this->setId('hello_tab_grid');
        $this->setDefaultSort('entity_id');
        $this->setUseAjax(true);
    }

    protected function _prepareCollection()
    {

        $collection = $this->productCollectionFactory->create();

        $this->setCollection($collection);

        return parent::_prepareCollection();
    }

    protected function _prepareColumns()
    {
        $this->addColumn('entity_id', [
                'header' => __('ID'),
                'sortable' => true,
                'index' => 'entity_id',
                'type' => 'number',
                'header_css_class' => 'col-id',
                'column_css_class' => 'col-id'
            ]
        );
        $this->addColumn('title', [
                'header' => __('Sku'),
                'index' => 'sku',
                'header_css_class' => 'col-name',
                'column_css_class' => 'col-name'
            ]
        );
        $this->addColumn('position', [
                'header' => __('Position'),
                'name' => 'position',
                'width' => 60,
                'type' => 'number',
                'validate_class' => 'validate-number',
                'index' => 'position',
                'editable' => true,
            ]
        );

        return $this;
    }

    public function getRowUrl($item)
    {
        return '#';
    }

    public function getTabLabel()
    {
        return __('Products');
    }

    /**
    * @return bool
    */
    public function isHidden()
    {
        return false;
    }

    public function getTabTitle()
    {
        return $this->getTabLabel();
    }


    public function canShowTab()
    {
        return true;
    }


    public function getTabUrl()
    {
        return $this->getUrl('credit/grid/products');
    }

    /**
    * @return string
    */
    public function getTabClass()
    {
        return 'ajax only';
    }
 }

../Controller/Adminhtml/Grid/Products.php

class Products extends \Magento\Backend\App\Action
{
    protected $resultLayoutFactory;

    public function __construct(
        LayoutFactory $resultLayoutFactory
    )
    {
        parent::__construct($context);

        $this->resultLayoutFactory = $resultLayoutFactory;
    }

    public function execute()
    {
        $resultLayout->getLayout()->getBlock('grid.edit.tab.products');
        return $this->resultLayoutFactory->create();
    }
}

../adminhtml/credit_grid_products.xml

<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/layout_generic.xsd">
<container name="root" label="Root">
    <block class="Vendor\Module\Block\Adminhtml\Grid\Edit\Tab\Products" name="grid.edit.tab.products"/>
    <block class="Magento\Backend\Block\Widget\Grid\Serializer" name="grid_edit_tab_productsgrid_serializer">
        <arguments>
            <argument name="input_names" xsi:type="string">position</argument>
            <argument name="grid_block" xsi:type="string">grid.edit.tab.products</argument>
            <argument name="input_element_name" xsi:type="string">links[products]</argument>
        </arguments>
    </block>
</container>

../adminhtml/layout/credit_grid_productsgrid.xml

<container name="root" label="Root">
    <block class="Vendor\Module\Block\Adminhtml\Grid\Edit\Tab\Products" name="grid.edit.tab.products"/>
</container>

Does any one has idea what's missing with this code ?

execute method is working but grid isn't rendering.

Any Help would be appreciated.

1

I was used your code in .xhtml file but no luck

for render UI Componunt grid

my code

<?xml version="1.0" encoding="UTF-8"?>

   <insertListing>
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="autoRender" xsi:type="boolean">true</item>
            <item name="ns" xsi:type="string">event_record_list</item>
        </item>
    </argument>
</insertListing>
0

Use insertListing to create grid under tab usi uiComponent (Magento 2.2)

<fieldset name="tab2">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="label" xsi:type="string" translate="true">tab2</item>
        </item>
    </argument>
    <insertListing>
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="autoRender" xsi:type="boolean">true</item>
                <item name="ns" xsi:type="string">ui_component_for_the_grid</item>
            </item>
        </argument>
    </insertListing>
</fieldset>
-1

Step 1 : Declare resource

app/code/Bannerslider/Banner/etc/di.xml

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../lib/internal/Magento/Framework/ObjectManager/etc/config.xsd">
<type name="Magento\Framework\View\Element\UiComponent\DataProvider\CollectionFactory">
    <arguments>
        <argument name="collections" xsi:type="array">
            <item name="Bannerslider_Banner_post_listing_data_source" xsi:type="string">Mageplaza\HelloWorld\Model\ResourceModel\Post\Grid\Collection</item>
        </argument>
    </arguments>
</type>
<virtualType name="Mageplaza\HelloWorld\Model\ResourceModel\Post\Grid\Collection" type="Magento\Framework\View\Element\UiComponent\DataProvider\SearchResult">
    <arguments>
        <argument name="mainTable" xsi:type="string">Bannerslider_Banner_post</argument>
        <argument name="resourceModel" xsi:type="string">Mageplaza\HelloWorld\Model\ResourceModel\Post</argument>
    </arguments>
</virtualType>

Step 2 : Create layout file

app/code/Bannerslider/Banner/view/adminhtml/layout/Bannerslider_Banner_post_index.xml

<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="Bannerslider_Banner_post_listing"/>
    </referenceContainer>
</body>

Step 3 : Create component layout file

app/code/Mageplaza/HelloWorld/view/adminhtml/ui_component/Bannerslider_Banner_post_listing.xml

<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">Bannerslider_Banner_post_listing.Bannerslider_Banner_post_listing_data_source</item>
        <item name="deps" xsi:type="string">Bannerslider_Banner_post_listing.Bannerslider_Banner_post_listing_data_source</item>
    </item>
    <item name="spinner" xsi:type="string">spinner_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 Post</item>
            <item name="class" xsi:type="string">primary</item>
            <item name="url" xsi:type="string">*/*/new</item>
        </item>
    </item>
</argument>
<dataSource name="nameOfDataSource">
    <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">Bannerslider_Banner_post_listing_data_source</argument>
        <argument name="primaryFieldName" xsi:type="string">post_id</argument>
        <argument name="requestFieldName" xsi:type="string">id</argument>
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="component" xsi:type="string">Magento_Ui/js/grid/provider</item>
                <item name="update_url" xsi:type="url" path="mui/index/render"/>
                <item name="storageConfig" xsi:type="array">
                    <item name="indexField" xsi:type="string">post_id</item>
                </item>
            </item>
        </argument>
    </argument>
</dataSource>
<columns name="spinner_columns">
    <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">post_id</item>
            </item>
        </argument>
    </selectionsColumn>
    <column name="post_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="name">
        <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">Name</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>
</columns>

For more information Check here

  • Thanks for Responding But answer you provided is for grid, I already created it, Read question again, I need grid in tab. – TBS Mage May 31 '18 at 9:33
  • It is possible, but for that you should have to use Form fieldset, may be it is not possible using UI Componet. – Chirag Patel May 31 '18 at 9:45

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.