Hi, i am following the documentation regarding a kendo grid with a checkbox selection.
https://demos.telerik.com/kendo-ui/grid/checkbox-selection
I cannot make the example to work.
I created the exact same html, added all the referenced styles and scripts, run the example on chrome browser,
the grid is shown as expected, when clicking any checkbox, nothing happens.
no error in the console beside two missing fonts.
here is my document for reference.
<!DOCTYPE html>
<html>
<head>
<link href="~/Content/kendo.common.min.css" rel="stylesheet" />
<link href="~/Content/kendo.default.min.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.12.4.min.js"></script>
<script src="~/Scripts/kendo.all.min.js"></script>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<div id="example">
<div id="grid"></div>
<script>
function onChange(arg) {
//kendoConsole.log("The selected product ids are: [" + this.selectedKeyNames().join(", ") + "]");
}
$(document).ready(function () {
$("#grid").kendoGrid({
dataSource: {
pageSize: 10,
data: [{ "ProductID": 1, "ProductName": "Chai", "UnitPrice": 18, "UnitsInStock": 39, "Discontinued": false }, { "ProductID": 2, "ProductName": "Chang", "UnitPrice": 19,"UnitsInStock": 17, "Discontinued": false }],
schema: {
model: {
id: "ProductID"
}
}
},
pageable: true,
scrollable: false,
persistSelection: true,
sortable: true,
change: onChange,
columns: [
{ selectable: true, width: "50px" },
{ field:"ProductName", title: "Product Name" },
{ field: "UnitPrice", title:"Unit Price", format: "{0:c}"},
{ field: "UnitsInStock", title:"Units In Stock"},
{ field: "Discontinued"}]
});
});
</script>
<div class="box wide">
<h4>Console log</h4>
<div class="console"></div>
</div>
<style>
.console div {
height: 3.3em;
}
</style>
</div>
</body>
</html>
1 Answer, 1 is accepted
This code is correct and works as expected when I copy it into a Dojo:
https://dojo.telerik.com/ujEhoVUR
Can you check the version of Kendo UI that you are loading in this page and confirm that the JS and CSS files use the same version (it is declared in the beginning of each Kendo UI file)?
Also, which missing fonts are you referring to? If the WebComponentsIcons font is missing, this means that Kendo UI icons, including the checkmarks used in the selected checkboxes will not be loaded. You need to copy the fonts folder from the Kendo UI installation folder to the Content folder in your project.
Regards,
Tsvetina
Progress Telerik