JSFiddle - React, Tailwind, and code Playground

by inikolova

HTML

<script src="http://cdn.kendostatic.com/2012.1.322/js/kendo.web.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.default.min.css">
<table id="grid">
   <thead>
       <tr>
           <th data-field="name">Name</th>
           <th data-field="age">Age</th>
           <th><input id="checkBoxID" type="checkbox"/></th>
       </tr>
   </thead>
</table>

JavaScript

//var checkBox= '<form><input class="checkbox" type="checkbox" /></form>';
var templTest = kendo.template('<form><input class="checkbox" type="checkbox" /></form>');


$("#grid").kendoGrid({
    dataSource: [
        {
        name: "John Doe",
        age: 22},
    {
        name: "John Doe",
        age: 22},
    {
        name: "John Doe",
        age: 22,
        },
    {
        name: "John Doe",
        age: 22},
    {
        name: "John Doe",
        age: 22},
    {
        name: "John Doe",
        age: 22},
    {
        name: "John Doe",
        age: 22},
    {
        name: "John Doe",
        age: 22},
    {
        name: "John Doe",
        age: 22},
           ],

    columns: [
        {
        field: "name",
        title: "Name",
        filterable: false,
        editable: true},
    {
        //title: "Age",
        field: "age",
        filterable: false,
        sortable: false,

        },
    {
        //title: "check",
        //filterable: false,
        //sortable: false,
        template: templTest}
    ]
});


$("#checkBoxID").change(function() {
   var isChecked = this.checked;
   $(".checkbox").attr("checked", isChecked)
});