Kendo UI

jQuery + Kendo UI + MockJax

HTML

<script src="https://raw.github.com/appendto/jquery-mockjax/master/jquery.mockjax.js"></script>
<script src="http://cdn.kendostatic.com/2012.1.322/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.blueopal.min.css">
<div id="grid"></div>

<script type="text/x-kendo-template" id="template">
    <div class="tabstrip">
        <ul>
            <li class="k-state-active">Contact Information</li>
            <li>Orders</li>
        </ul>
       
        <div>
            <div class='employee-details'>
                First Name: <input type="text" name="FirstName" value="${FirstName}"/><br />
                Last Name: <input type="text" name="LastName" value="${LastName}"/><br />
                Country: <input type="text" name="Country" value="${Country}"/><br />
                <input type="button" class="k-button" value="Save" />
            </div>
        </div>
        <div>
            <div class="orders"></div>
        </div>
    </div>

</script>

JavaScript

var element = $("#grid").kendoGrid({
    dataSource: {
        type: "odata",
        transport: {
            read: "http://demos.kendoui.com/service/Northwind.svc/Employees"
        },
        pageSize: 5,
        serverPaging: true,
        serverSorting: true,
        schema: {
            model: {
                id: "EmplyeeID",
                fields: {
                    FirstName: "FirsName",
                    LastName: "LastName",
                    Country: "Country"
                }
            }
        }
    },
    height: 450,
    sortable: true,
    pageable: true,
    detailTemplate: kendo.template($("#template").html()),
    detailInit: detailInit,
    toolbar: [{ text:"Save Changes", className: "grid-save-changes"}],
    columns: [
        {
            field: "FirstName",
            title: "First Name"
        },
        {
            field: "LastName",
            title: "Last Name"
        },
        {
            field: "Country"
        },
        {
            field: "City"
        },
        {
            field: "Title"
        }
    ]
});

function detailInit(e) {
    var detailRow = e.detailRow;
    var model = e.data; //keep reference to the model

    detailRow.find(".tabstrip").kendoTabStrip({
        animation: {
            open: { effects: "fadeIn" }
        }
    });

    detailRow.find(".employee-details > input[type='button']").click(function() {
        
        var ds = $(this).closest(".k-grid").data("kendoGrid").dataSource;
        
        //retrieve the input values
        var firstNameValue = detailRow.find(".employee-details>input[name=FirstName]").val();
        var lastNameValue = detailRow.find(".employee-details>input[name=LastName]").val();
        var countryValue = detailRow.find(".employee-details>input[name=Country]").val();
        
        //use set method to change the corresponding values of the model
        //in that way the record will be marked as dirty
        model.set("FirstName",...