jQuery and MVC–Part 4, now with Wijmo!
In part three of this series I talked about how to extend jQuery with plugins, went through the steps of writing a plugin, and then demonstrated how to use it in a standard HTML page. I showed you a popular Table Sorter plugin and showed how to initialize it with different options. In this last article I will show you one more plugin, the Wijmo Grid, and how easy it easy to implement it's different options and features. I will also show you some of the cool things that Wijmo can do to help spruce up your web forms and pages.
Going back to the Student Course Admin form I've been using for these articles, I am generating a table of student data in an ASP.NET MVC app.
One thing I did add since the last article was the ability to filter the students by their first or last name.
This was done by adding some JavaScript and an Ajax call which gets a new set of data from the server, then replaces the original table with the new table.
1: function getStudentsByName(elem) {
2: $("img.ajaxLoaderFName").fadeOut(500);
3: $("img.ajaxLoaderLName").fadeOut(500);
4: var $elem = $(elem);
5: var url = "";
6: var ajaxLoader;
7: if ($elem.attr("id") == "txtFilterFName") {
8: url = "/Home/GetStudentsByFirstName/" $elem.val();
9: ajaxLoader = $("img.ajaxLoaderFName");
10: }
11: if ($elem.attr("id") == "txtFilterLName") {
12: url = "/Home/GetStudentsByLastName/" $elem.val();
13: ajaxLoader = $("img.ajaxLoaderLName");
14: }
15:
16: ajaxLoader.fadeIn(500);
17: $.ajax({
18: url: url,
19: type: "GET",
20: success: function (result) {
21: var holder = $("table.studentTable").parent("div.row");
22: $("table.studentTable").remove();
23: holder.html(result);
24: ajaxLoader.fadeOut(500);
25: $("div.chkGraphic").graphicCheckBox();
26: }
27: });
28: }
Pretty standard stuff by now, but it can be made a whole lot better by using Wijmo. Let's see how to do that.
Wijmo
Wijmo is a new product, complete kit of over 30 jQuery UI Widgets. It is a mixture of jQuery, CSS3, SVG, and HTML5. You can download it at www.wijmo.com.
The Wijmo grid has 20 different options that you can mix and match to make your grid look and behave how you would like. Detailed information about these options can be found at http://wijmo.com/wiki/index.php/Grid#ui.wijgrid_Options. For this demo, I am going to setup the grid with the following options: allowSorting, allowColumnSizing, allowPaging, and setting the page size to 10 rows.
As I mentioned before, when adding the references to your JavaScript files, the order of each reference is very important. After you download Wijmo, there will be several JavaScript files which will need to be included in your page.
1: <script type="text/javascript"
2: src="[Path]/Wijmo-Open/development-bundle/external/
3: jquery-1.4.3.min.js">
4:
5: <script type="text/javascript"
6: src="[Path]/Wijmo-Open/development-bundle/external/
7: jquery-ui-1.8.6.custom.min.js">
8:
9: <script type="text/javascript"
10: src="[Path]/Wijmo-Open/development-bundle/external/
11: jquery.bgiframe-2.1.3-pre.js">
12:
13: <script type="text/javascript"
14: src="[Path]/Wijmo-Open/development-bundle/external/
15: jquery.glob.min.js">
16:
17: <script type="text/javascript"
18: src="[Path]/Wijmo-Complete/development-bundle/external/
19: jquery.mousewheel.min.js">
20:
21: <script type="text/javascript"
22: src="[Path]/Wijmo-Complete/development-bundle/external/
23: jquery.tmpl.min.js">
24:
25: <script type="text/javascript"
26: src="[PathToJavaScript]/Wijmo-Complete/development-bundle/external/
27: raphael.js">
28:
29: <script type="text/javascript"
30: src="[PathToJavaScript]/Wijmo-Open/js/
31: jquery.wijmo-open.1.0.0.min.js">
32:
33: <script type="text/javascript"
34: src="[PathToJavaScript]/Wijmo-Complete/js/
35: jquery.wijmo-complete.1.0.0.min.js">
You will also need to reference the Wijmo style sheets as well.
1: <link href="[Path]/Wijmo-Complete/development-bundle/themes/
2: ui-lightness/jquery-ui-1.8.4.custom.css" rel="stylesheet"
3: type="text/css" />
4:
5: <link href="[Path]/Wijmo-Open/css/jquery.wijmo-open.1.0.0.css"
6: rel="stylesheet" type="text/css" />
7:
8: <link href="[Path]/Wijmo-Complete/css/jquery.wijmo-complete.1.0.0.css"
9: rel="stylesheet" type="text/css" />
Initializing the Wijmo grid is done the same way you do other things in jQuery, by getting an element in the page, in this case the table with an ID of "studentTable", then adding the jQuery plugin to the element.
1: $("#studentTable").parent().wijgrid({
2: allowSorting: true,
3: allowColSizing: true,
4: allowPaging: true,
5: pageSize: 10
6: });
Here is the result.
As you can see the graphical check buttons I talked about in the last article are still there, and the grid has a nifty pager at the bottom.
The allowSorting option adds sorting capability on each column as seen here.
While the "allowColSizing" lets you adjust the widths of each column to better view your data.
Another great option with the Wijmo grid is to allow editing to your data. In the jQuery to initialize the Wijmo grid, add another option, allowEditing:true.
1: $("#studentTable").wijgrid({
2: allowSorting: true,
3: allowColSizing: true,
4: allowPaging: true,
5: pageSize: 10,
6: allowEditing: true
7: });
When the grid is rendered, each table cell will now become editable. All you have to do is click in the cell and start making any changes you need. The Wijmo Grid exposes events so you can handle the changed data however you prefer to.
There are 15 events total in the Wijmo Grid, and details on each of them are at http://wijmo.com/wiki/index.php/Grid#ui.wijgrid_Events. The Wijmo grid is very feature rich and I would highly recommend you play around with it.
Other Wijmo goodies
No more do you have to deal with boring old form elements on your page. Wijmo has decorators for Radio Buttons, Checkboxes, Drop Downs and Text fields. Adding these decorators is as easy as adding an additional jQuery call to your selected element.
So, by adding the following to my text fields which filter by student name.
1: $("input#txtFilterFName").focus(function () {
2: $("input#txtFilterLName").val(""); }).keyup(function () {
3: getStudentsByName(this); }).wijtextboxdecorator();
4:
5: $("#chkPaging").wijcheckboxdecorator();
6: $("#txtPageSize").wijtextboxdecorator();
7: $("input[type=radio]").wijradiobuttondecorator();
I get these spiffy looking text fields and form elements.
One thing you may have noticed is that the grid and the form elements all have the same theme. This is because of the jQuery UI theming that is built into Wijmo. If you don't like how the elements look you can create your own themes with the jQuery UI Theme Roller at http://jqueryui.com/themeroller/. When you get your theme just how you want it to, all it takes is a download, and referencing your theme's particular style sheet in your page.
1: <link href="[Path]/Content/ui-lightness/jquery-ui-1.8.4.custom.css"
2: rel="stylesheet" type="text/css" />
In this article we talked more about jQuery plugins, the Wijmo gallery of widgets and how they can be used to create dynamic and very professional looking web applications. I hope you have enjoyed this series and have learned a few tricks. And as always, I would love to read your comments on my blog.
Happy Programming,
James
MESCIUS inc.