Multiple kendo grids in view using MVC Razor #foreach - asp.net-mvc

Question

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);
}
}

Answer 1

In order to use the same partial view multiple times, grid ID should be unique so passing the ID in partial view data is one possible solution. I have used the same grid multiple times in a PartialView by passing some parameters and retrieving different data via these parameters as shown below:
View:
<div class="row">
<div class="col-lg-6">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title" id="panel-title">New Issues</h3>
</div>
<div>
#Html.Partial("_List", new ViewDataDictionary { { "name", "grid-all-issues" }, { "style", "border:none; height:622px;" }, { "pageSize", "25" } })
</div>
</div>
</div>
<div class="col-lg-6">
<div class="row">
<div class="col-lg-12">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title" id="panel-title">Active Issues</h3>
</div>
<div>
#Html.Partial("_List", new ViewDataDictionary { { "name", "grid-waiting-issues" }, { "style", "border:none; height:273px;" }, { "pageSize", "10" } })
</div>
</div>
</div>
<div class="col-lg-12 top-10">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title" id="panel-title">Watched Issues</h3>
</div>
<div>
#Html.Partial("_List", new ViewDataDictionary { { "name", "grid-watched-issues" }, { "style", "border:none; height:273px;" }, { "pageSize", "10" } })
</div>
</div>
</div>
</div>
</div>
</div>
PartialView:
#(Html.Kendo().Grid<Models.ViewModel>()
.HtmlAttributes(new { style = #ViewData["style"].ToString() })
.Name(#ViewData["name"].ToString())
//...
.Columns(columns =>
{
columns.Bound(m => m.Key).Title("Issue No");
})
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(Convert.ToInt32(#ViewData["pageSize"]))
)
)
Update: You can pass column parameter by using an approach below.
For passing parameter to a PartialView in ASP.NET MVC:
#Html.Partial("~/PathToYourView.cshtml", null, new ViewDataDictionary { { "VariableName", "some value" } })
And to retrieve the passed in values:
#{
string valuePassedIn = this.ViewData.ContainsKey("VariableName") ?
this.ViewData["VariableName"].ToString() : string.Empty;
}
Hope this helps...