title: How do I set the DataSource for a DevExtreme MasterDetail DataGrid which uses the same DataSource for both Master and Detail?
body: <p>I have an existing Asp.NetCore web app built using EFC written in C#.
  The webpages are built using Razor.</p>
  <p>I'm in the process of migrating to using some DevExpress DevExtreme Asp.Net Core controls.
  Specifically I'm attempting to use the DevExtreme DataGrid to build a Master-Detail data grid.
  I'm having difficulty setting up the the DataSource for the Detail portion of the grid.</p>
  <p><strong>Consider the following class definitions in my model:</strong></p>
  <pre><code>public class Address
  {
      [Key]
      public Guid AddressId { get; set; }
      public string StreetAddress { get; set; }
      public string City { get; set; }
      public string State { get; set; }
      public string ZipCode { get; set; }
      public string Country { get; set; }
  }
  
  public class Owner
  {
      [Key]
      public Guid OwnerId { get; set; }
      public string FirstName { get; set; }
      public string LastName { get; set; }
      public Address OwnerAddress { get; set; }
      public string PhoneNumber { get; set; }
      public string CellNumber { get; set; }
  }
  </code></pre>
  <p><strong>Here is my page definition:</strong></p>
  <pre><code>@model IEnumerable&lt;Owner&gt;
  @{ Layout = &quot;_DevExtremeLayout&quot;; ViewBag.Title = &quot;All Owners&quot;;}
  
  @(Html.DevExtreme().DataGrid&lt;SmartTracPoc.Models.Owner&gt;()
      .DataSource(Model)
      .RemoteOperations(true)
      .AllowColumnReordering(true)
      .RowAlternationEnabled(true)
      .ShowBorders(true)
      .OnContentReady(&quot;contentReady&quot;)
      .Paging(p =&gt; p.PageSize(10))
      .Pager(p =&gt; p
          .ShowPageSizeSelector(true)
          .AllowedPageSizes(new[] { 10, 25, 50, 100 })
      )
      .SearchPanel(s =&gt; s
          .Visible(true)
          .HighlightCaseSensitive(true)
      )
      .GroupPanel(g =&gt; g.Visible(true))
      .Grouping(g =&gt; g.AutoExpandAll(false))
      .Columns(columns =&gt; {
  
          columns.AddFor(m =&gt; m.FirstName);
          columns.AddFor(m =&gt; m.LastName);
          columns.AddFor(m =&gt; m.PhoneNumber);
          columns.AddFor(m =&gt; m.CellNumber);      
      })
      .MasterDetail(md =&gt; {
          md.Enabled(true);
          md.Template(@&lt;text&gt;
              &lt;div class=&quot;master-detail-caption&quot;&gt;&lt;%- data.FullName %&gt; 's Address:&lt;/div&gt;
              @(Html.DevExtreme().DataGrid&lt;SmartTracPoc.Models.Owner&gt;()
                  .ColumnAutoWidth(true)
                  .ShowBorders(true)
                  .Columns(columns =&gt; {
                      columns.AddFor(m =&gt; m.OwnerAddress.StreetAddress);
                      columns.AddFor(m =&gt; m.OwnerAddress.City);
                      columns.AddFor(m =&gt; m.OwnerAddress.State);
                      columns.AddFor(m =&gt; m.OwnerAddress.ZipCode);
                      columns.AddFor(m =&gt; m.OwnerAddress.Country);
                  })
                  //.DataSource(Model)  ??????? What do I do here?
              )
          &lt;/text&gt;);
      })
  )
  
  &lt;script&gt;
      var collapsed = false;
      function contentReady(e) {
          if (!collapsed) {
              collapsed = true;
              e.component.expandRow([&quot;EnviroCare&quot;]);
          }
      }
  
      function customizeTooltip(pointsInfo) {
          return { text: parseInt(pointsInfo.originalValue) + &quot;%&quot; };
      }
  &lt;/script&gt;
  </code></pre>
  <p>This builds and runs successfully. The issue is that no data is displayed for the fields referenced from the Address class. In the above implementation, both the Master and Detail portions of the grid should be using the same DataSource (in this case &quot;Model&quot; -&gt; <strong>IEnumerable</strong>).</p>
  <p>How do I achieve this?</p>