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">
     
    
       <ul id="menu">
                <li>
                    Products
                    <ul>
                        <li>
                            Furniture
                            <ul> <!-- moving the UL to the next line will cause an IE7 problem -->
                                <li>Tables & Chairs</li>
                                <li>Sofas</li>
                                <li>Occasional Furniture</li>
                                <li>Childerns Furniture</li>
                                <li>Beds</li>
                            </ul>


                        </li>
                        <li>
                            Decor
                            <ul> <!-- moving the UL to the next line will cause an IE7 problem -->
                                <li>Bed Linen</li>
                                <li>Throws</li>
                                <li>Curtains & Blinds</li>
                                <li>Rugs</li>
                                <li>Carpets</li>
                            </ul>
                        </li>
                        <li>
                            Storage
                            <ul> <!-- moving the UL to the next line will cause an IE7 problem -->
                                <li>Wall Shelving</li>
                                <li>Kids Storage</li>
                                <li>Baskets</li>
                                <li>Multimedia Storage</li>
                                <li>Floor Shelving</li>
                                <li>Toilet Roll...

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() {
    
     $("#menu").kendoMenu();

    $.mockjax({
        url: "data.json",
        responseTime: 0,
        responseText: {
            "Context": null,
            "IsGeneric": false,
            "Items": [{
                "AdditionalUrlsRedirectToDefaultOne": true,
                "AllowMultipleUrls": false,
                "AllowParameterValidation": true,
                "AvailableLanguages": ["en", "es"],
                "Extension": "",
                "FullUrl": "\/home",
                "HasChildren": false,
                "HasTranslationSiblings": false,
                "Id": "87ee39ce-a576-4cf7-8349-a983a663a743",
                "IsExternal": false,
                "LinkedNodeFullUrl": null,
                "LinkedNodeId": "00000000-0000-0000-0000-000000000000",
                "LinkedNodeProvider": null,
                "LinkedNodeTitle": null,
                "LocalizationStrategy": 2,
                "MultipleNavigationNodes": null,
                "NodeType": 0,
                "OpenNewWindow": false,
                "ParentId": "f669d9a7-009d-4d83-ddaa-000000000002",
                "Path": "home",
                "RedirectUrl": null,
                "Title": {
                    "PersistedValue": "Home",
                    "Value": "Home",
                    "ValuesPerCulture": [{
                        "Key": "",
                        "Value": "Home"},
                    {
                        "Key": "en",
                        "Value": "Home"},
                    {
                        "Key": "es",
                        "Value": "Página principal"}]
                },
                "TitlesPath": "Home",
                "CurrentTemplateId": "00000000-0000-0000-0000-000000000000",
                "DateCreated": "\/Date(1322732748833)\/",
                "IsContentEditable": true,
                "IsEditable": true,
                "IsGroup": false,
                "IsHomePage": true,
        ...