grid display page number in template

HTML

<script src="http://cdn.kendostatic.com/2012.1.515/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.default.min.css">
<div id="grid"></div>
<br />
<span id="display"></span>

JavaScript

var data = [
    {foo: 1, bar: "bar 1"},
    {foo: 2, bar: "bar 2"},
    {foo: 3, bar: "bar 3"},
    {foo: 4, bar: "bar 4"},
    {foo: 5, bar: "bar 5"},
    {foo: 6, bar: "bar 6"}
]
    
$("#grid").kendoGrid({
    dataSource: {
        
        data: data,
        pageSize: 2
    },
    pageable: true,
    columns: [
        {field:"foo", template: kendo.template("foo: #= foo # <> Page: #= getCurrentPage() #")},
        "bar"
    ],
    dataBound: function() {
        $("#display").html(this.dataSource.page());
    }
});

function getCurrentPage() {
    return $("#grid").data("kendoGrid").dataSource.page();
}