JSFiddle - React, Tailwind, and code Playground

by Oleksii

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.621/styles/kendo.mobile.all.min.css">
<script src="http://cdn.kendostatic.com/2012.2.621/js/kendo.all.min.js"></script>
<div data-role="view" id="" data-title="First" data-init="initFileGroupsList">
    NON-statically defined listview
    <ul data-role="listview" id="fileGroups">
    </ul>
    <hr />
    Statically defined listview
    <ul data-role="listview" id="staticListView" data-type="group" data-style="inset" data-click="itemClicked">
        <li>Static Items
            <ul>
                <li><a  href="#aboutView">111111111</a></li>
                <li><a href="#aboutView">22222222222</a></li>
                <li><a href="#aboutView">333333333333</a>
                    <input id="ww" data-change="switchClicked" data-on-label="Clean" data-off-label="Skip" data-role="switch" />
                </li>
            </ul>
        </li>
    </ul>
</div>
<div data-role="view" id="aboutView" data-title="About">
    ABOUT
</div>
<div data-role="layout" data-id="mainLayout">
    <div data-role="header">
        <div data-role="navbar">
            <p>My View Title</p>
        </div>
    </div>
    <!--Content-->
    <div data-role="footer">
        <div data-role="tabstrip">
            <a href="" data-icon="settings">First</a> 
            <a href="#aboutView" data-icon="info">About</a>
        </div>
    </div>
</div>

<script id="fileGroupsItemTemplate" type="text/x-kendo-template">
    <table>
        <tr><td>
            <img src="#= data.Image#" />
        </td><td style="vertical-align: middle">
            #= data.Name #
        </td>
        </tr>
    </table>
    #if(data.Docs.length > 0){#
    <ul>
        #for(var i=0; i < data.Docs.length; i++){#
        <li>
            <a href="aboutView">#=data.Docs[i].Name#
            <input data-on-label="Clean" data-off-label="Skip" data-role="switch" #=data.Docs[i].NeedProcess ? "checked='checked'" : ""# /></a>
            
        </li>
       ...

CSS

.km-ios .km-list > li
{
    font-weight: normal;
    font-size: smaller;
}        
.km-switch, .km-checkbox
{
    font-size: .79em;
    font-size: .79rem;
    width: 5.1em;
    width: 5.1rem;
    height: 1.5em;
    height: 1.5rem;
    line-height: 1.5em;
    line-height: 1.5rem;
}
.km-listview-link::after
{
    display: none;
}

JavaScript

var viewModel;


var app, appElement = null,

appElement = document.body,

app = new kendo.mobile.Application(appElement, {
    layout: "mainLayout",
    transition: 'fade',
    //initial: "mainView",
    //icon: "Images/warning-icon.png",
    platform: "ios"
});


function initFileGroupsList(e) {
    var fileGropsRemoteDS = kendo.data.DataSource.create([{"__type":"JsonFileTypeGroup:#","Docs":[{"ConvertToPdf":1,"Name":"мой ноут на продажу.docx","NeedProcess":true},{"ConvertToPdf":1,"Name":"sticky notes.docx","NeedProcess":false},{"ConvertToPdf":0,"Name":"билеты.odt","NeedProcess":true}],"Image":"http://icons.iconarchive.com/icons/zerode/plump/32/Office-Word-icon.png","Name":"Word"},{"__type":"JsonFileTypeGroup:#","Docs":[{"ConvertToPdf":1,"Name":"Core-Node Testing 04292012.xlsx","NeedProcess":true},{"ConvertToPdf":1,"Name":"экселевский документ","NeedProcess":true},{"ConvertToPdf":0,"Name":"Test (EN) - Тест(RU)","NeedProcess":true}],"Image":"http://icons.iconarchive.com/icons/zerode/plump/32/Office-Excel-icon.png","Name":"Excel"},{"__type":"JsonFileTypeGroup:#","Docs":[{"ConvertToPdf":1,"Name":"Test presentation.pptx","NeedProcess":true}],"Image":"http://icons.iconarchive.com/icons/zerode/plump/32/Office-Outlook-icon.png","Name":"PPT"}]);

    e.view.element.find("#fileGroups").kendoMobileListView({
        type: "group",
        style: "inset",
        template: $("#fileGroupsItemTemplate").html(),
        dataSource: fileGropsRemoteDS//fileGropsDS2
    });


}

function itemClicked(s){
    alert('itemClicked' + '\n\n' + Object.keys(s) + "\n\n" + Object.keys(s.sender.element) + "\n\n" + s.sender.element.attr('id'));
    /*var swtch = null;
    try{swtch = s.item.find('input').data('kendoMobileSwitch');}catch(err){}
    //alert(Object.keys(s) + '\n\n' + s.item.find('input').data('kendoMobileSwitch').check());
    alert(swtch.check() );
    if(swtch == null ||  swtch.check()== false)
    {s.preventDefault(); alert(44);}*/
}

function switchClicked(s){
   ...