Kendo UI

jQuery + Kendo UI + MockJax + Knockout

HTML

<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.common.min.css">
                    <div id = "AnimalsGrid" data-role="grid"  data-pageable="true" data-editable='{"update":"false", "mode" : "popup", "confirmation" : "Are you sure you want to remove this animal?"}'
                        data-bind="source: AnimalsSource, events: { change: rowChange }" 
                        data-selectable="true"
                        data-toolbar='["create", "save", "cancel"]'                 
                        data-columns='[{"field":"AnimalName", "title":"Name"},
                                        {"command":"destroy", "width":"100px"}]'>             
</div>
                
     <div id="AnimalDetails" data-bind="visible: selectedAnimal" >
                    <div id="AnimalDetailsEditBox" class="GridDetails k-widget k-header">
                    <fieldset>
                        <legend>EDIT ANIMAL DETAILS</legend>
                        <span class ="GridDetailsHead">EDIT ANIMAL DETAILS</span>

                        <label>Name</label> 
                         <input type:"Text" data-bind="value:selectedAnimal.AnimalName" />

                        <label>Birth date</label> 
                        <input id="datePicker" data-format="dd.MM.yyyy." data-bind="value:selectedAnimal.BirthDate" data-role="datepicker" />

                        <label>Mother's name</label> 
                        <input type:"Text" data-bind="value:selectedAnimal.MothersName"/>

                        <label>Farm's name</label> 
                        <input type:"Text" data-bind="value:selectedAnimal.FarmsName" />

                        <label>Purchase price</label> 
                        <input data-bind="value:selectedAnimal.PurchasePrice" type="number"...

CSS

#content
{
    margin-left:auto;
    margin-right:auto;
    width:750px;
}


.GridDetails .GridDetailsHead
{
    display: block;
    font-size: 14px;
    margin-top: 0;
    text-indent: 0;
    margin-bottom: 10px;
    padding-bottom: 5px;
    border-bottom: 1px solid #999;
    background-position: 0 -178px;
}

.GridDetails
{

    margin: 0 0 0 15px;
    padding: 10px;
    border: 1px solid inherit;
    background-image: none;
    -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.45), inset 0 0 30px rgba(0,0,0,0.07);
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.45), inset 0 0 30px rgba(0,0,0,0.07);
    box-shadow: 0 1px 1px rgba(0,0,0,0.45), inset 0 0 30px rgba(0,0,0,0.07);
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    float: left;
    max-width: 400px;
    top: -1px;
    right: -1px;
    height: auto;
    margin: 0;
    margin-top: 38px;
    z-index: 2;
}

h1, h2, h3,
h4, h5, h6 {
    color: #000;
    margin-bottom: 0;
    padding-bottom: 0;
}

h1 {
    font-size: 2em;
}

h2 {
    font-size: 1.75em;
}

h3 {
    font-size: 1.2em;
}

h4 {
    font-size: 1.1em;
}

h5, h6 {
    font-size: 1em;
}

header, footer, hgroup,
nav, section {
    display: block;
}


body {
    background-color: #fff;
    /*border-top: solid 10px #000;*/
    color: #333;
    font-size: .85em;
    font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
    margin: 0;
    padding: 0;
}


/* page elements
----------------------------------------------------------*/
/* featured */
.featured {
    background-color: #fff;
}

    .featured .content-wrapper {
        background-color: #7ac0da;
        background-image: -ms-linear-gradient(left, #7ac0da 0%, #a4d4e6 100%);
        background-image: -o-linear-gradient(left, #7ac0da 0%, #a4d4e6 100%);
        background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #7ac0da), color-stop(1, #a4d4e6));
        background-image: -webkit-linear-gradient(left, #7ac0da 0%, #a4d4e6 100%);
       ...

JavaScript

var Animals = [{ "AnimalID": 1, "AnimalName": "Milka", "BirthDate": "2012-05-05T00:00:00", "MothersName": "Milka senior", "FarmsName": "My Farm", "PurchasePrice": "230.00", "Weight": "150", "AnimalSex": "1", "PurchasePartner": "Some company" }];
            

            if (localStorage.getItem("Animals") != null)
                Animals = jQuery.parseJSON(localStorage.getItem("Animals"));
            

            var AnimalsViewModel = kendo.observable({
                AnimalsSource: new kendo.data.DataSource({
                    pageSize: 4,
                    batch: true,
                    transport: {
                        read: function(options) { 
                            options.success(Animals);
                        },
                        create: function(options) {
                            localStorage.setItem("Animals", kendo.stringify(options.data.models)); 
                        },
                        update: function(options) {
                            localStorage.setItem("Animals", kendo.stringify(options.data.models));
                        },
                        destroy: function(options) {
                            localStorage.setItem("Animals", kendo.stringify(options.data.models));
                        }
                    },
                        schema: {
                            type: "json",
                            id: "AnimalID",
                            model: {
                                fields:
                                {                     
                                    AnimalID: {editable: false, nullable:true, type: "number"},
                                    AnimalName: {type: "string"},
                                    BirthDate: { type: "date" },
                                    MothersName: { type: "string" },
                                    FarmsName: { type: "string" },
                                    PurchasePrice: { type: "number" },
 ...