Create a Paged Grid

You can easily add paging navigation to the wijgrid widget. This example demonstrates how you can create a pageable grid by setting the allowPaging, pageSize and pagerSettings options. See the grid > Paging sample of the MVC Control Explorer live demo at http://demo.componentone.com/ASPNET/MVCExplorer/grid/Paging for an example.

Complete the following steps:

A Create a new ASP.NET MVC 5 Wijmo Application (see Creating an MVC Tools Project).
A Navigate to the Solution Explorer, expand the Shared folder inside the Views folder, and double-click _Layout to open the file.
ACheck the dependencies to make sure the project is referencing the latest version of Wijmo. These should be placed within the <head> tags of the page. You can find the latest version of the Wijmo dependencies at http://wijmo.com/downloads/cdn/.

Add the following markup within the <body> tags of the page, just after @RenderBody():

<div class="main demo">
    <table id="demo"></table>
    <div class="demo-options">
        <div class="option-row">
            <label for="pagerPosition">
                Position</label>
            <select id="pagerPosition">
                <option>bottom</option>
                <option>top</option>
                <option selected="selected">topAndBottom</option>
            </select>
        </div>
        <div class="option-row">
            <label for="pagerMode">
                Mode</label>
            <select id="pagerMode">
                <option>nextPrevious</option>
                <option>nextPreviousFirstLast</option>
                <option>numeric</option>
                <option>numericFirstLast</option>
            </select></div>
        <div class="option-row">
            <label for="pageSize">
                Page size</label>
            <select id="pageSize">
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option selected="selected">5</option>
                <option>10</option>
                <option>25</option>
                <option>50</option>
                <option>100</option>
            </select>
        </div>
    </div>
</div>

This markup will add content for a table.

After the closing </div> tag you added in the previous step, enter the following jQuery script to initialize the wijgrid widgets:

<script id="scriptInit" type="text/javascript">
        $(document).ready(function () {
            $("#demo").wijgrid({
                allowPaging: true,
                pageSize: 5,
                pagerSettings: { position: "topAndBottom" },
                data: [
                    [27, 'Canada', 'Adams, Craig', 'RW', 'R', 32, 2009, 'Seria, Brunei'],
                    [43, 'Canada', 'Boucher, Philippe', 'D', 'R', 36, 2008, 'Saint-Apollinaire, Quebec'],
                    [24, 'Canada', 'Cooke, Matt', 'LW', 'L', 30, 2008, 'Belleville, Ontario'],
                    [87, 'Canada', 'Crosby, Sidney (C)', 'C', 'L', 21, 2005, 'Cole Harbour, Nova Scotia'],
                    [1, 'United States', 'Curry, John', 'G', 'L', 25, 2007, 'Shorewood, Minnesota'],
                    [9, 'Canada', 'Dupuis, Pascal', 'W', 'L', 30, 2008, 'Laval, Quebec'],
                    [7, 'United States', 'Eaton, Mark', 'D', 'L', 32, 2006, 'Wilmington, Delaware'],
                    [26, 'Ukraine', 'Fedotenko, Ruslan', 'LW', 'L', 30, 2008, 'Kiev, U.S.S.R.'],
                    [29, 'Canada', 'Fleury, Marc-Andre', 'G', 'L', 24, 2003, 'Sorel, Quebec'],
                    [32, 'Canada', 'Garon, Mathieu', 'G', 'R', 31, 2009, 'Chandler, Quebec'],
                    [2, 'United States', 'Gill, Hal', 'D', 'L', 34, 2008, 'Concord, Massachusetts'],
                    [28, 'Canada', 'Godard, Eric', 'RW', 'R', 29, 2008, 'Vernon, British Columbia'],
                    [3, 'United States', 'Goligoski, Alex', 'D', 'L', 23, 2004, 'Grand Rapids, Minnesota'],
                    [55, 'Russia', 'Gonchar, Sergei (A)', 'D', 'L', 35, 2005, 'Chelyabinsk, U.S.S.R.'],
                    [13, 'United States', 'Guerin, Bill', 'RW', 'R', 38, 2009, 'Worcester, Massachusetts'],
                    [42, 'Canada', 'Jeffrey, Dustin', 'C', 'L', 21, 2007, 'Sarnia, Ontario'],
                    [48, 'Canada', 'Kennedy, Tyler', 'C', 'R', 22, 2004, 'Sault Ste.Marie, Ontario'],
                    [14, 'Canada', 'Kunitz, Chris', 'LW', 'L', 29, 2009, 'Regina, Saskatchewan'],
                    [58, 'Canada', 'Letang, Kristopher', 'D', 'R', 22, 2005, 'Montreal, Quebec'],
                    [65, 'United States', 'Lovejoy, Ben', 'D', 'R', 25, 2008, 'Canaan, New Hampshire'],
                    [71, 'Russia', 'Malkin, Evgeni (A)', 'C', 'L', 22, 2004, 'Magnitogorsk, U.S.S.R.'],
                    [14, 'Canada', 'Minard, Chris', 'C', 'L', 27, 2007, 'Owen Sound, Ontario'],
                    [44, 'United States', 'Orpik, Brooks', 'D', 'L', 28, 2001, 'San Francisco, California'],
                    [81, 'Slovakia', 'Satan, Miroslav', 'RW', 'L', 34, 2008, 'Jacovce, Czechoslovakia'],
                    [4, 'United States', 'Scuderi, Rob', 'D', 'L', 30, 1998, 'Syosset, New York'],
                    [11, 'Canada', 'Staal, Jordan', 'C', 'L', 20, 2006, 'Thunder Bay, Ontario'],
                    [17, 'Czech Republic', 'Sykora, Petr', 'RW', 'L', 32, 2007, 'Plzen , Czechoslovakia'],
                    [22, 'United States', 'Taffe, Jeff', 'LW', 'L', 28, 2007, 'Hastings, Minnesota'],
                    [25, 'Canada', 'Talbot, Maxime', 'C', 'L', 25, 2002, 'LeMoyne, Quebec'],
                    [15, 'Canada', 'Zigomanis, Michael', 'C', 'R', 28, 2008, 'Toronto, Ontario']
                ],
                columns: [
                    { headerText: "Number" }, { headerText: "Nationality" }, { headerText: "Player" }, { headerText: "Position" },
                    { headerText: "Handedness" }, { headerText: "Age" }, { headerText: "Acquired" }, { headerText: "Birthplace" }
                ]
            });
            $("#pagerPosition").change(function (e) {
                var pagerSettings = $.extend({}, $("#demo").wijgrid("option", "pagerSettings"));
                pagerSettings.position = $(e.target).val();
                $("#demo").wijgrid("option", "pagerSettings", pagerSettings);
            });
            $("#pagerMode").bind("change", function (e) {
                var pagerSettings = $.extend({}, $("#demo").wijgrid("option", "pagerSettings"));
                pagerSettings.mode = $(e.target).val();
                $("#demo").wijgrid("option", "pagerSettings", pagerSettings);
            });
            $("#pageSize").bind("change", function (e) {
                $("#demo").wijgrid("option", "pageSize", parseInt($(e.target).val()));
            });
        });
    </script>

This will initialize the grid and set the pager settings.

What You've Accomplished

Press F5 to run the application; observe that the grid can be paged. Select different values from the Position, Mode, and Page size drop-down boxes to change the way that paging is displayed.