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>
Improve this question
1
  • 1
    Did you find any solution? Commented Mar 28, 2019 at 14:19

3 Answers 3

Reset to default
14

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;
    }
}
Improve this answer
11
  • 3
    There's no renderer involved here, just modifying the data that is then rendered... Commented 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? Commented May 26, 2017 at 11:53
  • @PrincePatel Do you know how to return HTML from renderer prepareDataSource function? Commented 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. Commented Jan 2, 2018 at 8:49
  • Yr Welcome @chiragdodia. Commented 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;
    }
}
Improve this answer
4
  • 1
    There's no renderer involved here, just modifying the data that is then rendered... Commented May 26, 2017 at 9:27
  • What you exactly want to do? Commented May 26, 2017 at 12:01
  • but this rendered column does not show any value in Exported CSv sheet, see this URL stackoverflow.com/questions/47086239/…. Commented Apr 18, 2019 at 20:16
  • Data not coming in export Commented Jan 10, 2020 at 5:22
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

Improve this answer

Your Answer

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

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.