How to display only selected records in the result table

by Lijo

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="row-template" type="text/x-kendo-template">
    <tr data-bind="visible: isChecked">
        <td data-bind="text: name"></td>
        <td data-bind="text: age"></td>
        <td>
            <button type="button" data-bind="click: deleteEmployee">Delete</button>
        </td>
    </tr>
</script>

<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"/>
        </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>

CSS

table, th, td {
            border: 1px solid black;
        }

JavaScript

var viewModel = kendo.observable({
    employees: [
        { name: "Lijo", age: "28", isChecked: true },
        { name: "Binu", age: "33", isChecked: true },
        { name: "Kiran", age: "29", isChecked: true }
    ],

    personName: "",
    personAge: "",

    addEmployee: function () {
        this.get("employees").push({
            name: this.get("personName"),
            age: this.get("personAge")
        });

        this.set("personName", "");
        this.set("personAge", "");
    },

    deleteEmployee: function (e) {
        var person = e.data;
        var employees = this.get("employees");
        var index = employees.indexOf(person);
        var employee = employees[index];
        
        employee.set('isChecked', false);
        
    }
});


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