This is a migrated thread and some comments may be shown as answers.

Binding to foreach variable using kendo grid

1 Answer 2100 Views
Grid
This is a migrated thread and some comments may be shown as answers.
O
Top achievements
Rank 1
O asked on 16 Mar 2017, 06:26 PM

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

1 Answer, 1 is accepted

Sort by
0
Konstantin Dikov
Telerik team
answered on 21 Mar 2017, 02:54 PM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Grid
Asked by
O
Top achievements
Rank 1
Answers by
Konstantin Dikov
Telerik team
Share this question
or