Kendo UI - Menu JSON Example #2

by LeeMellinger

HTML

<pre><code id=jsonViewer></code></pre>

CSS

pre {
    background-color: ghostwhite;
    border: 1px solid silver;
    padding: 10px 20px;
    margin: 20px;
}
.json-key {
    color: brown;
}
.json-value {
    color: navy;
}
.json-string {
    color: olive;
}

JavaScript

if (!library) var library = {};

library.json = {
    replacer: function (match, pIndent, pKey, pVal, pEnd) {
        var key = '<span class=json-key>';
        var val = '<span class=json-value>';
        var str = '<span class=json-string>';
        var r = pIndent || '';
        if (pKey) r = r + key + pKey.replace(/[": ]/g, '') + '</span>: ';
        if (pVal) r = r + (pVal[0] == '"' ? str : val) + pVal + '</span>';
        return r + (pEnd || '');
    },
    prettyPrint: function (obj) {
        var jsonLine = /^( *)("[\w]+": )?("[^"]*"|[\w.+-]*)?([,[{])?$/mg;
        return JSON.stringify(obj, null, 3)
            .replace(/&/g, '&amp;').replace(/\\"/g, '&quot;')
            .replace(/</g, '&lt;').replace(/>/g, '&gt;')
            .replace(jsonLine, library.json.replacer);
    }
};

// Init
var menu = new Array();
var menuItems = new Array();
var menuItem = {};


// File
menuItem = {};
menuItem.text = "File";
menuItem.level = 1;
menuItem.items = menuItems;
menu.push(menuItem);

// File/New
menuItem = {};
menuItem.text = "New";
menuItem.level = 2;
menuItems.push(menuItem);

// File/Save
menuItem = {};
menuItem.text = "Save";
menuItem.level = 2;
menuItems.push(menuItem);

// File/Open
menuItem = {};
menuItem.text = "Open";
menuItem.level = 2;
menuItems.push(menuItem);

// Clear the sub menu array.
menuItems = new Array();

// Edit
menuItem = {};
menuItem.text = "Edit";
menuItem.level = 1;
menuItem.items = menuItems;
menu.push(menuItem);

// Edit/Cut
menuItem = {};
menuItem.text = "Cut";
menuItem.level = 2;
menuItems.push(menuItem);

// Edit/Copy
menuItem = {};
menuItem.text = "Copy";
menuItem.level = 2;
menuItems.push(menuItem);

/*
// File/Save
menuItem = {};
menuItem.text = "Save";
menuItem.level = 2;
menuItems.push(menuItem);

// File/Open
menuItem = {};
menuItem.text = "Open";
menuItem.level = 2;
menuItems.push(menuItem);

// File
menuItem = {};
menuItem.text = "File";
menuItem.level = 1;
menuItem.items = menuItems;
menu.push(menuItem);

// Edit
menuItem...