Looking at the customer grid in Magento 2's backend, it's not 100% clear to me how Magento's javascript code populates values in grid cells.

For example, it appears the view model constructor for the Name cell is


and this cell has a header and body KnockoutJS template of

Knockout.js headerTmpl: ui/grid/columns/text
Knockout.js bodyTmpl: ui/grid/cells/text    

If I look at the source file for the text cell body template

#File: vendor/magento/module-ui/view/base/web/templates/grid/cells/text.html    
<div class="data-grid-cell-content" text="$col.getLabel($row())"/>    

It's not 100% clear how the value for the cell is rendered. The div itself is empty, and even if we expand the text="" attribute into native KnockoutJS

<div xmlns="http://www.w3.org/1999/xhtml" class="data-grid-cell-content" data-bind="text: $col.getLabel($row())"></div>

It's still not clear what's going on. There's a text binding that will set a value -- but it's not clear where the object in $col or $row come from.

Has anyone dug through this to figure out what's going on?

1 Answer 1


It looks like the answer here is -- you need to remember that those templates are usually called by a parent template, and that parent template can define variables in the sub-templates. For example, consider this template further up the tree

#File: vendor/magento/module-ui/view/base/web/templates/grid/listing.html
 * Copyright © 2016 Magento. All rights reserved.
 * See COPYING.txt for license details.
<div class="admin__data-grid-wrap" data-role="grid-wrapper">
    <table class="data-grid" data-role="grid">
            <tr each="data: getVisible(), as: '$col'" render="getHeader()"/>
            <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 ifnot="hasData()" class="data-grid-tr-no-data">
                <td attr="colspan: countVisible()" translate="'We couldn\'t find any records.'"/>

This template foreaches over its view model data and defines a $col variable that (should?) be available to sub-templates.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.