JSFiddle - React, Tailwind, and code Playground

by rusev

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2011.3.1129/js/kendo.all.min.js"></script>
<div id="grid">
</div>

JavaScript

var data = '<books>\
<book>\
<title>Eloquent JavaScript</title>\
<id>2</id>\
</book>\
<book>\
<title>JavaScript: The Good Parts</title>\
<id>1</id>\
</book></books>';

var dataSource = new kendo.data.DataSource({
        /*transport: {
            // specify the XML file to read. The same as read: { url: "books.xml" }
            read: "books.xml"
        },*/
        data: data,
        schema: {
            // specify the the schema is XML
            type: "xml",
            // the XML element which represents a single data record
            data: "/books/book",
            // define the model - the object which will represent a single data record
            model: {
                // configure the fields of the object
                fields: {
                    // the "title" field is mapped to the text of the "title" XML element
                    title: "title/text()",                   
                    id: { field: "id/text()", type: "number" }
                }
            }
        }
    });

$("#grid").kendoGrid({
    dataSource: dataSource,
    sortable: true
});