title: Multiple kendo grids in view using MVC Razor @foreach
body: <p>Is it possible to create multiple kendo grids using MVC Razor @foreach?</p>
  
  <p>I've tried the following and nothing is rendering in the view, it looks like the data is correct as I can see the correct JSON data in the script but no grid displays</p>
  
  <pre><code>@using Kendo.Mvc.UI
  @model ProjectMVC.Models.IndexViewModel
  
  @{
      ViewData["Heading"] = "Index";
  }
  
  &lt;h2&gt;Index&lt;/h2&gt;
  
  &lt;p&gt;
      &lt;a asp-action="Create"&gt;Create New&lt;/a&gt;
  &lt;/p&gt;
  @{
      int gridIndex = 0;
      foreach (var Heading in Model.Headings)
      {
          gridIndex++;
          var Groups = Model.Groups.Where(x =&gt; x.Group == Heading);
          tblGroups Group = Model.Groups.Where(x =&gt; x.Group == Heading).First();
  
  
  
          @(Html.Kendo().Grid(Groups)
                  .Name($"grid{gridIndex}")
                  .Columns(columns =&gt;
                  {
                      columns.Bound(c =&gt; c.Date).Width(140);
                      columns.Bound(c =&gt; c.User).Width(190);
                      columns.Bound(c =&gt; c.Category);
                      columns.Bound(c =&gt; c.Group).Width(110);
                  })
                  .Pageable()
                  .Filterable()
                  .Scrollable()
          )
  
      }
   }
  </code></pre>
  
  <p>The following code does work using &lt;\table> instead of Html.Kendo().Grid but I have been unable to recreate this using a kendo grid instead of tables. Can anyone point out where I might be going wrong?</p>
  
  <p>Specifically this is aspnet core mvc.</p>
  
  <p>MODEL:</p>
  
  <pre><code>public class tblGroups
  {
  
      [Key]
      public int ID { get; set; }
      public DateTime Date { get; set; }
      public string User { get; set; }
      public string Category { get; set; }
      public string Group { get; set; } //&lt;&lt;Want separate tables split by this field
  }
  
  public class IndexViewModel
  {
      public List&lt;tblGroups&gt; Groups { get; set; }
      public List&lt;string&gt; Headings { get; set; }
  
      Public IndexViewModel()
      {
          Groups = new List&lt;tblGroups&gt;();
          Headings = new List&lt;string&gt;();
      }
  }
  </code></pre>
  
  <p>VIEW:</p>
  
  <pre><code>@model MVC.Models.IndexViewModel
  
  @{
      ViewData["Heading"] = "Index";
  }
  
  &lt;h2&gt;Index&lt;/h2&gt;
  
  &lt;p&gt;
      &lt;a asp-action="Create"&gt;Create New&lt;/a&gt;
  &lt;/p&gt;
  @{
      foreach (var Heading in Model.Headings)
  
          var Groups = Model.Groups.Where(x =&gt; x.Group == Heading);
          tblGroups Group = Model.Groups.First(x =&gt; x.Prodcut == Heading);
  
          &lt;text&gt;
          &lt;table class="table"&gt;
              &lt;thead&gt;
                  &lt;tr&gt;
                      &lt;th&gt;
                          @Html.DisplayNameFor(model =&gt; Group.Date)
                      &lt;/th&gt;
                      &lt;th&gt;
                          @Html.DisplayNameFor(model =&gt; Group.User)
                      &lt;/th&gt;
                      &lt;th&gt;
                          @Html.DisplayNameFor(model =&gt; Group.Category)
                      &lt;/th&gt;
                      &lt;th&gt;
                          @Html.DisplayNameFor(model =&gt; Group.Group)
                      &lt;/th&gt;
                      &lt;th&gt;&lt;/th&gt;
                  &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;
                  @foreach (var item in Groups)
                  {
                      &lt;tr&gt;
                              &lt;td&gt;
                                  @Html.DisplayFor(modelItem =&gt; item.Date)
                              &lt;/td&gt;
                              &lt;td&gt;
                                  @Html.DisplayFor(modelItem =&gt; item.User)
                              &lt;/td&gt;
                              &lt;td&gt;
                                  @Html.DisplayFor(modelItem =&gt; item.Category)
                              &lt;/td&gt;
                              &lt;td&gt;
                                  @Html.DisplayFor(modelItem =&gt; item.Group)
                              &lt;/td&gt;
                          &lt;td&gt;
                          &lt;/td&gt;
                      &lt;/tr&gt;
                  }
              &lt;/tbody&gt;
          &lt;/table&gt;
          &lt;/text&gt;
  
      }
   }
  </code></pre>
  
  <p>CONTROLLER:</p>
  
  <pre><code>public class tblGroupsController : Controller
  {
      public async Task&lt;IActionResult&gt; Index()
      {
          var allGroups = await _context.tblGroups.ToListAsync();
          var Headings = allGroups.Select(x =&gt; x.Group).Distinct();
  
          var model = new Models.IndexViewModel()
          {
              Groups = allGroups,
              Headings = Headings
          };
  
          return View(model);
      }
  }
  </code></pre>