Kendo UI

jQuery + Kendo UI + MockJax

HTML

<script src="http://cdn.kendostatic.com/2013.1.319/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.319/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"  data-bind="value:FirstName" required="required"/><br />
                Last Name: <input type="text" name="LastName" data-bind="value:LastName"/><br />
                Country: <input type="text" name="Country" data-bind="value:Country"/><br />
                <input type="button" class="k-button save" value="Save" />
                <input type="button" class="k-button cancel" value="Cancel" />
            </div>
        </div>
        <div>
            <div class="orders"></div>
        </div>
    </div>
    
</script>

JavaScript

var Model = kendo.data.Model.define({
    id: "EmplyeeID",
    fields: {
        FirstName: "FirsName",
        LastName: "LastName",
        Country: "Country"
    }
});

var editableModel;

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: Model
        }
    },
    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 masterRow = e.masterRow;
    var originalModel = e.data; //keep reference to the model
    var grid = this;
    var viewCollection = grid.dataSource.view();

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

    detailRow.find(".employee-details input[name='Country']")                        .kendoDropDownList({
        dataSource:[{Id:"USA", CountryName:"United States Of America"},
                    {Id:"UK", CountryName:"United Kingdom"}],
        dataTextField: "CountryName",
        dataValueField: "Id"
    });
    editableModel = new Model(originalModel.toJSON());
    //editableModel = originalModel;
    kendo.bind(detailRow, editableModel);
    detailRow.find(".employee-details > .k-button.save").click(function() {
        if (editableModel.dirty) {
           ...