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

Check Boxes on Grid Not Showing

1 Answer 171 Views

Grid

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

Phil asked on 11 May 2018, 08:21 PM

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" />

<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js"

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>

<script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/bootstrap.min.js"

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>

</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>

</nav>

<div class="container body-content">

@RenderBody()

<hr />

<footer>

</footer>

</div>

@RenderSection("Scripts", required: false)

</body>

</html>

The grid renders fine, but the selection columns are empty. Any help is appreciated - thanks!

Check Boxes on Grid Not Showing

1 Answer, 1 is accepted