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>
Change the "First Name" or "Last Name" and see the "Full Name" change.

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

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

.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;

External resources loaded into this fiddle: