Chlodny series Day 8: Display Web API GET in Grid View

Posted on April 9, 2012 by chadit

For this session we are going to setup the JavaScript and HTML files to send a GET request to Web API and get a list of all the customers in the Chinook database, then we will display those in a grid.

First lets open up the jQueryUILocal.htm file

Between the body tags we want to add the following

<body>
<h2>jQuery UI Grid</h2>
<table id="customers-local">
    <caption>Customers Grid</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">Postal Code</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>

    <script type="text/javascript">
        $(document).ready(function () {
            jQueryExample.jQueryWireUp();
        })
    </script>

</body>

In these examples we are hard coding the column names.  For the jQuery UI Data grid it currently uses the tag <thread> to represent the column names.  We utilize the data-property attribute to bind our json data field to the corresponding column name.  For the value we can change the name to display something that is better for user experience.  An example could be that instead of displaying CustomerId we can change it to be just ID.

Right before the closing body tab we are going to add some JavaScript that will call our soon to be created wire up function as soon as the document is ready. 

Open up jQueryUIExampleLocal.js

We are going to create a few global objects to hold some data.  At the top of the JavaScript file add the following:

var jQueryExample = {}; // holds our functions
var localCustomers;     // used for the ajax calls and part of the dataview
var customers;          // used for the data view
var selected = [];      // used to hold which rows were selected.
var grid;               // the datagrid

Create a new function for our jQueryExample object named GetAllCustomers .  It will look like this:

jQueryExample.GetAllCustomer = function() {
    $.ajax({
        dataType: "json",
        url: "http://localhost:60025/api/customer",
        async: false,
        success: function (result) {
            localCustomers = result;
        }
    });
};

This function will use the jQuery ajax function to call our local Web API controller and return json. Adjust the port number to match what yours is.  If this function executes successfully we take those results and save them to our global variable localCustomers.

Create another function that establishes our DataView object that will be utilized by the UI, name it LoadDataView.  In the data view we are setting a default paging to 10.  This can be changed at anytime which we will see in a later session.

jQueryExample.LoadDataView = function() {
    customers = $.ui.dataviewlocal({
        input: localCustomers,
        paging: {
            limit: 10
        }
    });
};

Now we need a function that will allow us to manipulate the data grid.  Create another function called LoadDataGrid.  The function should look like this:

jQueryExample.LoadDataGrid = function() {
    grid = $("#customers-local").grid({
        source: customers.result,
        refresh: function() {
            var paging = customers.options.paging,
                total = customers.totalCount;
            $(".paging-from").text(paging.offset + 1);
            var to = paging.offset + paging.limit + 1;
            if (to > total) {
                to = total;
            }
            $(".paging-to").text(to);
            $(".paging-total").text(total);
        }
    });

    grid.gridSelectable({
        selected: selected
    });
};

This function will select the grid ‘customes-local’ and save it to our grid global variable.  In this function we are settings the source to the dataviewlocal customers.  Setting up paging based off our default paging.

Finally we need to create the wire up function mentioned in the HTML section.  Create a new function called jQueryWireUp.   We will then call each of the functions that were just created above.  It should look like this:

jQueryExample.jQueryWireUp = function () {
    jQueryExample.GetAllCustomer();
    jQueryExample.LoadDataView();
    jQueryExample.LoadDataGrid();
   
    customers.refresh();
};

At the end we call customers.refresh();.  This is a base function that jQuery UI has added to the dataviewlocal object.  It tells the collection/grid to refresh and redisplay the data in the collection.

 

Run the application and navigate to http://localhost:60025/jQueryUILocal.htm (adjust port number as needed).  You should get a page that looks similar to the following:

CropperCapture[71]

Advertisement
This entry was posted in MVC, Web and tagged , , , . Bookmark the permalink.