Custom Paging

[Jenny]

I am trying to do a custom paging by using mvvm, datasource and template. My problem is I have to use this.set to set the dataSource page() or total pages() to get the value this.get("dataSource").totalPages() or this.get("dataSource").page() refreshed. That is why I set a variable pageRefreshHolder as work-around. Is there some easy way?

var viewModel=kendo.observable({

        dataSource:new kendo.data.DataSource({

            data:ReportsData,

            pageSize:12,

            sort:{ field: "name", dir: "asc" }

        }),

        copy:function(e){

            this.dataSource.add(e.data);

            this.set("pageRefreshHolder",this.dataSource.totalPages()); //I have to have this line to get the totalPage work

        },

        goToNextPage:function(){

            if(this.dataSource.page()<this.dataSource.totalPages())

                this.dataSource.page(this.dataSource.page()+1);

            else

                this.dataSource.page(1);

            $jquery("#reportsArea").find("div#phItem").show("slide",{direction:"right"}, 500);

            this.set("pageRefreshHolder",this.dataSource.page()); //I have to have this line to get the currentPage work

 

        },

        goToPrevPage:function(){

            if(this.dataSource.page()>1)

                this.dataSource.page(this.dataSource.page()-1);

            else

                this.dataSource.page(this.dataSource.totalPages());

            $jquery("#reportsArea").find("div#phItem").show("slide",{direction:"left"}, 500);

            this.set("pageRefreshHolder",this.dataSource.page()); //I have to have this line to get the currentPage work

        },

        pageRefreshHolder: 1,

        totalPage: function() {

            return this.get("dataSource").totalPages();

        },

        currentPage: function(){

            return this.get("dataSource").page();

        }

    });

    kendo.bind($jquery("#reportsArea"),viewModel);