JSFiddle - React, Tailwind, and code Playground

by valchev

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.mobile.all.min.css">
<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
<div data-role="view" id="foo" data-init="createListView" data-title="List View Test" data-layout="mobile-tabstrip">
    <ul id="listview"></ul>
</div>

<div data-role="view" id="bar" data-title="Another View" data-layout="mobile-tabstrip">
    <p>Another view</p>
</div>

<div data-role="layout" data-id="mobile-tabstrip">
    <header data-role="header">
        <div data-role="navbar">
            <span data-role="view-title"></span>
        </div>
    </header>

    <p>TabStrip</p>

    <div data-role="footer">
        <div data-role="tabstrip">
            <a href="#foo" data-icon="home">Home</a>
            <a href="#bar" data-icon="history">Bar</a>
        </div>
    </div>
</div>

JavaScript

var app = new kendo.mobile.Application(document.body, {
    platform: "ios"   
});

function createListView() {
  $("#listview").kendoMobileListView({
    dataSource: {
      transport: {
        read: {
        //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([
              {"id": 1, "content": "mock content"},
              {"id": 2, "content": "mock content"},
              {"id": 3, "content": "mock content"},
              {"id": 4, "content": "mock content"},
              {"id": 5, "content": "mock content"},
              {"id": 6, "content": "mock content"},
              {"id": 7, "content": "mock content"},
              {"id": 8, "content": "mock content"},
              {"id": 9, "content": "mock content"},
              {"id": 10, "content": "mock content"},
              {"id": 11, "content": "mock content"},
              {"id": 12, "content": "mock content"},
              {"id": 13, "content": "mock content"},
              {"id": 14, "content": "mock content"},
              {"id": 15, "content": "mock content"},
              {"id": 16, "content": "mock content"},
              {"id": 17, "content": "mock content"},
              {"id": 18, "content": "mock content"},
              {"id": 19, "content": "mock content"},
              {"id": 20, "content": "mock content"},
              {"id": 21, "content": "mock content"},
              {"id": 22, "content": "mock content"},
              {"id": 23, "content": "mock content"},
              {"id": 24, "content": "mock content"}
            ])
          }
        }
      }
   },
   template: "Record id:: #= id #</ br><p>#= content #</p>"
  });
}