Metro Style Support in NetAdvantage for jQuery 2012 Vol.1

[Infragistics] Mihail Mateev / Saturday, April 7, 2012

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.

NwEntities nw = new NwEntities();

 

#region Customers

public JsonResult Customers()

{

  

    return Json(nw.Customers, JsonRequestBehavior.AllowGet);

}

#endregion //Customers

  

#region Orders

[OutputCache(VaryByParam = "userID", Duration = 120)]

public JsonResult Orders(string userID)

{

    return Json(nw.Orders.Where(p => p.CustomerID == userID), JsonRequestBehavior.AllowGet);

}

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

$.ig.loader({

      scriptPath: "../../Scripts/Infragistics/js/", //links to folders when using IIS to host different version

      cssPath: "../../Content/Infragistics/css/",

      resources: "igGrid.Selection.Paging.Sorting,igDataChart.Category,igPieChart"

  });

The whole JavaScript with igGrid and igDataChart is shown below.

<script type="text/javascript">

    $.ig.loader({

        scriptPath: "../../Scripts/Infragistics/js/", //links to folders when using IIS to host different version

        cssPath: "../../Content/Infragistics/css/",

        resources: "igGrid.Selection.Paging.Sorting,igDataChart.Category,igPieChart"

    });

    $.ig.loader(function () {

        $("#chart").igDataChart({

            width: "500px",

            height: "500px",

            dataSource: "Home/Orders",

            axes: [{ name: "xAxis", type: "categoryX", label: "OrderID", labelVisibility: "visible" },

                        { name: "yAxis", type: "numericY", labelVisibility: "visible"}],

            series: [

                    { name: "series",

                        title: "Order Freight Series",

                        type: "line",

                        xAxis: "xAxis",

                        yAxis: "yAxis",

                        valueMemberPath: "Freight", trendLineThickness: 6, thickness: 4,

                        trendLineBrush: "navy",

                        transitionDuration: 1500,

                        trendLineType: "exponentialAverage"

                    }],

            horizontalZoomable: true,

            verticalZoomable: true,

            windowResponse: "immediate",

            overviewPlusDetailPaneVisibility: "visible"

        });

        $('#grid').igGrid({

            virtualization: false, height: 500, width: 950,

            dataSource: "Home/Customers",

            autoGenerateColumns: false,

            columns: [

                    { headerText: "Customer ID", key: "CustomerID", width: "120px", dataType: "string" },

                    { headerText: "Country", key: "Country", width: "180px", dataType: "string" },

                    { headerText: "City", key: "City", dataType: "string" },

                    { headerText: "Contact Name", key: "ContactName", dataType: "string" },

                    { headerText: "Address", key: "Address", dataType: "string" },

                    { headerText: "Phone", key: "Phone", dataType: "string" }

                ],

            features: [

                {

                    name: 'Selection',

                    mode: 'row',

                    multipleSelection: false,

                    rowSelectionChanged: function (ui, args) {

                        $("#chart").igDataChart({

                            dataSource: "Home/Orders?userID=" + args.row.element[0].cells[0].textContent

                        });

                    }

                }

                ,

                {

                    name: 'Sorting',

                    type: "remote"

                },

                {

                    name: 'Paging',

                    type: "local",

                    pageSize: 10

                }],

                rendered: function (ui, args) {

                    //set up on-load selection 

                    $('#grid').igGridSelection("selectRow", 0);

                    //another way to get cell value independant of event parameters

                    var id = $('#grid').igGrid("getCellValue", 0, "CustomerID");

                    $("#chart").igDataChart({

                        dataSource: "Home/Orders?userID=" + id

                    });

                }

        });

  

    });

</script>

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

$.ig.loader({

    scriptPath: "../../Scripts/Infragistics/js/", //links to folders when using IIS to host different version

    cssPath: "../../Content/Infragistics/css/",

    resources: "igGrid.Selection.Paging.Sorting,igDataChart.Category,igPieChart",

    theme: "metro"

});

The whole JavaScript with igGrid and igDataChart is available below.

