6

I want to use renderer on certain column of grid.I need hint/suggestion.I used this tutorial for creating a grid in magneto2 https://ranasohel.me/2014/04/20/creating-magento2-adminhtml-grid/. I used ui_component for creating a grid.Because in magento 2 ui_component use xml to display grid.

app/code/Test/Testimonial/view/adminhtml/ui_component/testimonial_blog_listing.xml

<?xml version="1.0" encoding="UTF-8"?>
<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">testimonial_blog_listing.testimonial_blog_listing_data_source</item>
            <item name="deps" xsi:type="string">testimonial_blog_listing.testimonial_blog_listing_data_source</item>
        </item>
        <item name="spinner" xsi:type="string">testimonial_blog_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 testimonial</item>
                <item name="class" xsi:type="string">primary</item>
                <item name="url" xsi:type="string">*/*/new</item>
            </item>
        </item>
    </argument>
    <dataSource name="testimonial_blog_listing_data_source">
        <argument name="dataProvider" xsi:type="configurableObject">
            <argument name="class" xsi:type="string">PostGridDataProvider</argument>
            <argument name="name" xsi:type="string">testimonial_blog_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 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">testimonial_blog_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">testimonial_blog_listing.testimonial_blog_listing.testimonial_blog_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">testimonial_blog_listing.testimonial_blog_listing.testimonial_blog_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">testimonial_blog_listing.testimonial_blog_listing_data_source</item>
                    <item name="chipsProvider" xsi:type="string">testimonial_blog_listing.testimonial_blog_listing.listing_top.listing_filters_chips</item>
                    <item name="storageConfig" xsi:type="array">
                        <item name="provider" xsi:type="string">testimonial_blog_listing.testimonial_blog_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">testimonial_blog_listing.testimonial_blog_listing.testimonial_blog_columns</item>
                    <item name="storageConfig" xsi:type="array">
                        <item name="provider" xsi:type="string">testimonial_blog_listing.testimonial_blog_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">testimonial_blog_listing.testimonial_blog_listing.listing_top.listing_filters</item>
                        <item name="imports" xsi:type="array">
                            <item name="visible" xsi:type="string">testimonial_blog_listing.testimonial_blog_listing.testimonial_blog_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">testimonial_blog_listing.testimonial_blog_listing.testimonial_blog_columns.ids</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="testimonial/blog/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="disable">
                <argument name="data" xsi:type="array">
                    <item name="config" 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="testimonial/blog/massDisable"/>
                    </item>
                </argument>
            </action>
            <action name="enable">
                <argument name="data" xsi:type="array">
                    <item name="config" 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="testimonial/blog/massEnable"/>
                    </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">testimonial_blog_listing.testimonial_blog_listing.listing_top.bookmarks</item>
                        <item name="namespace" xsi:type="string">current.paging</item>
                    </item>
                    <item name="selectProvider" xsi:type="string">testimonial_blog_listing.testimonial_blog_listing.testimonial_blog_columns.ids</item>
                </item>
            </argument>
        </paging>
    </container>
    <columns name="testimonial_blog_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">testimonial_blog_listing.testimonial_blog_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">testimonial_blog_listing.testimonial_blog_listing.testimonial_blog_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">testimonial_blog_listing.testimonial_blog_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">entity_id</item>
                </item>
            </argument>
        </selectionsColumn>
        <column name="entity_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="publish_date" 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">Publish Date</item>
                </item>
            </argument>
        </column>
        <column name="price">
            <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">Price</item>
                </item>
            </argument>
        </column>
        <actionsColumn name="actions" class="SR\testimonial\Ui\Component\Listing\Column\PostAction">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="indexField" xsi:type="string">entity_id</item>
                    <item name="viewUrlPath" xsi:type="string">testimonial/blog/edit</item>
                    <item name="urlEntityParamName" xsi:type="string">entity_id</item>
                </item>
            </argument>
        </actionsColumn>
    </columns>
</listing>
1

3 Answers 3

13

You can renderer grid column as follow

For Example to simple add "Test" with column values.

1) Define you renderer class to column Vendor\Modulename\Ui\Component\Listing\Column\Yourcolumn

Vendor/Modulename/view/adminhtml/ui_component/your_grid.xml

<column name="yourcolumn" class="Vendor\Modulename\Ui\Component\Listing\Column\Yourcolumn">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="filter" xsi:type="string">false</item>
            <item name="label" xsi:type="string" translate="true">Column Label</item>
        </item>
    </argument>
</column>

2) Now you can do anything with column data in renderer file

Vendor/Modulename/Ui/Component/Listing/Column/Yourcolumn.php

<?php

namespace Vendor\Modulename\Ui\Component\Listing\Column;

class Yourcolumn extends \Magento\Ui\Component\Listing\Columns\Column {

    public function __construct(
        \Magento\Framework\View\Element\UiComponent\ContextInterface $context,
        \Magento\Framework\View\Element\UiComponentFactory $uiComponentFactory,
        array $components = [],
        array $data = []
    ){
        parent::__construct($context, $uiComponentFactory, $components, $data);
    }

    public function prepareDataSource(array $dataSource) {
        if (isset($dataSource['data']['items'])) {

            foreach ($dataSource['data']['items'] as & $item) {

                //$item['yourcolumn'] is column name
                $item['yourcolumn'] = $item['yourcolumn']."Test"; //Here you can do anything with actual data

            }
        }

        return $dataSource;
    }
}
11
  • 3
    There's no renderer involved here, just modifying the data that is then rendered... May 26, 2017 at 9:28
  • 2
    Here I get actual data and attach test with each actual data. Please explain what is renderer in your language? May 26, 2017 at 11:53
  • @PrincePatel Do you know how to return HTML from renderer prepareDataSource function? Jan 2, 2018 at 8:19
  • 1
    Pass your html in $item['yourcolumn'] = "<h1>Test</h1>" and add <item name="bodyTmpl" xsi:type="string">ui/grid/cells/html</item> in column config. Jan 2, 2018 at 8:49
  • Yr Welcome @chiragdodia. Jan 2, 2018 at 9:12
3

You can use renderer in as follow

For Example I was getting country_id and I wanted to display whole Country Name in grid so I used renderer for it

In your ui component grid xml add column

<column name="country_codes" class="Vender\Modulename\Ui\Component\Listing\Column\Countries">
    <argument name="data" xsi:type="array">
        <item name="options" xsi:type="object">Magento\Directory\Model\Config\Source\Country</item>
        <item name="config" xsi:type="array">
            <item name="filter" xsi:type="string">select</item>
            <item name="dataType" xsi:type="string">multiselect</item>
            <item name="sorting" xsi:type="string">asc</item>
            <item name="label" translate="true" xsi:type="string">Countries</item>
        </item>
    </argument>
</column>

Your Renderer File

<?php

namespace Vender\Modulename\Ui\Component\Listing\Column;

class Countries extends \Magento\Ui\Component\Listing\Columns\Column {

    /**
     * @var \Magento\Directory\Api\CountryInformationAcquirerInterface
     */
    protected $countryInformation;

     /**
     * @param \Magento\Framework\View\Element\UiComponent\ContextInterface $context
     * @param \Magento\Framework\View\Element\UiComponentFactory $uiComponentFactory
     * @param \Magento\Directory\Api\CountryInformationAcquirerInterface $countryInformation
     * @param array $components
     * @param array $data
     */
    public function __construct(
        \Magento\Framework\View\Element\UiComponent\ContextInterface $context,
        \Magento\Framework\View\Element\UiComponentFactory $uiComponentFactory,
        \Magento\Directory\Api\CountryInformationAcquirerInterface $countryInformation,
        array $components = [],
        array $data = []
    ){
        $this->countryInformation = $countryInformation;
        parent::__construct($context, $uiComponentFactory, $components, $data);
    }

    /**
     * Prepare Data Source
     *
     * @param array $dataSource
     * @return array
     */
    public function prepareDataSource(array $dataSource) {
        if (isset($dataSource['data']['items'])) {
            $fieldName = $this->getData('name');
            foreach ($dataSource['data']['items'] as & $item) {
                $countryNames = [];
                $countryCodes = [];
                if(!empty($item[$fieldName])){
                    $countryCodes = explode(',', $item[$fieldName]);
                }
                foreach($countryCodes as $codes){
                    $country = $this->countryInformation->getCountryInfo($codes);
                    $countryNames[] = $country->getFullNameLocale();
                }
                $item[$fieldName] = implode(',', $countryNames);
            }
        }

        return $dataSource;
    }
}
4
0

Found it.

There's no "renderer" when it comes to UI Component, instead you need to use the bodyTmpl param to set a custom .html template for the cell, like this:

<listing>
  [...]
  <columns>
    <column name="column_name_in_database">
      <settings>
        <filter>text</filter>
        <label translate="true">Some Label</label>

        <!-- here's the trick -->
        <bodyTmpl>YourVendor_YourModule/ui/grid/cells/code</bodyTmpl>

        <!-- you can also add a css class into the <td> as below -->
        <fieldClass>
          <class name="myclass">true</class>
        </fieldClass>
      </settings>
    </column>
    [..]
  </columns>
</listing>

Then create the template in app/code/YourVendor/YourModule/view/adminhtml/web/template/ui/grid/cells/code.html and fill it with the desired custom html:

<!-- /**
 * @see vendor/magento/module-ui/view/base/web/templates/grid/cells/text.html
*/ -->
<code class="data-grid-cell-content" text="$col.getLabel($row())"></code>

💡 Tip: To see the available row data in the template, you can use this:

<pre data-bind='text: ko.toJSON($row().status, null, 2)'></pre>

Real-world example · Official documentation

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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