// 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;
}
External resources loaded into this fiddle: