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"
    // Add a new person to the array.
    add: function() {
        this.people.push(new Person());
    // Delete the person from the array.
    delete: function (e) {
        var that = this;        
        $.each(that.people, function(idx, person) {
            if (e.data.uid === person.uid) {
                that.people.splice(idx, 1);
                return true;

kendo.bind($("#peopleList"), vm);
<div class="title">Instructions</div>
    <li>Change the "First Name" or "Last Name" and see the "Full Name" change.</li>
    <li>Try adding and deleting people.</li>

<div id="peopleList">
    <div id="commands">
        <button data-bind="click: add" class="k-button">Add</button>

            <th>First Name</th>
            <th>Last Name</th>
            <th>Full Name</th>
    <tbody 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>
        <td><button class="k-button" data-bind="click: delete">X</button></td>

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

#peopleList {
    width: 375px;
    margin-top: 5px;

#commands {
    width: 373px;
    background-color: #C0C0C0;

table {
    width: 375px;

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

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

th:last-child {
    width: 30px;

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

td input {
    width: 90px;

External resources loaded into this fiddle: