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">
<div data-role="view" id="householdList" data-init="mobileListViewEndlessScrolling">
    <ul id="endless-scrolling"></ul>          
</div>
         
<script id="endless-scrolling-template" type="text/x-kendo-template">
    <a data-role="button" data-icon="details" data-item-id="#= Id #" href="\#household?id=#= Id #"></a>
    <a class="household-link" data-role="listview-link" href="\#household?id=#= Id #">
        <h2>#= Title #</h2>
    </a>
</script>

JavaScript

var app = new kendo.mobile.Application(document.body);

function mobileListViewEndlessScrolling() {            
    var dataSource = new kendo.data.DataSource({
        pageSize: 20,
        serverPaging: true,
        transport: {
            read: {
                type: "POST",
                url: "/echo/json/",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                data: { //using jsFiddle echo service to simulate Ajax request
                    json: JSON.stringify(response)
                }                    
            }
            
        },
        schema: {
            
        }
    });
    
    $("#endless-scrolling").kendoMobileListView({
        dataSource: dataSource,
        template: $("#endless-scrolling-template").text(),
        endlessScroll: true,
        scrollTreshold: 30      //treshold in pixels
    });
}     

var response = [{"Id":482186,"Title":"Smith","Address1":"2656 Chancellor Way","Address2":"","City":"Duluth","State":"GA","Zip":"30096","PrimaryPhone":"770-418-4943","Letter":"S"},{"Id":525649,"Title":"Smith","Address1":"9595 Red Bird Ln","Address2":"","City":"Alpharetta","State":"GA","Zip":"30022-7101","PrimaryPhone":"770-475-0448","Letter":"S"},{"Id":523379,"Title":"Smith","Address1":"778 Lakeview Ln","Address2":"","City":"Berkeley Lake","State":"GA","Zip":"30096-3044","PrimaryPhone":"770-448-4926","Letter":"S"},{"Id":529676,"Title":"Smith","Address1":"6115 Abbotts Bridge Rd","Address2":"Aot 116","City":"Duluth","State":"GA","Zip":"30097-5750","PrimaryPhone":"","Letter":"S"},{"Id":528713,"Title":"Smith","Address1":"718 Lakeshore Dr","Address2":"","City":"Berkeley Lake","State":"GA","Zip":"30096-3040","PrimaryPhone":"770-448-8747","Letter":"S"},{"Id":522477,"Title":"Smith","Address1":"7771 Stables Dr","Address2":"","City":"Atlanta","State":"GA","Zip":"30350-5553","PrimaryPhone":"770-392-4881","Letter":"S"},{"Id":523331,"Title":"Smith","Address1":"6075 Grand View...