JSFiddle - React, Tailwind, and code Playground

by bundyo

HTML

<script src="http://cdn.kendostatic.com/2012.2.913/js/kendo.mobile.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.913/styles/kendo.mobile.all.min.css">
<div data-role="view" id="view" data-title="Title" data-show="showView">
    <div data-role="header">
        <div data-role="navbar">Some Title</div>
    </div>
</div>
<script type="text/x-kendo-template" id="template">
  <p>Some fixed element.<br>The table below should be scrollable though:</p>
  <div class="table-wrapper" style="width: 400px; height: 400px">
    <table width="1000">
      # for (var i = 1; i <= 40; i++) { #
        <tr>
        # for (var j = 1; j <= 20; j++) { #
          <td>#: i * j #</td>      
        # } #
        </tr>
      # } #
    </table>
  </div>
</script>

CSS

#view td {
    border: 1px solid black;
}

#view table {
    table-layout: fixed;
}

JavaScript

var template = kendo.template($('#template').html());
var showView = function(e) {
    // Suppose the template data comes from a webservice or something.
    e.view.content.html(template({}));
    $scrollable = e.view.content.find('.table-wrapper');
    $scrollable.kendoMobileScroller({elastic: false});
};

new kendo.mobile.Application();