Is it possible to create multiple kendo grids using MVC Razor @foreach?
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
@using Kendo.Mvc.UI
@model ProjectMVC.Models.IndexViewModel
@{
ViewData["Heading"] = "Index";
}
<h2>Index</h2>
<p>
<a asp-action="Create">Create New</a>
</p>
@{
int gridIndex = 0;
foreach (var Heading in Model.Headings)
{
gridIndex++;
var Groups = Model.Groups.Where(x => x.Group == Heading);
tblGroups Group = Model.Groups.Where(x => x.Group == Heading).First();
@(Html.Kendo().Grid(Groups)
.Name($"grid{gridIndex}")
.Columns(columns =>
{
columns.Bound(c => c.Date).Width(140);
columns.Bound(c => c.User).Width(190);
columns.Bound(c => c.Category);
columns.Bound(c => c.Group).Width(110);
})
.Pageable()
.Filterable()
.Scrollable()
)
}
}
The following code does work using <\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?
Specifically this is aspnet core mvc.
MODEL:
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; } //<<Want separate tables split by this field
}
public class IndexViewModel
{
public List<tblGroups> Groups { get; set; }
public List<string> Headings { get; set; }
Public IndexViewModel()
{
Groups = new List<tblGroups>();
Headings = new List<string>();
}
}
VIEW:
@model MVC.Models.IndexViewModel
@{
ViewData["Heading"] = "Index";
}
<h2>Index</h2>
<p>
<a asp-action="Create">Create New</a>
</p>
@{
foreach (var Heading in Model.Headings)
var Groups = Model.Groups.Where(x => x.Group == Heading);
tblGroups Group = Model.Groups.First(x => x.Prodcut == Heading);
<text>
<table class="table">
<thead>
<tr>
<th>
@Html.DisplayNameFor(model => Group.Date)
</th>
<th>
@Html.DisplayNameFor(model => Group.User)
</th>
<th>
@Html.DisplayNameFor(model => Group.Category)
</th>
<th>
@Html.DisplayNameFor(model => Group.Group)
</th>
<th></th>
</tr>
</thead>
<tbody>
@foreach (var item in Groups)
{
<tr>
<td>
@Html.DisplayFor(modelItem => item.Date)
</td>
<td>
@Html.DisplayFor(modelItem => item.User)
</td>
<td>
@Html.DisplayFor(modelItem => item.Category)
</td>
<td>
@Html.DisplayFor(modelItem => item.Group)
</td>
<td>
</td>
</tr>
}
</tbody>
</table>
</text>
}
}
CONTROLLER:
public class tblGroupsController : Controller
{
public async Task<IActionResult> Index()
{
var allGroups = await _context.tblGroups.ToListAsync();
var Headings = allGroups.Select(x => x.Group).Distinct();
var model = new Models.IndexViewModel()
{
Groups = allGroups,
Headings = Headings
};
return View(model);
}
}
