JSFiddle - React, Tailwind, and code Playground

by whoamiwho

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.913/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.913/styles/kendo.blueopal.min.css">
<script src="http://cdn.kendostatic.com/2012.2.913/js/kendo.all.min.js"></script>
<script src="http://cdn.kendostatic.com/2012.2.913/js/kendo.aspnetmvc.min.js"></script>
<script src="http://cdn.kendostatic.com/2012.2.913/js/kendo.web.min.js"></script>
<table id="Grid">
    <thead>
        <tr>
            <th>Col1</th><th>Col2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Cell1</td><td>Cell2<input type="checkbox"/></td>
        </tr>
        <tr>
            <td>Cell1</td><td>Cell2<input type="checkbox"/></td>
        </tr>
    </tbody>
</table>

JavaScript

$("#Grid").kendoGrid();

var grid = $('#Grid').data('kendoGrid');

    grid.thead.find("th:last")
    .append($('<input class="selectAll" type="checkbox"/>'))
    .delegate(".selectAll", "click", function () {
        var checkbox = $(this);
        grid.table.find("tr")
            .find("td:last input")
            .attr("checked", checkbox.is(":checked"))
            .trigger("change");
    });