JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdn.kendostatic.com/2011.3.1407/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1407/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1407/styles/kendo.default.min.css">
<table id="grid">            
</table> 

<button>rebind</button>

JavaScript

var encTemplate = kendo.template("<tr><td> #= EntityName # </td><td><input type='checkbox' name='Client1' # if(Client1){ # checked='checked' # } # /> </td><td><input type='checkbox' name='Client2' # if(Client2){ # checked='checked' # } # /> </td></tr>");

var encTemplate2 = kendo.template("<tr><td> #= EntityName # </td><td><input type='checkbox' name='Client1' # if(Client1){ # checked='checked' # } # /> </td><td><input type='checkbox' name='Client2' # if(Client2){ # checked='checked' # } # /> </td><td><input type='checkbox' name='Client3' # if(Client3){ # checked='checked' # } # /> </td></tr>");


var grid = $("#grid").kendoGrid({
    scrollable: false,
    sortable: true,
    columns: [
        {
        title: "Entity",
        field: "EntityName"},
    {
        title: "1",
        field: "Client1"},
    {
        title: "2",
        field: "Client2"}
    ],
    dataSource: [
        {
        EntityName: "test inc",
        Client1: false,
        Client2: true}
                        ],
    rowTemplate: encTemplate
}).data("kendoGrid");

$("button").click(function() {
    var ds = grid.dataSource;

    grid.columns = [
        {
        title: "Entity",
        field: "EntityName"},
    {
        title: "1",
        field: "Client1"},
    {
        title: "2",
        field: "Client2"},
    {
        title: "3",
        field: "Client3"}
    ];
    grid.thead.remove();
    grid.rowTemplate = encTemplate2;
    ds.data([{
        EntityName: "test inc 2",
        Client1: false,
        Client2: true,
        Client3: false}]);
});