Binding to foreach variable using kendo grid

[O]

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()
        )

    }
 }

[Konstantin Dikov]

Hi,

I have tested the following code locally and it seems to work correctly:

@model IEnumerable<Kendo.Mvc.Examples.Models.Product>

@{
    for (int i = 0; i < 3; i++)
    {
     var products = Model;

        @(Html.Kendo().Grid(products)
                .Name("grid" + i)
                .Columns(columns =>
                {
                    columns.Bound(c => c.CategoryID).Width(140);
                    columns.Bound(c => c.ProductName).Width(190);
                })
                .Pageable()
                .Sortable(sortable =>
                {
                    sortable.SortMode(GridSortMode.SingleColumn);
                })
                .Filterable()
                .Scrollable()
        )
    }
 }

In the above example the same data is set to all grids, but it should not be relevant to the result.

Could you please inspect the browser's console for any JavaScript errors that might be causing the issue?


Regards,
Konstantin Dikov
Telerik by Progress