How is a backend grid detects whether a column should be visible?

dmitrii_fediuk · April 2, 2016, 9:03pm

Preliminary reading: How is the a backend grid implemented?

The default template for a backend grid:

magento/magento2/blob/1f7a63dc97/app/code/Magento/Ui/view/base/web/templates/grid/listing.html#L7-L22


<div class="admin__data-grid-wrap" data-role="grid-wrapper">
<table class="data-grid" data-role="grid">
   <thead>
        <tr each="data: getVisible(), as: '$col'" render="getHeader()"/>
    </thead>
    <tbody>
        <tr class="data-row" repeat="foreach: rows, item: '$row'" css="'_odd-row': $index % 2">
            <td outerfasteach="data: getVisible(), as: '$col'"
                css="getFieldClass($row())" click="getFieldHandler($row())" template="getBody()"/>
        </tr>
        <tr ifnot="hasData()" class="data-grid-tr-no-data">
            <td attr="colspan: countVisible()" translate="'We couldn\'t find any records.'"/>
        </tr>
    </tbody>
</table>
</div>

github.com

magento/magento2/blob/1f7a63dc97/app/code/Magento/Ui/view/base/web/js/grid/listing.js#L209-L218


/**
 * Returns reference to 'visibleColumns' array.
 *
 * @returns {Array}
 */
getVisible: function () {
    var observable = ko.getObservable(this, 'visibleColumns');


    return observable || this.visibleColumns;
},

github.com

magento/magento2/blob/1f7a63dc97/app/code/Magento/Ui/view/base/web/js/grid/listing.js#L264-L273


/**
 * Updates array of visible columns.
 *
 * @returns {Listing} Chainable.
 */
updateVisible: function () {
    this.visibleColumns = this.elems.filter('visible');


    return this;
},

The keys are the sortOrder's, e.g:

github.com

magento/magento2/blob/1f7a63dc97/app/code/Magento/Catalog/view/adminhtml/ui_component/product_listing.xml#L150-L150


<item name="sortOrder" xsi:type="number">20</item>

The default UI component for a column is Magento_Ui/js/grid/columns/column:

It has the visible property:

The component observes it:

github.com

magento/magento2/blob/1f7a63dc97/app/code/Magento/Ui/view/base/web/js/grid/columns/column.js#L54-L71


/**
 * Initializes observable properties.
 *
 * @returns {Column} Chainable.
 */
initObservable: function () {
    this._super()
        .track([
            'visible',
            'sorting',
            'disableAction'
        ])
        .observe([
            'dragging'
        ]);


    return this;
},