editor & dataSource

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" data-title="test" id="list" data-init="list" data-show="resetScroller">
    <ul id="listview"></ul>
</div>

<div data-role="view" data-title="test" id="details" data-show="ShowDetails">
    <header data-role="header">
        <div data-role="navbar">
            <a id="backBtn" class="nav-button" data-align="left" data-role="backbutton">Back</a>
        </div>
    </header>
    <div id="view"></div>
</div>
     
<script id="list_template" type="text/x-kendo-template">
    <li>
        <a href="\\#details">
            <strong>#= name #</strong><br />#= email # <br />#= shortText #
        </a>
    </li>
</script>

<script type="text/x-kendo-template" id="view_template">
        <p><b>Email: </b> <a href="mailto:#= email #" target="_blank">#= email #</a></p>
        <p><b>Telephone:</b> #= telephone #</p>
        <p><b>Message:</b><br />#= message #</p>
</script>

JavaScript

var app = new kendo.mobile.Application(document.body),
    myData = [];

for (var i = 0; i < 50; i++) {
    var item = {
        name: "Name" + i,
        email: "email" + i,
        shortText: "shortText" + i
    };
    
    myData.push(item);
}

function list(){
    $("#listview").kendoMobileListView({
        dataSource: new kendo.data.DataSource({
            data: myData 
        }),
      endlessScroll: true,
      scrollTreshold: 30, //treshold in pixels                       
      style: "inset",     
      template: $("#list_template").text()
    }); 
}

function ShowDetails() {
    var item_selected = {
        email: "some-mail",
        telephone: "123-123-123",
        message: "some message"
    };
    
    if(item_selected) {
        var template = kendo.template($("#view_template").html());
        $("#view").html(template(item_selected));
    }
}

function resetScroller(e) {
    e.view.scroller.reset();   
}