In the last session we utilized AJAX and called into our Web API to get a list of all the customers in the Chinook database.  We then took those results and bound them to a data grid so that an end user can visually see those results.

In this session we will enhance the grid by allowing the end user to change the paging size.  We are going to setup a second grid so that when one or more rows are selected from the top grid they will show up in the bottom grid.

• First thing, open up jQueryUILocal.htm.
• Go to the customers-local table
• After the </tbody> tag  at a <tfoot> tag (open and close)
• Inside the table footer we will then add pager span, page size drop down and some row view information.  It should look similar to this

<tfoot>
        <tr>
            <td>
                 <span id="pager"></span>
            </td>
            <td>
                <label for="pagesize">Pagesize</label>
                <select id="pagesize">
                    <option>10</option>
                    <option>20</option>
                    <option>30</option>
                </select>
            </td>
            <td>
                Viewing rows <span class="paging-from">0</span> to <span class="paging-to">0</span> of <span class="paging-total">0</span>
            </td>
        </tr>
    </tfoot>

Below the table (grid view) to show a separation we will add a break, line, break.  Then setup another table, for now we will make it identical (minus the paging information) and give it an id of ‘customers-selected

<table id="customers-selected">
        <caption>Selected Customer</caption>
        <thead>
            <tr>
                <th data-property="CustomerId">ID</th>
                <th data-property="FirstName">First Name</th>
                <th data-property="LastName">Last Name</th>
                <th data-property="Address">Address</th>
                <th data-property="City">City</th>
                <th data-property="PostalCode">PostalCode</th>
                <th data-property="State">State</th>
                <th data-property="Country">Country</th>
                <th data-property="Email">Email</th>
                <th data-property="Phone">Phone</th>
                <th data-property="Fax">Fax</th>
                <th data-property="Company">Company</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>

To wire up the paging options create a new function named PageSizeOptions.  In this function we will do two things.  First we will bind our customers collection to the pager source.  This will give us that left, right, and page number functionality that we wall love. Secondly we will add a change event to the page size drop down.  This will allow the end users to change the page size from 10, 20, or 30 rows.  When the page size changes we will also call a refresh so that the grid can adjust for the change.  It should look like this:

jQueryExample.PageSizeOptions = function() {
    $("#pager").pager({
        source: customers
    });

    $("#pagesize").change(function() {
        customers.option("paging.limit", +$(this).val()).refresh();
    });
};

Next we will create a new function named SelectedGridOptions.  This function will bind the selected rows from ‘customers-local’ to the selected object and sets the source of the customers-selected grid to the selected object.  This function should look like this:

jQueryExample.SelectedGridOptions = function() {
    // update status when selection changes
    $.observable(selected).bind("insert remove", function() {
        $(".selected-status").text(selected.length);
    });

    $("#customers-selected").grid({
        source: selected
    });

    $("#customers-local").grid({
        source: customers,
        heightStyle: "fill"
    }).gridFilter().gridSort();
};

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

Refresh http://localhost:60025/jQueryUILocal.htm, click and hold on customer 2 and drag to 7.  You should notice that as a new row is selected, the selected grid populates.  Do the opposite and you will see them disappear.

Adjust the page size and use the page buttons to verify they all work.