JSFiddle - React, Tailwind, and code Playground

by valchev

HTML

<script src="http://cdn.kendostatic.com/2012.2.913/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.913/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.913/styles/kendo.mobile.all.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.913/styles/kendo.default.min.css">
<div id="foo" data-role="view" data-init="onInit">
    <p>
        Search:
        <input id="search" data-type="text" class="k-input k-textbox" />
    </p>
    <ul id="listview"></ul>
</div>

CSS

.test {
    color: green;
}

JavaScript

var app = new kendo.mobile.Application(),
    data = [
        {id: 1, foo: "AAA"},
        {id: 2, foo: "ABB"},
        {id: 3, foo: "CCC"},
        {id: 4, foo: "DDD"},
        {id: 4, foo: "EEE"}
    ],
    dataSource = new kendo.data.DataSource({
        data: data,
        schema: {
            model: {
                id: "id",
                fields: {
                    id: {type: "number"},
                    foo: {type: "string"}                
                }
            }            
        }
    });

function onInit() {
    $("#listview").kendoMobileListView({
        dataSource: dataSource,
        style: "inset",
        template: "#= id # || #= foo #"
    });
    
    $("#search").blur(function(e) {
        var value = e.target.value;
        
        if(value != "") {
            //apply filter
            dataSource.filter({field: "foo", operator: "startswith", value: value});
        } else {
            //clear filter
            dataSource.filter([]);
        }
    });
}