Kendo Variations Editor

by clairey

HTML

<script src="http://cdn.kendostatic.com/2012.1.229/js/kendo.all.min.js"></script>
<script src="https://raw.github.com/appendto/jquery-mockjax/master/jquery.mockjax.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.229/styles/kendo.metro.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.229/styles/kendo.common.min.css">
 <div id="example" class="k-content">
     
      <div id="window">
     <div id="forecast">
                <div id="tabstrip">
                    <ul>
                        <li class="k-state-active">
                            Upload Photo
                        </li>
                        <li>
                            Select from existing
                        </li>
                      
                 
                    </ul>
                    <div>
                        <div class="weather">
                              <div>
                    <input name="files" id="files" type="file" />
                    <p>
                        <input type="submit" value="Submit" class="k-button" />
                    </p>
                </div>
                        </div>
                       
                    </div>
                    <div>
                        <div class="weather">
                            <h2>29<span>&ordm;C</span></h2>
                            <p>Sunny weather in New York.</p>
                        </div>
                        <span class="sunny">&nbsp;</span>
                    </div>
                    <div>
                        <div class="weather">
                            <h2>21<span>&ordm;C</span></h2>
                            <p>Sunny weather in London.</p>
                        </div>
                        <span class="sunny">&nbsp;</span>
                    </div>
                    <div>
                        <div class="weather">
                            <h2>16<span>&ordm;C</span></h2>
                ...

CSS

.k-window{box-shadow: 2px 2px 12px black;
}

.product-view
        {
            float: left;
            width: 450px;
            margin: 5px;
            padding: 3px;
            -moz-box-shadow: inset 0 0 50px rgba(0,0,0,0.1);
            -webkit-box-shadow: inset 0 0 50px rgba(0,0,0,0.1);
            box-shadow: inset 0 0 50px rgba(0,0,0,0.1);
            border-top: 1px solid rgba(0,0,0,0.1);
            -webkit-border-radius: 8px;
            -moz-border-radius: 8px;
            border-radius: 8px;
        }

        .product-view dl
        {
            margin: 10px 0;
            padding: 0;
            min-width: 0;
        }
        .product-view dt, dd
        {
            float: left;
            margin: 0;
            padding: 0;
            height: 30px;
            line-height: 30px;
        }
        .product-view dt
        {
            clear: left;
            padding: 0 5px 0 15px;
            text-align: right;
            opacity: 0.6;
            width: 100px;
        }
        .k-listview
        {
            border: 0;
            padding: 0;
            min-width: 0;
        }
        .k-listview:after, .product-view dl:after
        {
            content: ".";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }
        .edit-buttons
        {
            text-align: right;
            padding: 5px;
            min-width: 100px;
            border-top: 1px solid rgba(0,0,0,0.1);
            -webkit-border-radius: 8px;
            -moz-border-radius: 8px;
            border-radius: 8px;
        }

        .k-toolbar, #listView, .k-pager-wrap
        {
            width: 660px;
            margin: 0 auto;
            -webkit-border-radius: 11px;
            -moz-border-radius: 11px;
            border-radius: 11px;s
        }
        #listView
        {
            width: 674px;
        }
        span.k-invalid-msg
        {
            position: absolute;
           ...

JavaScript

$(document).ready(function() {

    $.mockjax({
        url: "data.json",
        responseTime: 0,
        responseText: {
            "Context": null,
            "IsGeneric": false,
            "Items": [{
                "AdditionalPrice": 0.0000000000,
                "ApplicationName": "\/Catalog",
                "DeltaPriceDisplay": "$0.00",
                "Id": "4cc2b2bc-5393-4bc1-ba60-49b666c392ef",
                "Images": "http:\/\/www.nakov.com\/wp-content\/uploads\/2011\/09\/image43.png",
                "Inventory": 69,
                "IsActive": true,
                "Sku": "BOxygene",
                "Variant": "{\"AttributeId\":\"2f1eca7a-6fbb-46b7-8258-11647bb3b269\",\"AttributeValueId\":\"83ba2565-6f8d-4419-a4f8-a974dec593b7\"}",
                "VariantNames": {
                    "Attribute": "Color",
                    "AttributeValue": "Black"
                }},
            {
                "AdditionalPrice": 0.0000000000,
                "ApplicationName": "\/Catalog",
                "DeltaPriceDisplay": "$0.00",
                "Id": "0325de7d-ef4d-4f71-875a-377dbe49675b",
                "Images": "http:\/\/3.bp.blogspot.com\/-gjTNciiYFfY\/Tg2gRjllbRI\/AAAAAAAAAL4\/URlEEdLck0I\/s400\/.netNinja.png",
                "Inventory": 0,
                "IsActive": true,
                "Sku": "BOxygeneWhite",
                "Variant": "{\"AttributeId\":\"2f1eca7a-6fbb-46b7-8258-11647bb3b269\",\"AttributeValueId\":\"7e24e5f1-64b3-4d99-b429-9d89ea8fb00a\"}",
                "VariantNames": {
                    "Attribute": "Color",
                    "AttributeValue": "White"
                }}],
            "TotalCount": 2
        }
    });




    var crudServiceBaseUrl = "data.json",
        dataSource = new kendo.data.DataSource({
            transport: {
                read: {
                    url: crudServiceBaseUrl,
                    dataType: "json"
                },
                update: {
                    url:...