Kendo UI

jQuery + Kendo UI + MockJax

by wolfpackt99

HTML

<script src="http://cdn.kendostatic.com/2011.3.1129/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.default.min.css">
<div id="grid">
    <div class='k-pager-wrap k-grid-pager' data-role='pager'></div>
    <table class='focusable'></table>
    <div class='k-pager-wrap k-grid-pager' id='pager2' data-role='pager'></div>
</div>

CSS

.k-grid .k-pager {
    float: right;
    vertical-align: central;
    //border: solid 1px blue;
    margin-top: 2px;
}
.k-grid .k-status-text
{
    float: right;
    vertical-align: central;
}
.k-grid .k-results-per-page
{
   vertical-align: central;
    //border: solid 1px red;
}

JavaScript

var grid = $("#grid").kendoGrid({
    dataSource: {
        type: "odata",
        transport: {
            read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
        },
        pageSize: 10,
        serverPaging: true,
        schema: {
            model: {
                id: "OrderID"
            }
        }
    },
    dataBound: dataBound,
    height: 250,
    pageable: true,
    columns: ["OrderID", "Freight", "ShipName", "ShipCity"]
}).data("kendoGrid");

function dataBound() {
    var ds = this.dataSource,
        start = ((ds.page() - 1) * ds.pageSize()) + 1,
        end = Math.min(ds.page() * ds.pageSize(), ds.total());


    this.pager.element.find(".k-status-text").remove().end().append('<div class="k-status-text"><div class="k-results-per-page">Results per page:<input id="selectPageSize" width="50" style="width: 50px;"/></div>'); // Displaying items ' + start + ' - ' + end + ' of ' + ds.total() + '</div>');
    var list = this.pager.element.find(".k-status-text").find("#selectPageSize");
    list = list.kendoDropDownList({
        dataTextField: "text",
        dataValueField: "value",
        dataSource: [
            {
            text: "10",
            value: "10"},
        {
            text: "20",
            value: "20"},
        {
            text: "50",
            value: "50"},
        {
            text: "100",
            value: "100"},
            ],
    }).data("kendoDropDownList");

    var pager2 = this.element.find("#pager2").detach();
    pager2.appendTo(this.element);
};