NetAdvantage for jQuery Vol. 12.1 includes many new exciting components and many feature enhancements to existing controls. This release also includes new Metro theming for all Infragistics jQuery components. This theme could be applied to jQuery UI widgets. The Metro theme has been added to allow better integration of NetAdvantage for jQuery controls into the new Metro UI for upcoming versions of Microsoft® Windows®. This article is how to apply Metro theme to jQuery controls using different approaches.
In this release JavaScript and CSS resources in the NetAdvantage for jQuery library have been organized in a new folder structure and some of them have been renamed so that it is easier for developers using the library to figure out the purpose and location of each item. The new structure allows much faster script and resource loading by allowing applications to load only essentially required resources. Combined and minified version of resources is still available.
NetAdvantage for jQuery utilizes the jQuery UI CSS Framework for styling and theming purposes. Infragistics and metro are jQuery UI themes provided by Infragistics for use in your application.
NetAdvantage for jQuery contains a set of combined and minified themes for use in a production environment. These minified versions reduce the readability of the CSS but in production allow for faster download of resources across the network.
CSS files are reorganized in the structure described below:
- The themes folder content is moved to css folder.
Each theme’s css ends with theme.css extension.
- The base directory is css and can be found under {IG Resources root}.
It contains a structure and a themes folder.
How to Apply Themes
NetAdvantage for jQuery 2012 Vol.1 offers to apply themes to jQuery controls using different approaches.
It is possible to use the new igLoader (CSS/JS resources loader) or to include the Infragistics theme file in the code (like in the previous versions of NetAdvantage for jQuery).
To demonstrate the applicability of Metro theme is used ASP.Net MVC3 application that uses data from the Northwind database from SQL Server. Entity Framework 4 is used to create business objects. Entity Framework objects are serialized into JSON Using ASP.Net MVC.
Application shows customers and their orders using Infragistics jQuery Grid and Chart (igGrid displays customers and igDataChart shows orders for the selected customer).
Entity Framework objects, generated from database Northwind
Add in the project Infragistics scripts(under Scripts folder) and styles (under Content folder):
The themes folder content is moved to .css folder.
The base directory is css and can be found under Infragistics folder{IG Resources root}.
Implement JASON serialization in the controller.
1: NwEntities nw = new NwEntities();
2:
3: #region Customers
4: public JsonResult Customers()
5: {
6:
7: return Json(nw.Customers, JsonRequestBehavior.AllowGet);
8: }
9: #endregion //Customers
10:
11: #region Orders
12: [OutputCache(VaryByParam = "userID", Duration = 120)]
13: public JsonResult Orders(string userID)
14: {
15: return Json(nw.Orders.Where(p => p.CustomerID == userID), JsonRequestBehavior.AllowGet);
16: }
17: #endregion //Orders
Applying the default Infragistics theme using igLoader control (JavaScript)
Add in the JavaScript in your view igLoader control with links to folders with Infragistics scripts and styles. When you are using the default Infragistics theme there is no need to add explicit theme name in the code.
1: $.ig.loader({
2: scriptPath: "../../Scripts/Infragistics/js/", //links to folders when using IIS to host different version
3: cssPath: "../../Content/Infragistics/css/",
4: resources: "igGrid.Selection.Paging.Sorting,igDataChart.Category,igPieChart"
5: });
The whole JavaScript with igGrid and igDataChart is shown below.
The specified view shows Infragistics jQuery Grid and Chart with a default Infragistics theme.
Applying Metro theme using igLoader control (JavaScript)
When you want to apply Metro theme you need to add the igLoader control in the same way like when you are using the default theme and just to add the theme name ( theme: “metro”).
1: $.ig.loader({
2: scriptPath: "../../Scripts/Infragistics/js/", //links to folders when using IIS to host different version
3: cssPath: "../../Content/Infragistics/css/",
4: resources: "igGrid.Selection.Paging.Sorting,igDataChart.Category,igPieChart",
5: theme: "metro"
6: });
The whole JavaScript with igGrid and igDataChart is available below.
The specified view shows Infragistics jQuery Grid and Chart with the Metro theme.
Applying Metro theme using igLoader control via MVC wrappers
Infragistics jQuery controls have ASP.Net MVC2, MVC3 and Web Forms wrappers. Infragistics Resource Loader control (igLoader) also has a wrapper (Html.Infragistics().Loader()). The code below shows how to use Infragistics Loader in ASP.Net MVC3 with Razor
1: @(Html.Infragistics().Loader()
2: .ScriptPath(Url.Content("../../Scripts/Infragistics/js/"))
3: .CssPath(Url.Content("../../Content/Infragistics/css/"))
4: .Theme("metro")
5: .Render()
6: )
The whole code of the view with Razor is available below.
1: *@@using Infragistics.Web.Mvc;
2:
3: @(Html.Infragistics().Loader()
4: .ScriptPath(Url.Content("../../Scripts/Infragistics/js/"))
5: .CssPath(Url.Content("../../Content/Infragistics/css/"))
6: .Theme("metro")
7: .Render()
8: )
9:
10:
11: @{
12: ViewBag.Title = "Metro Theme : igGrid-Customers MVC Wrapper";
13: }
14:
15:
31:
32:
33: @ViewBag.Message
34: @*
35: To learn more about ASP.NET MVC visit "http://asp.net/mvc" title="ASP.NET MVC Website">http://asp.net/mvc.
36: *@
37:
38:
39:
40: "display: block; height: 550px; width: 1480px;">
41: "float: left; width: 950px; height: 500px; margin-right: 5px;">
42: @(Html.Infragistics().Grid()
43: .DataSourceUrl("/Home/Customers").ResponseDataKey("")
44: .ID("grid").Width("900px").Height("500px")
45: .LoadOnDemand(false)
46: .AutoGenerateColumns(false)
47: .Columns(column =>
48: {
49: column.For(x => x.CustomerID).HeaderText("Customer ID").Width("100px").DataType("string");
50: column.For(x => x.Country).HeaderText("Country").Width("170px").DataType("string");
51: column.For(x => x.City).HeaderText("City").Width("170px").DataType("string");
52: column.For(x => x.ContactName).HeaderText("Contact Name").DataType("string").Width("150px");
53: column.For(x => x.Address).HeaderText("Address").DataType("string").Width("150px");
54: column.For(x => x.Phone).HeaderText("Phone").DataType("string").Width("150px");
55: })
56: .Features(features =>
57: {
58: features.Paging().Type(OpType.Local).VisiblePageCount(5).ShowPageSizeDropDown(true).PageSize(10).PrevPageLabelText("Previous").NextPageLabelText("Next");
59: features.Sorting().Mode(SortingMode.Single).ColumnSettings(settings =>
60: {
61: settings.ColumnSetting().ColumnKey("CustomerID").AllowSorting(true);
62:
63: });
64: features.Selection().MouseDragSelect(true).MultipleSelection(false).Mode(SelectionMode.Row);
65: })
66: .Width("950")
67: .DataBind()
68: .Render()
69: )
70:
71: "float: right; height: 500px; width: 500px;">
72: @( Html.Infragistics().DataChart().DataSourceUrl("/Home/Orders").ResponseDataKey("")
73: .ID("chart")
74: .Width("500px")
75: .Height("500px")
76: .VerticalZoomable(true)
77: .HorizontalZoomable(true)
78: .Axes(axes =>
79: {
80: axes.CategoryX("xAxis").Label(item => item.OrderID).LabelVisibility(Visibility.Visible);
81: axes.NumericY("yAxis");
82: })
83: .Series(series =>
84: {
85: series
86: .Line("series").Title("Order Freight Series")
87: .XAxis("xAxis").YAxis("yAxis")
88: .ValueMemberPath(item => item.Freight).ValueMemberPath("Freight").TrendLineThickness(6).TrendLineBrush("blue")
89: .TrendLineType(TrendLineType.ExponentialAverage).TransitionDuration(1500)
90: .Thickness(4);
91: })
92: .DataBind()
93: .Render()
94: )
95:
96:
97:
The controls in the view are styled with the Metro theme.
Applying Metro theme using code (adding references to files)
If you prefer to use the approach with referral of themes in HTML code you can use the code shown below.
1: "@Url.Content("~/Content/Infragistics/css/themes/metro/infragistics.theme.css")" rel="stylesheet" type="text/css" />
2: "@Url.Content("~/Content/Infragistics/css/structure/infragistics.css")" rel="stylesheet" type="text/css" />
3:
4:
5:
6:
7:
The whole JavaScript with igGrid and igDataChart is available below. In this case you need to use $(window).load(function () {…}) instead $.ig.loader({…}).
1: DOCTYPE html>
2: @{
3: ViewBag.Title = "Home Page";
4: }
5:
6: <html>
7: <head>
8: <meta charset="utf-8" />
9: <title>@ViewBag.Titletitle>
10:
11: <link href="@Url.Content("~/Content/Infragistics/css/themes/metro/infragistics.theme.css")" rel="stylesheet" type="text/css" />
12: <link href="@Url.Content("~/Content/Infragistics/css/structure/infragistics.css")" rel="stylesheet" type="text/css" />
13:
14: <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript">script> 1:
2:
2:
2:
2:
3:
4:
5:
6:
