2

I want to add row total of column in 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.Just I need a hint to add row total of column in bottom.column name is price.I need price column total in bottom of 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>
  • what is the issue are coming after adding your price column defined in above code? – Rakesh Jesadiya Jun 1 '16 at 6:19
  • Not any issue but how can I display total of column in row ? – Niraj Patel Jun 1 '16 at 8:57
  • means , your row total are not display inside grid, right? – Rakesh Jesadiya Jun 1 '16 at 9:06
  • Means that how can I add new row total in grid in magento 2 because in magento 2 used XML ui_component to display grid column so how can I add row total – Niraj Patel Jun 1 '16 at 9:17
  • row total is your price column, right and you want to display price column inside your column, Is this right> – Rakesh Jesadiya Jun 1 '16 at 9:20
4
+50

I find a solution. I hope this can help you.

Find the row in your ui component js file where is write the item tag with name "component":

<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>

and change it like:

 <argument name="data" xsi:type="array">
        <item name="js_config" xsi:type="array">
            <item name="component" xsi:type="string">YourVendor_YourModule/js/grid/provider</item>
        </item>
    </argument>

The path of that js file is: vendor/magento/module-ui/view/base/web/js/grid/provider.js

So the new path of your new custom js file will be: app/code/YourVendor/YourModule/view/base/web/js/grid/provider.js

Change the method "processData" in the way that let you calculate the total of the price column, for example like this: CHECK MODIFIED CODE COMMENT.JUST CHECK processData function because just changed that function and other function copied from vendor\magento\module-ui\view\base\web\js\grid/provider.js

/**
 * Copyright © 2016 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */

define([
    'jquery',
    'underscore',
    'mageUtils',
    'uiElement',
    'Magento_Ui/js/modal/alert',
    'mage/translate'
], function ($, _, utils, Element, alert, $t) {
    'use strict';

    return Element.extend({
        defaults: {
            listens: {
                params: 'reload'
            }
        },

        /**
         * Initializes provider component.
         *
         * @returns {Provider} Chainable.
         */
        initialize: function () {
            utils.limit(this, 'reload', 300);
            _.bindAll(this, 'onReload');

            return this._super();
        },

        /**
         * Initializes provider config.
         *
         * @returns {Provider} Chainable.
         */
        initConfig: function () {
            this._super();

            this.setData({
                items: [],
                totalRecords: 0
            });

            return this;
        },

        /**
         *
         * @param {Object} data
         * @returns {Provider} Chainable.
         */
        setData: function (data) {
            data = this.processData(data);

            this.set('data', data);

            return this;
        },

        /**
         * Reloads data with current parameters.
         */
        reload: function () {
            this.trigger('reload');

            if (this.request && this.request.readyState !== 4) {
                this.request.abort();
            }

            this.request = $.ajax({
                url: this['update_url'],
                method: 'GET',
                data: this.get('params'),
                dataType: 'json'
            });

            this.request
                .done(this.onReload)
                .error(this.onError);
        },

        /* START MODIFIED CODE */
        processData: function (data) {
        var items = data.items;
        var total = 0;
        _.each(items, function (record, index) {
            record._rowIndex = index;
         total += parseFloat(record.price);//price is column of custom table
        });
        jQuery("#custom_total_value").text(total);
        return data;
    }, 
        /* END MODIFIED CODE */
        /**
         * Handles reload error.
         */
        onError: function (xhr) {
            if (xhr.statusText === 'abort') {
                return;
            }

            alert({
                content: $t('Something went wrong.')
            });
        },

        /**
         * Handles successful data reload.
         *
         * @param {Object} data - Retrieved data object.
         */
        onReload: function (data) {
            this.setData(data)
                .trigger('reloaded');
        }
    });
});

record is an object inside the collection which is printed in the grid.

After you can add a block in your layout file:

 <referenceContainer name="content">
        <uiComponent name="your_listing"/>
        <block class="Magento\Framework\View\Element\Template" template="YourVendor_YourModuke::custom_total.phtml" />
    </referenceContainer>

Inside custom_total.phtml I write:

<span><b>Total</b></span> <span id="custom_total_value"></span>

So I can see a row down the grid where is printed the total.

To see the changes in the grid remove all static file and cache with the command:

rm -rf var/cache/* var/page_cache/* var/view_preprocessed/* pub/static/*

inside your root magento directory.

Then recompile static content:

php bin/magento setup:static-content:deploy your_language

EDIT: Alternatively you can modify data object returned by processData method, adding another record with same attributes of a normal record but with totals as values. In this way probably you can have a new row inside the grid. I didn't try this solution but I think it will work.

  • Where I have to put above your XML code in testimonial_blog_listing.xml file ? – Niraj Patel Jun 5 '16 at 1:15
  • I tried but my custom grid just loading nothing display. When I replace "YourVendor_YourModule/js/grid/provider" this code by old code "Magento_Ui/js/grid/provider" again then it display normal correct grid but not display total row.what is fault ? i think we are close answer.plz help me – Niraj Patel Jun 5 '16 at 7:51
  • Yes you have to put the XML tags inside testimonial_blog_listing.xml file Did you create the block and phtml file?. Did you compile static file and clean the cache? – ProcessKiller Jun 5 '16 at 9:54
  • you have to put your modified provider.js in app/code/Test/Testimonial/view/base/web/js/grid/provider.js and then remove pub/static/* and then recompile static content or magento cannot read your provider.js file – ProcessKiller Jun 5 '16 at 9:57
  • thank you very much.I accepted your answer.I changed code in my provider.js and copy from Magento_Ui provider.js file and now it works and edited your answer.thank you again – Niraj Patel Jun 5 '16 at 10:33

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.