<script type="text/javascript">

    $.ig.loader({

        scriptPath: "../../Scripts/Infragistics/js/", //links to folders when using IIS to host different version

        cssPath: "../../Content/Infragistics/css/",

        resources: "igGrid.Selection.Paging.Sorting,igDataChart.Category,igPieChart",

        theme: "metro"

    });

  

    $.ig.loader(function () {

        $("#chart").igDataChart({

            width: "500px",

            height: "500px",

            dataSource: "/Home/Orders",

            axes: [{ name: "xAxis", type: "categoryX", label: "OrderID", labelVisibility: "visible" },

                        { name: "yAxis", type: "numericY", labelVisibility: "visible"}],

            series: [

                    { name: "series",

                        title: "Order Freight Series",

                        type: "line",

                        xAxis: "xAxis",

                        yAxis: "yAxis",

                        valueMemberPath: "Freight", trendLineThickness: 6, thickness: 4,

                        trendLineBrush: "cyan",

                        transitionDuration: 1500,

                        trendLineType: "exponentialAverage"

                    }],

            horizontalZoomable: true,

            verticalZoomable: true,

            windowResponse: "immediate",

            overviewPlusDetailPaneVisibility: "visible"

        });

        $('#grid').igGrid({

            virtualization: false, height: 500, width: 950,

            dataSource: "/Home/Customers",

            autoGenerateColumns: false,

            columns: [

                    { headerText: "Customer ID", key: "CustomerID", width: "120px", dataType: "string" },

                    { headerText: "Country", key: "Country", width: "180px", dataType: "string" },

                    { headerText: "City", key: "City", dataType: "string" },

                    { headerText: "Contact Name", key: "ContactName", dataType: "string" },

                    { headerText: "Address", key: "Address", dataType: "string" },

                    { headerText: "Phone", key: "Phone", dataType: "string" }

                ],

            features: [

                {

                    name: 'Selection',

                    mode: 'row',

                    multipleSelection: false,

                    rowSelectionChanged: function (ui, args) {

                        $("#chart").igDataChart({

                            dataSource: "/Home/Orders?userID=" + args.row.element[0].cells[0].textContent

                        });

                    }

                }

                ,

                {

                    name: 'Sorting',

                    type: "remote"

                },

                {

                    name: 'Paging',

                    type: "local",

                    pageSize: 10

                }],

            rendered: function (ui, args) {

                //set up on-load selection 

                $('#grid').igGridSelection("selectRow", 0);

                //another way to get cell value independant of event parameters

                var id = $('#grid').igGrid("getCellValue", 0, "CustomerID");

                $("#chart").igDataChart({

                    dataSource: "/Home/Orders?userID=" + id

                });

            }

        });

  

    });

</script>

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

@(Html.Infragistics().Loader()

                .ScriptPath(Url.Content("../../Scripts/Infragistics/js/"))

                .CssPath(Url.Content("../../Content/Infragistics/css/"))

            .Theme("metro")

            .Render()

    )

The whole code of the view with Razor is available below.

*@@using Infragistics.Web.Mvc;

  

@(Html.Infragistics().Loader()

                .ScriptPath(Url.Content("../../Scripts/Infragistics/js/"))

                .CssPath(Url.Content("../../Content/Infragistics/css/"))

            .Theme("metro")

            .Render()

    )

  

  

@{

    ViewBag.Title = "Metro Theme : igGrid-Customers MVC Wrapper";

}

  

<script type="text/javascript">

    $('#grid').live('iggridselectionactiverowchanged', function (event, args) {

        $("#chart").igDataChart({

            dataSource: "/Home/Orders?userID=" + args.row.element[0].cells[0].textContent

        });

    });

  

    $('#grid').live('iggridrendered', function (event, args) {

        $('#grid').igGridSelection("selectRow", 0);

        //another way to get cell value independant of event parameters

        var id = $('#grid').igGrid("getCellValue", 0, "CustomerID");

        $("#chart").igDataChart({

            dataSource: "/Home/Orders?userID=" + id

        });

    });

</script>

  

  

<h2>@ViewBag.Message</h2>

@*<p>

    To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">http://asp.net/mvc</a>.

</p>*@

<br />

  

  

    <div style="display: block; height: 550px; width: 1480px;">

    <div style="float: left; width: 950px; height: 500px; margin-right: 5px;">

        @(Html.Infragistics().Grid<MvcEfIgGridApp.Customer>()

                                    .DataSourceUrl("/Home/Customers").ResponseDataKey("")

            .ID("grid").Width("900px").Height("500px")

            .LoadOnDemand(false)

            .AutoGenerateColumns(false)

                            .Columns(column =>

                            {

                                column.For(x => x.CustomerID).HeaderText("Customer ID").Width("100px").DataType("string");

                                column.For(x => x.Country).HeaderText("Country").Width("170px").DataType("string");

                                column.For(x => x.City).HeaderText("City").Width("170px").DataType("string");

                                column.For(x => x.ContactName).HeaderText("Contact Name").DataType("string").Width("150px");

                                column.For(x => x.Address).HeaderText("Address").DataType("string").Width("150px");

                                column.For(x => x.Phone).HeaderText("Phone").DataType("string").Width("150px");

                            })

                            .Features(features =>

                            {

                                features.Paging().Type(OpType.Local).VisiblePageCount(5).ShowPageSizeDropDown(true).PageSize(10).PrevPageLabelText("Previous").NextPageLabelText("Next");

                                features.Sorting().Mode(SortingMode.Single).ColumnSettings(settings =>

                                {

                                    settings.ColumnSetting().ColumnKey("CustomerID").AllowSorting(true);

  

                                });

                                features.Selection().MouseDragSelect(true).MultipleSelection(false).Mode(SelectionMode.Row);

                            })

            .Width("950")

            .DataBind()

            .Render()

            )

    </div>

    <div style="float: right; height: 500px; width: 500px;">

        @(  Html.Infragistics().DataChart<MvcEfIgGridApp.Order>().DataSourceUrl("/Home/Orders").ResponseDataKey("")

           .ID("chart")

           .Width("500px")

           .Height("500px")

           .VerticalZoomable(true)

           .HorizontalZoomable(true)

           .Axes(axes =>

            {

                axes.CategoryX("xAxis").Label(item => item.OrderID).LabelVisibility(Visibility.Visible);

                axes.NumericY("yAxis");

            })

           .Series(series =>

            {

                series

                    .Line("series").Title("Order Freight Series")

                    .XAxis("xAxis").YAxis("yAxis")

                    .ValueMemberPath(item => item.Freight).ValueMemberPath("Freight").TrendLineThickness(6).TrendLineBrush("blue")

                    .TrendLineType(TrendLineType.ExponentialAverage).TransitionDuration(1500)

                    .Thickness(4);

            })

           .DataBind()

           .Render()

    )

  

    </div>

