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">
<ul id="panelbar">
  <li>
      <span class="k-link">ListView 1</span>
      <div class="k-content">
          <div id="listview1"></div>
          <div id="pager1" class="k-widget k-pager-wrap"></div>
      </div>
  </li>
  <li>
      <span class="k-link">ListView 2</span>
      <div class="k-content">
          <div id="listview2"></div>
          <div id="pager2" class="k-widget k-pager-wrap"></div>
      </div>
  </li>
</ul>

<script id="template" type="text/x-kendo-template">
    <div>Name: ${name} || Age: ${age}</div>
</script>

JavaScript

$("#panelbar").kendoPanelBar({
    
});

var ds1 = new kendo.data.DataSource({
    data: [
        { name: "John Doe", age: 23 }, 
        { name: "Jane Doe", age: 23 },
        { name: "John Doe", age: 23 }, 
        { name: "Jane Doe", age: 23 },
        { name: "John Doe", age: 23 }, 
        { name: "Jane Doe", age: 23 },
        { name: "John Doe", age: 23 }, 
        { name: "Jane Doe", age: 23 },
        { name: "John Doe", age: 23 }, 
        { name: "Jane Doe", age: 23 },
        { name: "John Doe", age: 23 }, 
        { name: "Jane Doe", age: 23 }
    ],
    pageSize: 4
});

var ds2 = new kendo.data.DataSource({
    data: [
        { name: "Jack Smith", age: 33 }, 
        { name: "Jane Smith", age: 33 },
        { name: "Jack Smith", age: 33 }, 
        { name: "Jane Smith", age: 33 },
        { name: "Jack Smith", age: 33 }, 
        { name: "Jane Smith", age: 33 },
        { name: "Jack Smith", age: 33 }, 
        { name: "Jane Smith", age: 33 }
    ],
    pageSize: 3
});

$("#listview1").kendoListView({
    dataSource: ds1,
    template: $("#template").html()
});

$("#pager1").kendoPager({
    dataSource: ds1 
});

$("#listview2").kendoListView({
    dataSource: ds2,
    template: $("#template").html()
});

$("#pager2").kendoPager({
    dataSource: ds2 
});