JSFiddle - React, Tailwind, and code Playground

by valchev

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.common.min.css">
<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.mobile.all.min.css">
<button onclick="load()">Load</button>
<br /><br />
<div id="menu"></div>

JavaScript

function load() {
    $.ajax({
        //using jsfiddle echo service to simulate JSON endpoint
        url: "/echo/json/",
        dataType: "json",
        type: "POST",
        data: {
            // /echo/json/ echoes the JSON which you pass as an argument
            json: JSON.stringify([
                    {
                        text: "Baseball",
                        items: [
                            { text: "Top News"},
                            { text: "Photo Galleries"},
                            { text: "Videos Records"},
                            { text: "Radio Records"}
                        ]
                    },
                    {
                        text: "Golf",
                        items: [
                            { text: "Top News"},
                            { text: "Photo Galleries"},
                            { text: "Videos Records"},
                            { text: "Radio Records"}
                        ]
                    },
                    {
                        text: "Swimming",
                        items: [
                            { text: "Top News"},
                            { text: "Photo Galleries"}
                        ]
                    }
            ])
        },
        success: function(response) {
            //hook up to the success event to initialize the menu;
             $("#menu").kendoMenu({
                 dataSource: response 
             });
        }
    });
}