@model string

<div class="wj-control wj-content wj-pager">
    <div class="wj-input-group">
        <span class="wj-input-group-btn">
            <button class="wj-btn wj-btn-default demo-grid-firstpage" type="button">
                <span class="wj-glyph-left"></span>
                <span class="wj-glyph-left"></span>
            </button>
        </span>
        <span class="wj-input-group-btn">
            <button class="wj-btn wj-btn-default demo-grid-previouspage" type="button">
                <span class="wj-glyph-left"></span>
            </button>
        </span>
        <input type="text" class="wj-form-control demo-grid-currentpage" disabled="">
        <span class="wj-input-group-btn">
            <button class="wj-btn wj-btn-default demo-grid-nextpage" type="button">
                <span class="wj-glyph-right"></span>
            </button>
        </span>
        <span class="wj-input-group-btn">
            <button class="wj-btn wj-btn-default demo-grid-lastpage" type="button">
                <span class="wj-glyph-right"></span>
                <span class="wj-glyph-right"></span>
            </button>
        </span>
    </div>
</div>

<script>
    c1.mvc.Utils.documentReady(function () {
        var pagingGrid = wijmo.Control.getControl('#@(Model)'),
            cv,
            pagerButtons = Array.prototype.slice.call(document.querySelectorAll('.wj-pager button'));
        if (pagingGrid) {
            cv = pagingGrid.collectionView;
        }
        if (!cv) {
            throw "the collectionview is null";
        }

        // update pager when user clicks a button
        pagerButtons.forEach(function (el) {
            el.addEventListener('click', function () {
                var className = el.className;
                if (className.indexOf("firstpage") > -1) {
                    cv.moveToFirstPage();
                } else if (className.indexOf("lastpage") > -1) {
                    cv.moveToLastPage();
                } else if (className.indexOf("previouspage") > -1) {
                    cv.moveToPreviousPage();
                } else if (className.indexOf("nextpage") > -1) {
                    cv.moveToNextPage();
                }
            });
        });

        cv.collectionChanged.addHandler(function () {
            updatePager();
        });

        updatePager();

        // disable/enable buttons and update display text for pager
        function updatePager() {

            // get buttons by id
            var display = document.querySelector(".wj-pager .demo-grid-currentpage"),
                next = document.querySelector(".wj-pager .demo-grid-nextpage"),
                previous = document.querySelector(".wj-pager .demo-grid-previouspage"),
                first = document.querySelector(".wj-pager .demo-grid-firstpage"),
                last = document.querySelector(".wj-pager .demo-grid-lastpage"),
                enableBackwards,
                enableForwards;

            // update the pager text
            display.value = (cv.pageIndex + 1) + ' / ' + (cv.pageCount);

            // determine which pager buttons to enable/disable
            enableBackwards = cv.pageIndex <= 0;
            enableForwards = cv.pageIndex >= cv.pageCount - 1;

            // enable/disable pager buttons
            previous.disabled = enableBackwards;
            first.disabled = enableBackwards;
            next.disabled = enableForwards;
            last.disabled = enableForwards;
        }
    });
</script>