Hi all,
So I've seen a couple of questions about this, but none of the solutions have helped.
I'm attempting to build something like this demo for Asp.Net Core 2.0: https://demos.telerik.com/aspnet-core/grid/checkbox-selection
When I set up the app, I don't get the checkboxes in the grid. I've tried multiple browsers.
I'm using version 2017.3.1206. I built a test project to try to get this to work, building off the code in the above demo.
Here is my view:
@(Html.Kendo().Grid<
TestKendo.Controllers.ProductViewModel
>()
.Name("grid")
.Columns(columns =>
{
columns.Select().Width(50);
columns.Bound(p => p.ProductName);
columns.Bound(p => p.UnitPrice).Width(100);
columns.Bound(p => p.UnitsInStock).Width(100);
columns.Bound(p => p.Discontinued).Width(100);
})
.Pageable()
.PersistSelection()
.Sortable()
.DataSource(dataSource => dataSource
.Ajax()
.Model(model => model.Id(p => p.ProductID))
.Read(read => read.Action("Selection_Read", "Home"))
)
)
@section scripts {
@Html.Kendo().DeferredScripts()
}
Here is my controller:
using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Linq;
using System.Threading.Tasks;
using Kendo.Mvc.Extensions;
using Kendo.Mvc.UI;
using Microsoft.AspNetCore.Mvc;
using TestKendo.Models;
namespace TestKendo.Controllers
{
public class ProductViewModel
{
public int ProductID { get; set; }
public string ProductName { get; set; }
public decimal UnitPrice { get; set; }
public int UnitsInStock { get; set; }
public bool Discontinued { get; set; }
}
public class HomeController : Controller
{
public IActionResult Index()
{
return View();
}
public ActionResult Selection_Read([DataSourceRequest] DataSourceRequest request)
{
var products = new List<
ProductViewModel
>
{
new ProductViewModel { ProductID = 1, ProductName = "Prod1", UnitPrice = 1.25M, UnitsInStock = 10 },
new ProductViewModel { ProductID = 2, ProductName = "Prod2", UnitPrice = 2.50M, UnitsInStock = 20 },
};
return Json(products.ToDataSourceResult(request));
}
public IActionResult About()
{
ViewData["Message"] = "Your application description page.";
return View();
}
public IActionResult Contact()
{
ViewData["Message"] = "Your contact page.";
return View();
}
public IActionResult Error()
{
return View(new ErrorViewModel { RequestId = Activity.Current?.Id ?? HttpContext.TraceIdentifier });
}
}
}
Here's my _Layout.cshtml:
<!DOCTYPE html>
<
html
>
<
head
>
<
meta
charset
=
"utf-8"
/>
<
meta
name
=
"viewport"
content
=
"width=device-width, initial-scale=1.0"
/>
<
title
>@ViewData["Title"] - TestKendo</
title
>
<
environment
include
=
"Development"
>
<
link
rel
=
"stylesheet"
href
=
"~/lib/bootstrap/dist/css/bootstrap.css"
/>
<
link
rel
=
"stylesheet"
href
=
"~/css/site.css"
/>
<
link
rel
=
"stylesheet"
href
=
"~/lib/kendo/css/web/kendo.common-nova.min.css"
/>
<
link
rel
=
"stylesheet"
href
=
"~/lib/kendo/css/web/kendo.nova.min.css"
/>
<
script
src
=
"~/lib/jquery/dist/jquery.js"
></
script
>
<
script
src
=
"~/lib/bootstrap/dist/js/bootstrap.js"
></
script
>
<
script
src
=
"~/js/site.js"
asp-append-version
=
"true"
></
script
>
<
script
src
=
"~/lib/kendo/js/kendo.all.min.js"
></
script
>
<
script
src
=
"~/lib/kendo/js/kendo.aspnetmvc.min.js"
></
script
>
</
environment
>
<
environment
exclude
=
"Development"
>
<
link
rel
=
"stylesheet"
href
=
"https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css"
asp-fallback-href
=
"~/lib/bootstrap/dist/css/bootstrap.min.css"
asp-fallback-test-class
=
"sr-only"
asp-fallback-test-property
=
"position"
asp-fallback-test-value
=
"absolute"
/>
<
link
rel
=
"stylesheet"
href
=
"~/css/site.min.css"
asp-append-version
=
"true"
/>
asp-fallback-src
=
"~/lib/jquery/dist/jquery.min.js"
asp-fallback-test
=
"window.jQuery"
crossorigin
=
"anonymous"
integrity
=
"sha384-K+ctZQ+LL8q6tP7I94W+qzQsfRV2a+AfHIi9k8z8l9ggpc8X+Ytst4yBo/hH+8Fk"
>
</
script
>
asp-fallback-src
=
"~/lib/bootstrap/dist/js/bootstrap.min.js"
asp-fallback-test
=
"window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"
crossorigin
=
"anonymous"
integrity
=
"sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
>
</
script
>
<
script
src
=
"~/js/site.min.js"
asp-append-version
=
"true"
></
script
>
</
environment
>
</
head
>
<
body
>
<
nav
class
=
"navbar navbar-inverse navbar-fixed-top"
>
<
div
class
=
"container"
>
<
div
class
=
"navbar-header"
>
<
button
type
=
"button"
class
=
"navbar-toggle"
data-toggle
=
"collapse"
data-target
=
".navbar-collapse"
>
<
span
class
=
"sr-only"
>Toggle navigation</
span
>
<
span
class
=
"icon-bar"
></
span
>
<
span
class
=
"icon-bar"
></
span
>
<
span
class
=
"icon-bar"
></
span
>
</
button
>
<
a
asp-area
=
""
asp-controller
=
"Home"
asp-action
=
"Index"
class
=
"navbar-brand"
>TestKendo</
a
>
</
div
>
<
div
class
=
"navbar-collapse collapse"
>
<
ul
class
=
"nav navbar-nav"
>
<
li
><
a
asp-area
=
""
asp-controller
=
"Home"
asp-action
=
"Index"
>Home</
a
></
li
>
<
li
><
a
asp-area
=
""
asp-controller
=
"Home"
asp-action
=
"About"
>About</
a
></
li
>
<
li
><
a
asp-area
=
""
asp-controller
=
"Home"
asp-action
=
"Contact"
>Contact</
a
></
li
>
</
ul
>
</
div
>
</
div
>
</
nav
>
<
div
class
=
"container body-content"
>
@RenderBody()
<
hr
/>
<
footer
>
<
p
>© 2018 - TestKendo</
p
>
</
footer
>
</
div
>
@RenderSection("Scripts", required: false)
</
body
>
</
html
>
The grid renders fine, but the selection columns are empty. Any help is appreciated - thanks!