How to display only selected records in the result table

by lhoeppner

HTML

<script src="http://cdn.kendostatic.com/2013.1.319/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.default.min.css">
<script id="selection-table-template" type="text/x-kendo-template">
    <tr>
        <td data-bind="text: name"></td>
        <td data-bind="text: age"></td>
        <td>
            <input type="checkbox" name="selection" data-bind="checked: isChecked, events: { change: printIsChecked2 }"/>
        </td>
    </tr>
</script>

<script id="row-template" type="text/x-kendo-template">
    <tr data-bind="visible: isChecked">
        <td data-bind="text: name"></td>
        <td data-bind="text: age"></td>
    </tr>
</script>

<table id="selectionTable">
    <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
        </tr>
    </thead>
    <tbody data-template="selection-table-template" data-bind="source: employees"/>
</table>

<br />
<hr />

<table id="resultTable">
    <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
        </tr>
    </thead>
    <tbody data-template="row-template" data-bind="source: employees"/>
</table>

<hr/>
<div id='out'></div>
<div id='out2'></div>

CSS

table, th, td {
    border: 1px solid teal;
}
#selectionTable, #selectionTable th, #selectionTable td {
    border: 2px solid #6C006C;
}

JavaScript

var viewModel = kendo.observable({
    employees: [{
        name: "Lijo",
        age: "28",
        isChecked: true
    }, {
        name: "Binu",
        age: "33",
        isChecked: true
    }, {
        name: "Kiran",
        age: "29",
        isChecked: true
    }],
    printIsChecked: function (e) {
        var changedItem = e.items[0];
        
        $("#out").html("via Observable.change: " + changedItem.name + " is checked: " + changedItem.isChecked);
    },
    printIsChecked2: function(e) {
        $("#out2").html("via event-binding on input: " + e.data.name + " is checked: " + e.data.isChecked);
    }
});
viewModel.employees.bind("change", viewModel.printIsChecked);

$(document).ready(function () {
    kendo.bind($("body"), viewModel);
});