</div>

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.

<link href="@Url.Content("~/Content/Infragistics/css/themes/metro/infragistics.theme.css")" rel="stylesheet" type="text/css" />

<link href="@Url.Content("~/Content/Infragistics/css/structure/infragistics.css")" rel="stylesheet" type="text/css" />

  

<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>

<script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")" type="text/javascript"></script>

<script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>

<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({…}).

<!DOCTYPE html>

@{

    ViewBag.Title = "Home Page";

}

  

<html>

<head>

<meta charset="utf-8" />

 <title>@ViewBag.Title</title>

  

<link href="@Url.Content("~/Content/Infragistics/css/themes/metro/infragistics.theme.css")" rel="stylesheet" type="text/css" />

<link href="@Url.Content("~/Content/Infragistics/css/structure/infragistics.css")" rel="stylesheet" type="text/css" />

  

<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
  

<script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")" type="text/javascript">

</script>

<script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript">

</script>

<script src="@Url.Content("~/Scripts/Infragistics/js/infragistics.js")" type="text/javascript">

</script>

  

</head>

  

  

<script type="text/javascript">

  

    $(window).load(function () {

        $("#chart").igDataChart({

            width: "500px",

            height: "500px",

            dataSource: "/Home/Orders",

            axes: [{ name: "xAxis", type: "categoryX", label: "OrderID", labelVisibility: "visible" },

                        { name: "yAxis", type: "numericY", labelVisibility: "visible"}],

            series: [

                    { name: "series",

                        title: "Order Freight Series",

                        type: "line",

                        xAxis: "xAxis",

                        yAxis: "yAxis",

                        valueMemberPath: "Freight", trendLineThickness: 6, thickness: 4,

                        trendLineBrush: "green",

                        transitionDuration: 1500,

                        trendLineType: "exponentialAverage"

                    }],

            horizontalZoomable: true,

            verticalZoomable: true,

            windowResponse: "immediate",

            overviewPlusDetailPaneVisibility: "visible"

        });

        $('#grid').igGrid({

            virtualization: false, height: 500, width: 950,

            dataSource: "/Home/Customers",

            autoGenerateColumns: false,

            columns: [

                    { headerText: "Customer ID", key: "CustomerID", width: "120px", dataType: "string" },

                    { headerText: "Country", key: "Country", width: "180px", dataType: "string" },

                    { headerText: "City", key: "City", dataType: "string" },

                    { headerText: "Contact Name", key: "ContactName", dataType: "string" },

                    { headerText: "Address", key: "Address", dataType: "string" },

                    { headerText: "Phone", key: "Phone", dataType: "string" }

                ],

            features: [

                {

                    name: 'Selection',

                    mode: 'row',

                    multipleSelection: false,

                    rowSelectionChanged: function (ui, args) {

                        $("#chart").igDataChart({

                            dataSource: "/Home/Orders?userID=" + args.row.element[0].cells[0].textContent

                        });

                    }

                }

                ,

                {

                    name: 'Sorting',

                    type: "remote"

                },

                {

                    name: 'Paging',

                    type: "local",

                    pageSize: 10

                }],

            rendered: function (ui, args) {

                //set up on-load selection 

                $('#grid').igGridSelection("selectRow", 0);

                //another way to get cell value independant of event parameters

                var id = $('#grid').igGrid("getCellValue", 0, "CustomerID");

                $("#chart").igDataChart({

                    dataSource: "/Home/Orders?userID=" + id

                });

            }

        });

  

    });
</script>

  

<h2>@ViewBag.Message</h2>

  

<br />

<div style="display: block; height: 550px; width: 1480px;">

    <div style="float: left; width: 950px; height: 500px; margin-right: 5px;">

        <table id="grid">

        </table>

    </div>

    <div style="float: right; height: 500px; width: 500px;">

        <div id="chart" />

    </div>

</div>

  

</html>

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

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 https://ko.infragistics.com/ and twitter: @infragistics for more information about new Infragistics products.