stackoverflow demo: grid server-side paging total

by lhoeppner

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.silver.min.css">
<script src="http://cdn.kendostatic.com/2013.3.1119/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.common.min.css">
<div id="example" class="k-content">
    <div class="configuration" style="z-index:10000"> <span class="configHead">API Functions</span>

        <ul class="options">
            <li>The pane index:
                <input id="index" type="text" value="0" class="k-textbox" style="margin-top: -5px;" />
            </li>
            <li>Functions:</li>
            <li>
                <button id="toggle" class="k-button">Expand/Collapse</button>
            </li>
            <li>
                <input id="size" type="text" value="100px" class="k-textbox" />
                <button id="setSize" class="k-button">Set size</button>
            </li>
            <li>
                <input id="min" type="text" value="50px" class="k-textbox" />
                <button id="setMinSize" class="k-button">Set minimum size</button>
            </li>
            <li>
                <input id="max" type="text" value="150px" class="k-textbox" />
                <button id="setMaxSize" class="k-button">Set maximum size</button>
            </li>
            <li>
                <button id="appendPane" class="k-button">Append a pane</button>
            </li>
            <li>
                <button id="removePane" class="k-button">Remove pane</button>
            </li>
            <li>
                <button id="insertBefore" class="k-button">Insert before index</button>
            </li>
            <li>
                <button id="insertAfter" class="k-button">Insert after index</button>
            </li>
        </ul>
    </div>
    <div id="splitter" style="height: 300px; width: 72%;">
        <div id="top_pane">
            <p>Left pane</p>
        </div>
        <div id="ajax_pane">middle</div>
    ...

JavaScript

var panes = $("#splitter").children(),
    getPane = function (index) {
        panes = $("#splitter").children(".k-pane");
        index = Number(index);

        if (!isNaN(index) && index < panes.length) {
            return panes[index];
        }
    },
    setSize = function (e) {
        if (e.type != "keypress" || kendo.keys.ENTER == e.keyCode) {
            var pane = getPane($("#index").val());

            if (!pane) return;

            splitter.size(pane, $("#size").val());
        }
    },
    setMinSize = function (e) {
        if (e.type != "keypress" || kendo.keys.ENTER == e.keyCode) {
            var pane = getPane($("#index").val());

            if (!pane) return;

            splitter.min(pane, $("#min").val());
        }
    },
    setMaxSize = function (e) {
        if (e.type != "keypress" || kendo.keys.ENTER == e.keyCode) {
            var pane = getPane($("#index").val());

            if (!pane) return;

            splitter.max(pane, $("#max").val());
        }
    },
    appendPane = function (e) {
        splitter.append().html("appended pane");
    },
    removePane = function (e) {
        splitter.remove(splitter.element.children(".k-pane").eq($("#index").val()));
    },
    insertBefore = function (e) {
        splitter.insertBefore({}, splitter.element.children(".k-pane").eq($("#index").val())).html("inserted before");
    },
    insertAfter = function (e) {
        splitter.insertAfter({}, splitter.element.children(".k-pane").eq($("#index").val())).html("inserted after");
    };

$("#toggle").click(function (e) {
    var pane = getPane($("#index").val());
    if (!pane) return;

    splitter.toggle(pane, $(pane).width() <=...