Kendo UI Grid bind

Question

I tried to bind Kendo Grid.but it shows me below error

The model item passed into the dictionary is of type 'System.Data.Entity.DbSet 1[KendoApp.Product]', but this dictionary requires a model item of type 'System.Collections.Generic.IEnumerable 1[KendoApp.Models.ProductModels]'.

My View

@model IEnumerable<KendoApp.Models.ProductModels>

@(Html.Kendo().Grid(Model)
.Name("Grid")
    .Columns(columns =>
    {
        columns.Bound(p => p.ProductID);
        columns.Bound(p => p.ProductName);
        columns.Bound(p => p.UnitPrice);
        columns.Bound(p => p.UnitsInStock);
    }).Pageable()
)

My Controller

 public ActionResult KendoGrid()
    {

        //IEnumerable<Product> products = new northwindEntities().Products;

        var products = new northwindEntities().Products;
        ViewBag.Products = products;
        return View(products);

Product Model

   public class ProductModels
{
    public int ProductID { get; set; }
    public string ProductName { get; set; }
    public Nullable<int> SupplierID { get; set; }
    public Nullable<int> CategoryID { get; set; }
    public string QuantityPerUnit { get; set; }
    public Nullable<decimal> UnitPrice { get; set; }
    public Nullable<short> UnitsInStock { get; set; }
    public Nullable<short> UnitsOnOrder { get; set; }
    public Nullable<short> ReorderLevel { get; set; }
    public bool Discontinued { get; set; }
}
    }

What is the error ? how to fix that ?

Answer 1

Please try this,

Your view:

@(Html.Kendo().Grid<KendoApp.Models.ProductModels>()
    .Name("grid")
    .Columns(columns =>
    {
        columns.Bound(p => p.ProductID);
        columns.Bound(p => p.ProductName);
        columns.Bound(p => p.UnitPrice);
        columns.Bound(p => p.UnitsInStock);
    })
    .Pageable()
    .DataSource(dataSource => dataSource
        .Ajax()
        .Read(read => read.Action("ProductsRead", "YourControllerName"))
    )
)

Your controller actions:

public JsonResult ProductsRead([DataSourceRequest] DataSourceRequest request) 
{
    var products = new northwindEntities().Products
        .Select(p => new ProductModels {  
            ProductID = p.ProductID,
            ProductName = p.ProductName,
            UnitPrice = p.UnitPrice,
            UnitsInStock = p.UnitInStock
        })
        .AsQueryable();

    return Json(products.ToDataSourceResult(request));
}

public ActionResult KendoGrid()
{
    return View();
}

Answer 2

The type you are accepting into your view, and binding with the Grid, is a collection of KendoApp.Models.ProductModels. What you are passing from your controller is a collection of entities of type KendoApp.Product. They are not considered the same type (even if all the properties in these classes are) which is why you get the error.

What you need to do is transform the KendoApp.Product entities into a new IEnumerable collection of your ProductModels class in your controller. Something like:

var products = new northwindEntities().Products.Select
    (x => new KendoApp.Models.ProductModels
        {
            ProductID = x.ProductID,
            ProductName = x.ProductName,
            ...
            Discontinued = x.Discontinued
        }
    ).ToList();

The var products is now of type IEnumerable < KendoApp.Models.ProductModels > which will be accepted by your view.