3

My custom module adds a column to the Sales Order grid. The problem is that the bar above the Grid disappeared. This is shown in the screenshots. With my module: With my module

Without my module: Without my module

In order to add the columns I use:

In view/adminhtml/ui_component/sales_order_grid.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">
    <columns name="sales_order_columns">

        <column name="create_invoice" class="Vendor\Module\Ui\Component\Listing\Column\ColumnCreateInvoice">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="label" xsi:type="string" translate="true">Create invoice</item>
                    <item name="component" xsi:type="string">Vendor_module/js/grid/columns/create_invoice</item>
                    <item name="sortable" xsi:type="boolean">false</item>
                    <item name="visible" xsi:type="boolean">true</item>
                </item>
            </argument>
        </column>

    </columns>
</listing>

In Ui/Component/Listing/Column/ColumnCreateInvoice.php :

define([
    'Magento_Ui/js/grid/columns/column',
    'jquery',
    'mage/template',
    'Magento_Ui/js/modal/modal',
    'ko',
], function (Column, $, ko) {
    'use strict';

    return Column.extend({
        defaults: {
            bodyTmpl: 'ui/grid/cells/html',
            fieldClass: {
                'data-grid-html-cell': true
            }
        },

        getUrl: function (row) {
            return row[this.index+'_Url'];
        },
        getOrderId: function (row) {
            return row[this.index + '_orderId'];
        },
        getLabel: function (row) {
            return row[this.index + '_html']
        },

        preview: function (row)
        {
            $.post(this.getUrl(row)).then(function(response)
            {
                if(response.descriptionResponse != '')
                    alert(response.descriptionResponse);
            })
        },

        getFieldHandler: function (row)
        {
            return this.preview.bind(this, row);
        }
    });
});
6

The bar was under the table and not disappeared. Just adjust the order and you'll get this solved. I solved the problem in Magento 2.2.x adding <listingToolbar name="listing_top"/> on top of columns in view/adminhtml/ui_component/sales_order_grid.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">
<listingToolbar name="listing_top"/> 
    <columns name="sales_order_columns">

        <column name="create_invoice" class="Vendor\Module\Ui\Component\Listing\Column\ColumnCreateInvoice">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="label" xsi:type="string" translate="true">Create invoice</item>
                    <item name="component" xsi:type="string">Vendor_module/js/grid/columns/create_invoice</item>
                    <item name="sortable" xsi:type="boolean">false</item>
                    <item name="visible" xsi:type="boolean">true</item>
                </item>
            </argument>
        </column>

    </columns>
</listing>

Source: https://github.com/magento/magento2/issues/5408

  • Great solution :) +1 – Dhaval Solanki Aug 24 '18 at 11:11
  • Have you tried to add the sequence to the module.xml ? – Vincent L'Ecluse Feb 26 at 11:09
  • No. But why module.xml ? That file contains the following information: Module name, Module version, Dependencies. – Vixent Feb 27 at 11:11

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.