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 id="reportsArea">
    <div style="width:100%; float:left; margin-top:3px; margin-left:10px;">
        <div style="float:left; width:20px; padding-top:65px;">
            <button data-bind="click: goToPrevPage">goToPrevPage</button>
        </div>
        <div id="phItem" style="float:left; width:740px; height:150px;" data-template="item" data-bind="source: dsReports" data-role="listview">
             
        </div>
        <div style="float:left; width:20px; padding-top:65px;">
            <button data-bind="click: goToNextPage">goToNextPage</button>
        </div>
    </div>
    <div id="phPaging" style="width:100%; float:left; margin-top:3px; text-align:center;" data-template="pageDot" data-bind="source: this">
 
    </div>
</div>
<script type="text/x-kendo-template" id="item">
    <p>#: foo # :::: #: bar #</p>
</script>
 
<script type="text/x-kendo-template" id="pageDot">
    #: CurrentPage() #
</script>

JavaScript

var ReportsData = [];

for (var i = 1; i < 51; i++) {
    var item = {
        id: i,
        foo: i,
        bar: i.toString() + i
    };
    
    ReportsData.push(item);
}

var viewModel=kendo.observable({
        dsReports:new kendo.data.DataSource({
            data:ReportsData,
            pageSize:3
        }),
        copy:function(e){
            this.dsReports.add(e.data);
        },
        remove: function(e){
            if(confirm("Are you sure you want to remove this report?"))
                this.dsReports.remove(e.data);
        },
        showType:function(e){
            if ($jquery(e.target).attr("type")!="All")
                this.dsReports.filter({field: "type", operator: "eq", value: $jquery(e.target).attr("type")});
            else
                this.dsReports.filter([]);
 
        },
        goToNextPage:function(){
            if(this.dsReports.page()<this.dsReports.totalPages())
                this.dsReports.page(this.dsReports.page()+1);
            else
                this.dsReports.page(1);
            
            this.trigger("change", {field: "CurrentPage"});
        },
        goToPrevPage:function(){
            if(this.dsReports.page()>1)
                this.dsReports.page(this.dsReports.page()-1);
            else
                this.dsReports.page(this.dsReports.totalPages());
            
            this.trigger("change", {field: "CurrentPage"});
        },
        CurrentPage: function(){ return this.dsReports.page();}
    });
    kendo.bind($("#reportsArea"),viewModel);