title: Access child object attributes in a dxDataGrid
body: <p>I'm building an app (multi-channel) with a lot of data grids and there is this problem that I can't find a solution for it in <code>DevExtreme</code> tutorials and guides.<br>
  I implemented a <code>dxDataGrid</code> with the <code>knockout</code> approach, here is my entity:<br></p>
  
  <pre><code>(function() {
      Application1.playerViewModel = function(data) {
              this.id = ko.observable();
              this.firstname = ko.observable();
              this.lastname = ko.observable();
              this.fullname = ko.observable();
              this.date_of_birth = ko.observable();
              this.country = ko.observable();
              this.team = ko.observable();
              this.teamname = ko.observable();
              this.position = ko.observable();
              if(data)
                  this.fromJS(data);
      };
  
      $.extend(Application1.playerViewModel.prototype, {
          toJS: function () {
              return {
                  id: this.id(),
                  firstname: this.firstname(),
                  lastname: this.lastname(),
                  date_of_birth: this.date_of_birth(),
                  fullname: this.firstname()+" "+this.lastname,
                  country: Application1.db.objectLink("countries", this.country() ? this.country().id(): undefined),
                  team: Application1.db.objectLink("teams", this.team() ? this.team().id() : undefined),
                  teamname: this.team().name(),
                  position: Application1.db.objectLink("positions", this.position() ? this.position().id(): undefined),
              };
          },
  
          fromJS: function(data) {
              if(data) {
                  this.id(data.id);
                  this.firstname(data.firstname);
                  this.lastname(data.lastname);
                  this.fullname(data.firstname + " " + data.lastname);
                  this.date_of_birth(data.date_of_birth);
                  if(data.country)
                      this.country(new Application1.countryViewModel(data.country));
                  if(data.team){
                      this.team(new Application1.teamViewModel(data.team));
                      this.teamname = data.team.name;
                  }
                  if(data.position)
                      this.position(new Application1.positionViewModel(data.position));
              }
          }
      });
  })();
  </code></pre>
  
  <p>Here is the <code>viewModel</code>:</p>
  
  <pre><code>Application1.players = function (params, viewInfo) {
      "use strict";
  
      var shouldReload = false,
          openCreateViewAsRoot = viewInfo.layoutController.name === "split",
          playersDataSource = new DevExpress.data.DataSource({
              store: Application1.db.players,
              map: function (item) {
                  return new Application1.playerViewModel(item);
              }
          }),
          dataFieldList =  [
              { dataField: 'firstname', allowGrouping: false },
              { dataField: 'lastname', allowGrouping: false },
              { dataField: 'date_of_birth', sortIndex: 0, sortOrder: 'asc', allowGrouping: false },
              { dataField: 'country', visible: false },
              { dataField: 'team', allowGrouping: true },
              { dataField: 'position', allowGrouping: true },
              { dataField: 'fullname', visible: false, allowGrouping: false}
          ], columnChooser = { enabled: true }, allowColumnReordering = true, sorting = { mode: 'multiple' },
              groupPanel = { visible: true, emptyPanelText: 'Drag a column header here to group grid records' },
              pager = { visible: true },
              paging = { pageSize: 10 },
              editing = {
                  editEnabled: true,
                  editMode: 'row',
                  insertEnabled: true,
                  removeEnabled: true
              },
              filterRow = { visible: true },
              searchPanel = { visible: true },
              selection = { mode: 'none' } ;
  
      function handleplayersModification() {
          shouldReload = true;
      }
  
      function handleViewShown() {
          if (shouldReload) {
              shouldReload = false;
              dataSource.pageIndex(0);
              dataSource.load();
          }
      }
  
      function handleViewDisposing() {
          Application1.db.players.off("modified", handleplayersModification);
      }
  
      function refreshList() {
          dataSource.pageIndex(0);
          dataSource.load();
      }
  
      Application1.db.players.on("modified", handleplayersModification);
  
      return {
          refreshList: refreshList,
          viewShown: handleViewShown,
          viewDisposing: handleViewDisposing,
          openCreateViewAsRoot: openCreateViewAsRoot,
          players: playersDataSource,
          dataFieldList: dataFieldList,
          columnChooser: columnChooser,
          allowColumnReordering: allowColumnReordering,
          sorting: sorting,
          groupPanel: groupPanel,
          pager: pager,
          paging: paging,
          editing: editing,
          filterRow: filterRow,
          searchPanel: searchPanel,
          selection: selection
      };
  };
  </code></pre>
  
  <p>The HTML:</p>
  
  <pre class="lang-xml prettyprint-override"><code> &lt;div style="height:800px; margin: 0 auto"
           data-bind="dxDataGrid:{ dataSource:players, columns:dataFieldList, columnChooser:columnChooser, allowColumnReordering:allowColumnReordering, sorting:sorting, groupPanel:groupPanel, pager:pager, paging:paging, editing:editing, filterRow:filterRow, searchPanel:searchPanel, selection:selection }"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>And the result:
  <img src="https://i.stack.imgur.com/nJiJQ.png" alt="enter image description here"></p>
  
  <p>I tried putting <code>team.name</code> and <code>position.name</code> in the <code>dataFields</code> of the configuration object <code>dataFieldList</code> but it returns blank columns.</p>