Edit in JSFiddle

// Define a Person model.
var Person = kendo.data.Model.define({
    fields: {
        "firstName": {
            type: "string"
        },
        "lastName": {
            type: "string"
        }
    },
    
    // Define a function for fullName to get the firstName and lastName
    // and concatenate them together.
    fullName : function() {
        return this.get("firstName") + " " + this.get("lastName");
    }
});

// Create an observable object with an obserable array where each item
// in the array is an instance of a Person model.
var vm = kendo.observable({
    people: [
        new Person({
            firstName: "John",
            lastName: "DeVight"
        }),
        new Person({
            firstName: "Wendy",
            lastName: "Parry"
        })
    ]
});

kendo.bind($("#peopleRows"), vm);

<div class="title">Instructions</div>
<div>
Change the "First Name" or "Last Name" and see the "Full Name" change.
</div>

<table>
<thead>
    <tr>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Full Name</th>
    </tr>
</thead>
<tbody id="peopleRows" data-bind="source: people" data-template="personTemplate">
</tbody>   
</table>

<script type="text/x-kendo-template" id="personTemplate">
    <tr>
        <td><input data-bind="value: firstName" /></td>
        <td><input data-bind="value: lastName" /></td>
        <td><span data-bind="text: fullName" /></td>
    </tr>
</script>

.title {
    font-weight: bold;
    font-size: 18px;
}

table {
    margin-top: 10px;
}

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

th {
    width: 100px;
    background-color: Gray;
    color: White;
}

th:last-child {
    width: 150px;
}

td {
    padding-left: 4px;
    padding-top: 2px;
    height: 25px;
}

td input {
    width: 90px;
}