Hello,
I'm having problems creating multiple grids split by a column value, when the view is rendered I can see the the json in the script tags but nothing is rendered. Teh following works as repeating tables without using a kendo grid,
MODEL:
public class tblProducts
{
//SQL table is named tblProducts
[Key]
public int ID { get; set; }
public DateTime Date { get; set; }
public string Field1 { get; set; }
public string Field2 { get; set; }
public string Product { get; set; } //<<
Want
separate tables split by this field
}
public class IndexViewModel
{
public List<tblProducts> Products { get; set; }
public List<
string
> Titles { get; set; }
Public IndexViewModel()
{
Products = new List<
tblProducts
>();
Titles = new List<
string
>();
}
}
CONTROLLER:
public class tblProductsController : Controller
{
public async Task<
IActionResult
> Index()
{
var allProducts = await _context.tblProducts.ToListAsync();
var titles = allProducts.Select(x => x.Product).Distinct();
var model = new Models.IndexViewModel()
{
Products = allProducts,
titles = titles
};
return View(model);
}
}
VIEW:
@model ProjectMVC.Models.IndexViewModel
@{
ViewData["Title"] = "Index";
}
<
h2
>Index</
h2
>
<
p
>
<
a
asp-action
=
"Create"
>Create New</
a
>
</
p
>
@{
foreach (var title in Model.Titles)
var products = Model.Products.Where(x => x.Product == title);
tblProducts product = Model.Products.First(x => x.Prodcut == title);
<
text
>
<
table
class
=
"table"
>
<
thead
>
<
tr
>
<
th
>
@Html.DisplayNameFor(model => product.Date)
</
th
>
<
th
>
@Html.DisplayNameFor(model => product.Field1)
</
th
>
<
th
>
@Html.DisplayNameFor(model => product.Field2)
</
th
>
<
th
>
@Html.DisplayNameFor(model => product.Product)
</
th
>
<
th
></
th
>
</
tr
>
</
thead
>
<
tbody
>
@foreach (var item in products)
{
<
tr
>
<
td
>
@Html.DisplayFor(modelItem => item.Date)
</
td
>
<
td
>
@Html.DisplayFor(modelItem => item.Field1)
</
td
>
<
td
>
@Html.DisplayFor(modelItem => item.Field2)
</
td
>
<
td
>
@Html.DisplayFor(modelItem => item.Product)
</
td
>
<
td
>
<
a
asp-action
=
"Edit"
asp-route-id
=
"@item.ID"
>Edit</
a
> |
<
a
asp-action
=
"Details"
asp-route-id
=
"@item.ID"
>Details</
a
> |
<
a
asp-action
=
"Delete"
asp-route-id
=
"@item.ID"
>Delete</
a
>
</
td
>
</
tr
>
}
</
tbody
>
</
table
>
</
text
>
}
}
How do I set this up to work with the kendo grid instead of tables? I've tried the view below but it shows the correct data in the <srcipt></script> tags but no grid is rendered.
Kendo VIEW:
@using Kendo.Mvc.UI
@model ProjectMVC.Models.IndexViewModel
@{
ViewData["Title"] = "Index";
}
<
h2
>Index</
h2
>
<
p
>
<
a
asp-action
=
"Create"
>Create New</
a
>
</
p
>
@{
int i = 0;
foreach (var title in Model.Titles)
{
i++;
var products = Model.Products.Where(x => x.Product == title);
tblProducts product = Model.Products.Where(x => x.Product == title).First();
@(Html.Kendo().Grid(products)
.Name($"grid{i}")
.Columns(columns =>
{
columns.Bound(c => c.Date).Width(140);
columns.Bound(c => c.Field1).Width(190);
columns.Bound(c => c.Field2);
columns.Bound(c => c.Product).Width(110);
})
.ToolBar(toolbar =>
{
toolbar.Excel();
toolbar.Pdf();
})
.Pageable()
.Sortable(sortable =>
{
sortable.SortMode(GridSortMode.SingleColumn);
})
.Filterable()
.Scrollable()
)
}
}