Magento 2 – Sales Order Grid Bar Disappeared After Adding Column

columncustom-column-gridmagento2sales-order-grid

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);
        }
    });
});

Best Answer

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