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: Bookspublic 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!
3 Answers, 1 is accepted
Rank 1
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" }) )
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
Rank 1
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!