0

I want to add content limit to 50 characters on content of the admin grid for specific column. Can anyone help me out.

enter image description here

below is the code used for this grid : /app/code/Vendor/Module/view/adminhtml/ui_component/gridanswer_record_grid_list.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">gridanswer_record_grid_list.gridanswer_record_grid_list_data_source</item>
            <item name="deps" xsi:type="string">gridanswer_record_grid_list.gridanswer_record_grid_list_data_source</item>
        </item>
        <item name="spinner" xsi:type="string">grid_records_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 Question</item>
                <item name="class" xsi:type="string">primary</item>
                <item name="url" xsi:type="string">*/*/addrow</item>
            </item>
        </item>
    </argument>
    <dataSource name="gridanswer_record_grid_list_data_source">
        <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">gridanswer_record_grid_list_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"/>
        <columnsControls name="columns_controls"/>

        <filters name="listing_filters">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <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>
            </argument>
    </filters>
        <massaction name="listing_massaction">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="selectProvider" xsi:type="string">gridanswer_record_grid_list.gridanswer_record_grid_list.grid_records_columns.ids</item>
                    <item name="component" xsi:type="string">Magento_Ui/js/grid/tree-massactions</item>
                    <item name="indexField" xsi:type="string">id</item>
                </item>
            </argument>
            <!-- Mass actions which you want to add in your grid-->
            <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="gridanswer/grid/massdelete"/>
                        <item name="confirm" xsi:type="array">
                            <item name="title" xsi:type="string" translate="true">Delete</item>
                            <item name="message" xsi:type="string" translate="true">Do you want to delete selected row record?</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">gridanswer_record_grid_list.gridanswer_record_grid_list.listing_top.bookmarks</item>
                        <item name="namespace" xsi:type="string">current.paging</item>
                    </item>
                    <item name="selectProvider" xsi:type="string">gridanswer_record_grid_list.gridanswer_record_grid_list.grid_records_columns.ids</item>
                </item>
            </argument>
        </paging>
        <exportButton class="Magento\Ui\Component\ExportButton">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="options" xsi:type="array">
                    <item name="csv" xsi:type="array">
                        <item name="value" xsi:type="string">csv</item>
                        <item name="label" xsi:type="string" translate="true">CSV</item>
                        <item name="url" xsi:type="string">mui/export/gridToCsv</item>
                    </item>
                    <item name="xml" xsi:type="array">
                        <item name="value" xsi:type="string">xml</item>
                        <item name="label" xsi:type="string" translate="true">Excel XML</item>
                        <item name="url" xsi:type="string">mui/export/gridToXml</item>                          
                    </item> 
                </item>
            </item>
        </argument>
    </exportButton>
    </container>
    <columns name="grid_records_columns">
        <selectionsColumn name="ids">
           <argument name="data" xsi:type="array">
               <item name="config" xsi:type="array">
                   <item name="indexField" xsi:type="string">entity_id</item>
                   <item name="sorting" xsi:type="string">desc</item>
                   <item name="sortOrder" xsi:type="number">0</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">text</item>
                   <item name="label" xsi:type="string" translate="true">ID</item>
                   <item name="sortOrder" xsi:type="number">1</item>
               </item>
           </argument>
       </column>
       <!-- <column name="vendor_id">
           <argument name="data" xsi:type="array">
               <item name="config" xsi:type="array">
                   <item name="filter" xsi:type="string">text</item>
                   <item name="label" xsi:type="string" translate="true">Vendor ID</item>
                   <item name="sortOrder" xsi:type="number">1</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="label" xsi:type="string" translate="true">Name</item>
                   <item name="sortOrder" xsi:type="number">2</item>
               </item>
           </argument>
       </column>
       <column name="email" >
           <argument name="data" xsi:type="array">
               <item name="config" xsi:type="array">
                   <item name="filter" xsi:type="string">text</item>
                   <item name="label" xsi:type="string" translate="true">Email</item>
                   <item name="sortOrder" xsi:type="number">3</item>
               </item>
           </argument>
       </column>
       <column name="question" >
           <argument name="data" xsi:type="array">
               <item name="config" xsi:type="array">
                   <item name="filter" xsi:type="string">text</item>
                   <item name="label" xsi:type="string" translate="true">Message By Seller</item>
                   <item name="sortOrder" xsi:type="number">3</item>
               </item>
           </argument>
       </column>
       <column name="answer" >
           <argument name="data" xsi:type="array">
               <item name="config" xsi:type="array">
                   <item name="filter" xsi:type="string">text</item>
                   <item name="label" xsi:type="string" translate="true">Message By Admin</item>
                   <item name="sortOrder" xsi:type="number">3</item>
               </item>
           </argument>
       </column>
       <column name="is_answered" >
           <argument name="data" xsi:type="array">
               <item name="options" xsi:type="object">Vendor\Module\Model\Status</item>
               <item name="config" xsi:type="array">
                   <item name="filter" xsi:type="string">select</item>
                   <item name="component" xsi:type="string">Magento_Ui/js/grid/columns/select</item>
                   <item name="dataType" xsi:type="string">select</item>
                   <item name="default" xsi:type="string">1</item>
                   <item name="sortOrder" xsi:type="number">4</item>
                   <item name="label" xsi:type="string" translate="true">Status</item>
               </item>
           </argument>
       </column>
       <column name="update_time" class="Magento\Ui\Component\Listing\Columns\Date" >
           <argument name="data" xsi:type="array">
               <item name="config" xsi:type="array">
                   <item name="component" xsi:type="string">Magento_Ui/js/grid/columns/date</item>
                   <item name="dataType" xsi:type="string">date</item>
                   <item name="sortOrder" xsi:type="number">6</item>
                   <item name="label" xsi:type="string" translate="true">Update Time</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="sortOrder" xsi:type="number">5</item>
                   <item name="label" xsi:type="string" translate="true">Created At</item>
               </item>
           </argument>
       </column>
       <!-- Add Action with each row of grid and for this we will create a class Action -->
       <actionsColumn name="actions" class="Vendor\Module\Ui\Component\Listing\Grid\Column\Action">
           <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">id</item>
               </item>
           </argument>
       </actionsColumn>
    </columns>
</listing>
Improve this question
3
  • Can you please add some code for how you are rendering the grid? Using block file or ui component?
    – Rahul Barot
    Jul 5, 2021 at 11:54
  • @RahulBarot This is rendered using ui component. I have also added the code in description of question.
    – PRABHAT MISHRA
    Jul 5, 2021 at 12:17
  • please check my answer.
    – Rahul Barot
    Jul 5, 2021 at 12:49

1 Answer 1

Reset to default
2

You can use renderer for each column to modify the content of it. For example for question column

Vendor/Module/view/adminhtml/ui_component/gridanswer_record_grid_list.xml

<column name="question" class="Vendor\Module\Ui\Component\Listing\Column\Question">
    <argument name="data" xsi:type="array">
       <item name="config" xsi:type="array">
           <item name="filter" xsi:type="string">text</item>
           <item name="label" xsi:type="string" translate="true">Message By Seller</item>
           <item name="sortOrder" xsi:type="number">3</item>
       </item>
    </argument>
</column>

Vendor/Module/Ui/Component/Listing/Column/Question.php

<?php

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

class Question 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['question'] = substr($item['question'],0,50);
            }
        }
        return $dataSource;
    }
}

Thanks!

Improve this answer
2

Your Answer

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

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