Metro Style Support in NetAdvantage for jQuery 2012 Vol.1

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.

Metro Theme jQuery12.1

 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).

Metro Theme jQuery12.1

Entity Framework objects, generated from database Northwind

Add in the project Infragistics scripts(under Scripts folder) and styles (under Content folder):

Metro Theme jQuery12.1 Metro Theme jQuery12.1

 

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.

   1: <script type="text/javascript">
   2:     $.ig.loader({
   3:         scriptPath: "../../Scripts/Infragistics/js/", //links to folders when using IIS to host different version
   4:         cssPath: "../../Content/Infragistics/css/",
   5:         resources: "igGrid.Selection.Paging.Sorting,igDataChart.Category,igPieChart"
   6:     });
   7:     $.ig.loader(function () {
   8:         $("#chart").igDataChart({
   9:             width: "500px",
  10:             height: "500px",
  11:             dataSource: "Home/Orders",
  12:             axes: [{ name: "xAxis", type: "categoryX", label: "OrderID", labelVisibility: "visible" },
  13:                         { name: "yAxis", type: "numericY", labelVisibility: "visible"}],
  14:             series: [
  15:                     { name: "series",
  16:                         title: "Order Freight Series",
  17:                         type: "line",
  18:                         xAxis: "xAxis",
  19:                         yAxis: "yAxis",
  20:                         valueMemberPath: "Freight", trendLineThickness: 6, thickness: 4,
  21:                         trendLineBrush: "navy",
  22:                         transitionDuration: 1500,
  23:                         trendLineType: "exponentialAverage"
  24:                     }],
  25:             horizontalZoomable: true,
  26:             verticalZoomable: true,
  27:             windowResponse: "immediate",
  28:             overviewPlusDetailPaneVisibility: "visible"
  29:         });
  30:         $('#grid').igGrid({
  31:             virtualization: false, height: 500, width: 950,
  32:             dataSource: "Home/Customers",
  33:             autoGenerateColumns: false,
  34:             columns: [
  35:                     { headerText: "Customer ID", key: "CustomerID", width: "120px", dataType: "string" },
  36:                     { headerText: "Country", key: "Country", width: "180px", dataType: "string" },
  37:                     { headerText: "City", key: "City", dataType: "string" },
  38:                     { headerText: "Contact Name", key: "ContactName", dataType: "string" },
  39:                     { headerText: "Address", key: "Address", dataType: "string" },
  40:                     { headerText: "Phone", key: "Phone", dataType: "string" }
  41:                 ],
  42:             features: [
  43:                 {
  44:                     name: 'Selection',
  45:                     mode: 'row',
  46:                     multipleSelection: false,
  47:                     rowSelectionChanged: function (ui, args) {
  48:                         $("#chart").igDataChart({
  49:                             dataSource: "Home/Orders?userID=" + args.row.element[0].cells[0].textContent
  50:                         });
  51:                     }
  52:                 }
  53:                 ,
  54:                 {
  55:                     name: 'Sorting',
  56:                     type: "remote"
  57:                 },
  58:                 {
  59:                     name: 'Paging',
  60:                     type: "local",
  61:                     pageSize: 10
  62:                 }],
  63:                 rendered: function (ui, args) {
  64:                     //set up on-load selection 
  65:                     $('#grid').igGridSelection("selectRow", 0);
  66:                     //another way to get cell value independant of event parameters
  67:                     var id = $('#grid').igGrid("getCellValue", 0, "CustomerID");
  68:                     $("#chart").igDataChart({
  69:                         dataSource: "Home/Orders?userID=" + id
  70:                     });
  71:                 }
  72:         });
  73:  
  74:     });
  75: </script>

 

The specified view shows Infragistics jQuery Grid and Chart with a default Infragistics theme.

