Populate Grid with Model

4 posts, 1 answers
  1. yagimay
    yagimay avatar
    4 posts
    Member since:
    Sep 2008

    Posted 03 Mar Link to this post

    Hi,
    I have a sample ASP.NET 5 (MVC) web app from Microsoft working in VS2015:

    http://docs.asp.net/en/latest/tutorials/your-first-aspnet-application.html
    I am in attempt to popluate the Telerik Grid with the Model that I have generated above, however having no luck.
    Snip from the app:

    BooksController:

    // GET: Books
    public IActionResult Index()
    {
        var applicationDbContext = _context.Book;
        return View(applicationDbContext.ToList());
    }

    Views/Books/Index.chtml:
    @(Html.Kendo().Grid(Model)
        .Name("datagrid")
        .Columns(columns =>
        {
            columns.Bound(b=>b.Title);
     
        })
        .DataSource(dataSource => dataSource
            .Ajax()
        )
    )

    When I debug, Grid does not appear on the page. However, I can see the actual data written in the html source of the page:
    HTML:

    <div id="datagrid" name="datagrid"></div><script>jQuery(function(){jQuery("#datagrid").kendoGrid({"columns":[{"title":"Title","field":"Title",
     :
    "data":{"Data":[{"BookID":2,"AuthorID":null,"Genre":"Gothic parody333","Price":12.95,"Title":"Northanger Abbey","Year":1817,"Author":null},{"BookID":3,"AuthorID":2,"Genre":"Bildungsroman","Price":15.00,"Title":"David Copperfield","Year":1850,"Author":null},{"BookID":4,"AuthorID":3,"Genre":"Picaresque","Price":8.95,"Title":"Don Quixote","Year":1617,"Author":null}],"Total":3}}});});</script>

    Would help if you could point out what I may have missed, thanks!

  2. yagimay
    yagimay avatar
    4 posts
    Member since:
    Sep 2008

    Posted 04 Mar in reply to yagimay Link to this post

    Updated my Index.chtml to following, but still no luck... Any help is appreciated.

    @(Html.Kendo().Grid<WebApplication1.Models.Book>()
        .Name("datagrid")
        .BindTo(Model)
        .Columns(columns =>
        {
            columns.Bound(b => b.Genre).Width(150);
            columns.Bound(b=>b.Title).Width(150);
        })
        .HtmlAttributes(new { style = "height: 380px;width:500px;background-color:beige" })         
        )

  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Answer
    Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    349 posts

    Posted 07 Mar Link to this post

    Hi Yagimay,

    The provided HTML and JavaScript code, generated from the Grid wrapper, indicate that there is a problem with the serialization of the Grid settings, which leads to an invalid Grid options syntax and a JavaScript error. However, I was not able to reproduce such as issue on my side.

    I have prepared a sample MVC6 application demonstrating a simple Kendo UI Grid configuration.

    The main points of interest are referencing all of the scripts in the <head> tag of the _Layout.cshtml file instead of at the end of the <body>, and casting the collection, passed to the View to IEnumerable of the corresponding model type:

    @(Html.Kendo().Grid((IEnumerable<WebApplication1.Controllers.Book>)Model)
            .Name("grid")
                 ...

    Please, check out the attached application and apply the necessary changes to your implementation.

    Let me know if this helps.

    Regards,
    Dimiter Topalov
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  5. yagimay
    yagimay avatar
    4 posts
    Member since:
    Sep 2008

    Posted 07 Mar in reply to Dimiter Topalov Link to this post

    Thanks very much for the sample Dimiter. I was able to get my code running.

    Issue with my code was that I had some script reference at the bottomof the <body>. Moving them to the <head> was it.

    Thanks again for your precise indication!

Back to Top
UI for ASP.NET MVC is VS 2017 Ready