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

selectable column not working

1 Answer 264 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Emil
Top achievements
Rank 1
Emil asked on 11 Feb 2019, 09:46 AM

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

Sort by
0
Tsvetina
Telerik team
answered on 12 Feb 2019, 03:19 PM
Hello Emil,

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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Grid
Asked by
Emil
Top achievements
Rank 1
Answers by
Tsvetina
Telerik team
Share this question
or