Edit in JSFiddle

// Create an observable view model object.
var person = kendo.observable({
    firstName: "John",
    lastName: "DeVight",

    // Create a calculated field.
    fullName: function() {
        // The "get" function must be used so that changes to any
        // dependencies will be reflected in the calculated field.
        return this.get("firstName") + " " + this.get("lastName");
    }
});

// Bind the view model to the personFields element.
kendo.bind($('#personFields'), person);

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

<div id="personFields">
    <div class="field">
        <div>First Name:</div><input data-bind="value: firstName"/>
    </div>
    <div class="field">
        <div>Last Name:</div><input data-bind="value: lastName"/>
    </div>
    <div class="field">
        <div>Full Name:</div><span data-bind="text: fullName"/>
    </div>
</div>

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

#personFields {
    margin-top: 20px;
}

.field {
    display: block;
    width: 100%;
    padding-bottom: 5px;
}

.field div {
    display: inline-block;
    width: 100px;
}