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