Metro Theme jQuery12.1

 

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.

   1: <script type="text/javascript">
   2:     $.ig.loader({
   3:         scriptPath: "../../Scripts/Infragistics/js/", //links to folders when using IIS to host different version
   4:         cssPath: "../../Content/Infragistics/css/",
   5:         resources: "igGrid.Selection.Paging.Sorting,igDataChart.Category,igPieChart",
   6:         theme: "metro"
   7:     });
   8:  
   9:     $.ig.loader(function () {
  10:         $("#chart").igDataChart({
  11:             width: "500px",
  12:             height: "500px",
  13:             dataSource: "/Home/Orders",
  14:             axes: [{ name: "xAxis", type: "categoryX", label: "OrderID", labelVisibility: "visible" },
  15:                         { name: "yAxis", type: "numericY", labelVisibility: "visible"}],
  16:             series: [
  17:                     { name: "series",
  18:                         title: "Order Freight Series",
  19:                         type: "line",
  20:                         xAxis: "xAxis",
  21:                         yAxis: "yAxis",
  22:                         valueMemberPath: "Freight", trendLineThickness: 6, thickness: 4,
  23:                         trendLineBrush: "cyan",
  24:                         transitionDuration: 1500,
  25:                         trendLineType: "exponentialAverage"
  26:                     }],
  27:             horizontalZoomable: true,
  28:             verticalZoomable: true,
  29:             windowResponse: "immediate",
  30:             overviewPlusDetailPaneVisibility: "visible"
  31:         });
  32:         $('#grid').igGrid({
  33:             virtualization: false, height: 500, width: 950,
  34:             dataSource: "/Home/Customers",
  35:             autoGenerateColumns: false,
  36:             columns: [
  37:                     { headerText: "Customer ID", key: "CustomerID", width: "120px", dataType: "string" },
  38:                     { headerText: "Country", key: "Country", width: "180px", dataType: "string" },
  39:                     { headerText: "City", key: "City", dataType: "string" },
  40:                     { headerText: "Contact Name", key: "ContactName", dataType: "string" },
  41:                     { headerText: "Address", key: "Address", dataType: "string" },
  42:                     { headerText: "Phone", key: "Phone", dataType: "string" }
  43:                 ],
  44:             features: [
  45:                 {
  46:                     name: 'Selection',
  47:                     mode: 'row',
  48:                     multipleSelection: false,
  49:                     rowSelectionChanged: function (ui, args) {
  50:                         $("#chart").igDataChart({
  51:                             dataSource: "/Home/Orders?userID=" + args.row.element[0].cells[0].textContent
  52:                         });
  53:                     }
  54:                 }
  55:                 ,
  56:                 {
  57:                     name: 'Sorting',
  58:                     type: "remote"
  59:                 },
  60:                 {
  61:                     name: 'Paging',
  62:                     type: "local",
  63:                     pageSize: 10
  64:                 }],
  65:             rendered: function (ui, args) {
  66:                 //set up on-load selection 
  67:                 $('#grid').igGridSelection("selectRow", 0);
  68:                 //another way to get cell value independant of event parameters
  69:                 var id = $('#grid').igGrid("getCellValue", 0, "CustomerID");
  70:                 $("#chart").igDataChart({
  71:                     dataSource: "/Home/Orders?userID=" + id
  72:                 });
  73:             }
  74:         });
  75:  
  76:     });
  77: </script>

 

The specified view shows Infragistics jQuery Grid and Chart with the Metro theme.

