This is a migrated thread and some comments may be shown as answers.
Check Boxes on Grid Not Showing
1 Answer 19 Views
This is a migrated thread and some comments may be shown as answers.
Phil
Top achievements
Rank 1
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" />
                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!

1 Answer, 1 is accepted

Sort by
0
Phil
Top achievements
Rank 1
answered on 11 May 2018, 09:40 PM
Looks like the js and css files aren't the correct version.  Sorry to bother everyone.
Tags
Grid
Asked by
Phil
Top achievements
Rank 1
Answers by
Phil
Top achievements
Rank 1
Share this question
or