Metro Theme jQuery12.1

 

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: <script type="text/javascript">
  16:     $('#grid').live('iggridselectionactiverowchanged', function (event, args) {
  17:         $("#chart").igDataChart({
  18:             dataSource: "/Home/Orders?userID=" + args.row.element[0].cells[0].textContent
  19:         });
  20:     });
  21:  
  22:     $('#grid').live('iggridrendered', function (event, args) {
  23:         $('#grid').igGridSelection("selectRow", 0);
  24:         //another way to get cell value independant of event parameters
  25:         var id = $('#grid').igGrid("getCellValue", 0, "CustomerID");
  26:         $("#chart").igDataChart({
  27:             dataSource: "/Home/Orders?userID=" + id
  28:         });
  29:     });
  30: </script>
  31:  
  32:  
  33: <h2>@ViewBag.Message</h2>
  34: @*<p>
  35:     To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">http://asp.net/mvc</a>.
  36: </p>*@
  37: <br />
  38:  
  39:  
  40:     <div style="display: block; height: 550px; width: 1480px;">
  41:     <div style="float: left; width: 950px; height: 500px; margin-right: 5px;">
  42:         @(Html.Infragistics().Grid<MvcEfIgGridApp.Customer>()
  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:     </div>
  71:     <div style="float: right; height: 500px; width: 500px;">
  72:         @(  Html.Infragistics().DataChart<MvcEfIgGridApp.Order>().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:     </div>
  97: </div>

 

The controls in the view are styled with the Metro theme.

Metro Theme jQuery12.1 

 

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: <link href="@Url.Content("~/Content/Infragistics/css/themes/metro/infragistics.theme.css")" rel="stylesheet" type="text/css" />
   2: <link href="@Url.Content("~/Content/Infragistics/css/structure/infragistics.css")" rel="stylesheet" type="text/css" />
   3:  
   4: <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
   5: <script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")" type="text/javascript"></script>
   6: <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
   7: <script src="@Url.Content("~/Scripts/Infragistics/js/infragistics.js")" type="text/javascript"></script>

 

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.Title</title>
  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: <script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")" type="text/javascript">
   1: </script>
   2: <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript">
   1: </script>
   2: <script src="@Url.Content("~/Scripts/Infragistics/js/infragistics.js")" type="text/javascript">
   1: </script>
   2:  
   3: </head>
   4:  
   5:  
   6: <script type="text/javascript">
   7:  
   8:     $(window).load(function () {
   9:         $("#chart").igDataChart({
  10:             width: "500px",
  11:             height: "500px",
  12:             dataSource: "/Home/Orders",
  13:             axes: [{ name: "xAxis", type: "categoryX", label: "OrderID", labelVisibility: "visible" },
  14:                         { name: "yAxis", type: "numericY", labelVisibility: "visible"}],
  15:             series: [
  16:                     { name: "series",
  17:                         title: "Order Freight Series",
  18:                         type: "line",
  19:                         xAxis: "xAxis",
  20:                         yAxis: "yAxis",
  21:                         valueMemberPath: "Freight", trendLineThickness: 6, thickness: 4,
  22:                         trendLineBrush: "green",
  23:                         transitionDuration: 1500,
  24:                         trendLineType: "exponentialAverage"
  25:                     }],
  26:             horizontalZoomable: true,
  27:             verticalZoomable: true,
  28:             windowResponse: "immediate",
  29:             overviewPlusDetailPaneVisibility: "visible"
  30:         });
  31:         $('#grid').igGrid({
  32:             virtualization: false, height: 500, width: 950,
  33:             dataSource: "/Home/Customers",
  34:             autoGenerateColumns: false,
  35:             columns: [
  36:                     { headerText: "Customer ID", key: "CustomerID", width: "120px", dataType: "string" },
  37:                     { headerText: "Country", key: "Country", width: "180px", dataType: "string" },
  38:                     { headerText: "City", key: "City", dataType: "string" },
  39:                     { headerText: "Contact Name", key: "ContactName", dataType: "string" },
  40:                     { headerText: "Address", key: "Address", dataType: "string" },
  41:                     { headerText: "Phone", key: "Phone", dataType: "string" }
  42:                 ],
  43:             features: [
  44:                 {
  45:                     name: 'Selection',
  46:                     mode: 'row',
  47:                     multipleSelection: false,
  48:                     rowSelectionChanged: function (ui, args) {
  49:                         $("#chart").igDataChart({
  50:                             dataSource: "/Home/Orders?userID=" + args.row.element[0].cells[0].textContent
  51:                         });
  52:                     }
  53:                 }
  54:                 ,
  55:                 {
  56:                     name: 'Sorting',
  57:                     type: "remote"
  58:                 },
  59:                 {
  60:                     name: 'Paging',
  61:                     type: "local",
  62:                     pageSize: 10
  63:                 }],
  64:             rendered: function (ui, args) {
  65:                 //set up on-load selection 
  66:                 $('#grid').igGridSelection("selectRow", 0);
  67:                 //another way to get cell value independant of event parameters
  68:                 var id = $('#grid').igGrid("getCellValue", 0, "CustomerID");
  69:                 $("#chart").igDataChart({
  70:                     dataSource: "/Home/Orders?userID=" + id
  71:                 });
  72:             }
  73:         });
  74:  
  75:     });
</script>
  15:  
  16: <h2>@ViewBag.Message</h2>
  17:  
  18: <br />
  19: <div style="display: block; height: 550px; width: 1480px;">
  20:     <div style="float: left; width: 950px; height: 500px; margin-right: 5px;">
  21:         <table id="grid">
  22:         </table>
  23:     </div>
  24:     <div style="float: right; height: 500px; width: 500px;">
  25:         <div id="chart" />
  26:     </div>
  27: </div>
  28:  
  29: </html>

 

Metro theme is successfully applied to the controls in the view.

Metro Theme jQuery12.1 

Demo application will be available for download after NetAdvantage 2012 Vol.1 RTM release date.

You can try this product very soon. Follow news from Infragistics in http://infragistics.com/ and twitter: @infragistics for more information about new Infragistics products.


Comments  (5 )

Jose jackson
on Sun, Apr 8 2012 2:49 AM

this is great

ognyandim
on Tue, Apr 10 2012 5:17 PM

Looks really nice. I am keen on trying the MVC wrapper part.

wwx8688
on Sun, Apr 15 2012 12:45 AM

when release?

jrudolph
on Wed, May 2 2012 5:25 AM

There's a serious typo in the heading (NetAdvantafe). Besides that, is there an official release date yet?

[Infragistics] Mihail Mateev
on Thu, May 3 2012 3:55 AM

Thanks for notification about typo! You could expect the new release this week.

Add a Comment

Please Login or Register to add a comment.