Log in to like this post! What's New in NetAdvantage for jQuery 2012 Vol.1 [Infragistics] Mihail Mateev / Tuesday, April 3, 2012 If you are interested in jQuery probably you read the article "NetAdvantage for jQuery 2012 Volume 1: Sneak Peek" which reveals some details about the new release of NetAdvantage for jQuery. In this blog you will find detailed details about new features, that you will have in 12.1 release. This article is an overview of the new features, released in the NetAdvantage for jQuery Vol. 12.1 product. 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. Customers using Data Visualization applications can now enjoy the outstanding Motion Framework in Infragistics jQuery Chart and Map. The key features in this release are: 1. Data Visualization Controls for jQuery Charts- Infragistics jQuery Chart (igDataChart)- Infragistics jQuery Pie Chart (igPieChart) Infragistics jQuery Map (CTP) 2. New features in Infragistics jQuery Grid (the fastest jQuery Grid on the market) 3. New features in Infragistics jQuery Hierarchical Grid 4. Touch support 5. Metro theme Features in this Release New Controls: Infragistics jQuery Chart (CTP in 11.2) The Infragistics jQuery Chart ( igDataChart) and Infragistics jQuery Pie Chart (igPieChart) controls are new charting controls based on the successful NetAdvantage for Silverlight Data Visualization xamDataChart. In NetAdvantage for jQuery 2011 Vol.2 there was available most of the charting features as CTP. Some of the key html5 chart features are: Panning and Zooming Multiple series Trend lines Legend OPD (Overview Plus Detail) panel Now you could have all these features as RTM and many new features. Some of the key html5 chart features are: Financial indicators are among the most popular features in Infragistics jQuery Chart Radial series are one of the most exciting features in igDataChart You can enjoy the excellent features of igPieChart including Start Angle, Radius, Label Extent, Exploded Radius and Label Position In the new NetAdvantage for jQuery 2.1 release you find amazing features like: Bubble Series Scatter Line Series Composite Charts: charts with many Y-axes with different range and many different data series types. Crosshair Cursor Motion Framework Implementation In the new 12.1 release as a result of many consumer requests are was added Scatter Line Series Support of the multiple Y-axes with different range and many different data series types is important when you want to create composite charts. Crosshair cursor makes it easier determination of the position under the cursor on the chart The Motion Framework for charts allows developers using the NetAdvantage for jQuery chart controls to animate the contents of a chart to increase visual appeal and imply trends or other meaning behind the data. The basic principle behind the framework is that whenever data behind the chart is updated the corresponding API method of the igDataChart control is called to initiate chart animation. Infragistics jQuery Map (CTP) In the new jQuery 12.1 Release you could have the advantage to use the brand new Infragistics jQuery Map control, based on the Silverlight XamGeographicMap. This is a completely new high-performance component predicted to visualize a huge amount of spatial data. It is based on the fast Infragistics Data Chart engine and customers could use with this component the experience from data chart. This approach adds some new innovative features to the map: Render polylines / polyshapes (any standard ESRI SHP file) Custom shape templates Shape Fill, Shape Styles and Conditional Formatting of Shapes Geographic Shape Series Geographic Polyline Series Geographic Scatter Area Series Geographic Symbol Series Series Multiple Series Panning & Zooming Open Street Map Imagery Source Bing Maps Imagery Source CloudMade Maps Imagery Source There are several key features in XamGeographicMap: Map Progression - Display multiple shape series in the Geographic Map control to show progression of the values in the different places. Series Drilldown - Load and display different shape files based on zoom distance in Geographic Map control. Polyline Series – Display objects that could be visualized via polylines . The colors of objects could be styled using conditional style selector to show it in different way depending on specific value. Overview Pane – Use the map overview pane to navigate the maps in an intuitive and easy to use display Infragistics jQuery Map could use Bing Maps Imagery Source It is possible to use CloudMade Maps to render a geographic series with the map control. Spatial data is represented with a set of geographic series. It is possible to use shapefiles and triangulated files (.ITF). It is possible to create thematic maps with Geographic Shape Series You can bind pre-triangulated files (.ITF) to a map control with the help of the geographic scatter area series. It is possible to have hundreds of thousands of points showing precipitation measurements from thousands of weather stations . Here is a snippet how to use .ITF files with Razor: 1: @(Html.Infragistics().Map() 2: .ID("map") 3: .Width("100%") 4: .VerticalZoomable(true) 5: .HorizontalZoomable(true) 6: .OverviewPlusDetailPaneVisibility(Visibility.Visible) 7: .Series(series => 8: { 9: series.GeographicScatterArea("series1") 10: .ColorScale(cs => 11: cs.CustomPalette().InterpolationMode(InterpolationMode.InterpolateRGB).MinimumValue(0.15) 12: .Palette(new List<string>() { "limegreen", "yellow", "orange", "red" })) 13: .TriangulatedFileUri(Url.Content("~/SamplesCommon/jQuery/Map/Data/nws_precip_2011091820.itf")); 14: }) 15: .WindowResponse(WindowResponse.Immediate) 16: .WindowRect(0.31, 0.375, 0.025, 0.025) 17: .DataBind() 18: .Render() 19: ) Infragistics jQuery HTML Editor (CTP) The HTML Editor is a rich client-side text editor control, which allows you to perform text manipulation (bold, italic, underline), insert tables images and links, change fonts and font sizes, perform various indentations and header settings and many more. The HTML Editor allows for rich text editing on the web. You can insert images and hyperlinks as well as format text with bulleted lists, different fonts, font sizes and styles. With igHtmlEditor control you could add a custom toolbars and buttons where you can have own implementation (for example: add a signature to the message). jQuery Controls for the Mobile Web In NetAdvantage for jQuery 12.1 release, for the first time ever Infragistics offers controls that is geared towards mobile web development. Included in NetAdvantage for jQuery, these mobile controls that takes advantage of jQuery Mobile under the cover and ship a Mobile List View control and a Rating control. Both controls will look and run natively within the browser on mobile devices with full touch interactions, enhanced for mobile scrolling with inertia and support all modern mobile browsers. The controls can be used within pure client environment with jQuery and HTML. In this release are also included ASP.NET MVC wrappers for MVC developers wanting to bind controls directly to their models using razor helpers. Mobile Rating Control The new igRating control for mobile devices has been implemented to support mobile and touch applications when customer ratings of items are a requirement. This is a separate control from the existing igRating control and its target is mobile devices with touch capability. Mobile List View Control The new igListView™ control provides list display and interaction functionality for jQuery Mobile platform. The mobile list view control can be bound to all the data sources available to igDataSource as well as to UL or OL HTML elements. The control supports hierarchical navigation following the jQuery Mobile navigation concepts. Templates can be used to customize the display and layout of list elements. Sorting, filtering and grouping functionality are also available. The mobile list view control supports load on demand to improve performance at runtime. Templates can be used to override the visual layout and appearance of the ListView. It is possible to override the default grouping behavior of the ListView, using a JavaScript function to provide custom grouping logic. jQuery Dialog Window You could find also a jQuery dialog window control within the toolset. This control adds a bunch of additional feature that you normally see in the dialog window from jQuery UI. It has features like resizing, open and close buttons, maximize and minimize states. You will be able to use it as a modal or non-modal window and put any HTML content inside of it’s view area with drag and drop capabilities within the browser window. New jQuery themes & JavaScript resources structure All 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. Manual reference to combined JavaScript files In HTML: 1: <script src="../scripts/jquery-ui.min.js" type="text/javascript"></script> 2: <script src="../scripts/jquery.min.js" type="text/javascript"></script> 3: <script src="../scripts/modernizr.min.js" type="text/javascript"></script> 4: <script src="../scripts/infragistics.js" type="text/javascript"></script> In ASP.NET MVC: 1: <%@ Import Namespace="Infragistics.Web.Mvc" %> 2: <!DOCTYPE html> 3: <html> 4: <head runat="server"> 5: <script src="<%= Url.Content("~/scripts/jquery.min.js") %>" type="text/javascript"></script> 6: <script src="<%= Url.Content("~/scripts/jquery-ui.min.js") %>" type="text/javascript"></script> 7: <script src="<%= Url.Content("~/scripts/modernizr.min.js") %>" type="text/javascript"></script> 8: <script src="<%= Url.Content("~/scripts/infragistics.js") %>" type="text/javascript"> 9: </script> CSS/JS resources loader The new igLoader control has been added to allow easier JavaScript and CSS resources loading into web pages and in relation to the new resources structure. The control automates loading necessary resources and requires the application only to specify where the NetAdvantage for jQuery JavaScript and CSS files are located. For pure HTML/jQuery pages it is required to specify which controls and which features will be instantiated on the page, e.g. “igGrid.*” for all features of the flat grid, or “igDataChart.Category” for plotting category charts only. The MVC counterpart of the loader does not require applications to specify needed resources as it automatically detects which scripts and CSS files must be loaded. The igLoader control is the easiest and recommended way to upgrade from previous versions and prevents the need to specify multiple JS and CSS files in the head part of web pages. You could t initialize the Script Loader using the plain JavaScript implementation as well as with the MVC Wrappers. As shown in the accompanying code listings, you must provide the path to required CSS and JavaScript files and declare which resources the loader will fetch for the page. This sample loads the igGrid control with the Sorting feature. Note: If you initialize a control through MVC Wrappers, all dependent resources are loaded automatically. 1: <script type="text/javascript"> 2: $.ig.loader({ 3: scriptPath: "/samplesbrowser/samplescommon/jquery/common/js/", 4: cssPath: "/samplesbrowser/samplescommon/jquery/common/css/", 5: resources: "igGrid.Sorting" 6: }); 7: 8: $.ig.loader(function () { 9: $("#grid1").igGrid({ 10: autoGenerateColumns: false, 11: columns: [ 12: { headerText: "Product ID", key: "ProductID", dataType: "number" }, 13: { headerText: "Product Name", key: "Name", dataType: "string" }, 14: { headerText: "Product Number", key: "ProductNumber", dataType: "string" }, 15: 16: { headerText: "Standard Cost", key: "StandardCost", dataType: "number" } 17: ], 18: dataSource: adventureWorks, 19: height: "400px", 20: features: [ 21: { 22: name: "Sorting", 23: type: "local", 24: mode: "multiple" 25: } 26: ] 27: }); 28: }); 29: </script> 1: @section HeadContent { 2: <script src="@Url.Content("~/samplescommon/jquery/common/js/infragistics.loader.js")"></script> 3: @( Html.Infragistics() 4: .Loader() 5: .ScriptPath(Url.Content("~/samplescommon/jquery/common/js/")) 6: .CssPath(Url.Content("~/samplescommon/jquery/common/css/")) 7: .Render() 8: ) 9: } 10: 11: @section MainContent { 12: @(Html.Infragistics().Grid(Model).ID("grid1").Columns(column => 13: { 14: column.For(x => x.ProductID).HeaderText(this.GetGlobalResourceObject("Grid", "PRODUCT_ID").ToString()).Width("100px"); 15: column.For(x => x.Name).HeaderText(this.GetGlobalResourceObject("Grid", "PRODUCT_NAME").ToString()).Width("200px"); 16: column.For(x => x.ProductNumber).HeaderText(this.GetGlobalResourceObject("Grid", "PRODUCT_NUMBER").ToString()).Width("200px"); 17: column.For(x => x.StandardCost).HeaderText(this.GetGlobalResourceObject("Grid", "STANDARD_COST").ToString()).DataType("number").Width("130px"); 18: }).Features(features => 19: { 20: features.Sorting().Type(OpType.Local).Mode(SortingMode.Multiple); 21: }).Height("400").DataSourceUrl(Url.Action("PagingGetData")).DataBind().Render() 22: ) 23: } New jQuery Templating Engine The official jQuery templating engine is going to remain in beta forever. It is a great innovation to the client-side technology and adds a lot of flexibility to what you can do with data bound controls using JavaScript templates. This project which was initially a contribution from Microsoft to the jQuery library and was even credited as an official plug-in, is no longer going to be enhanced or RTMed, at least that is what it looks like at the moment. Infragistics team used the same concepts and developed a more robust templating engine that not only gets us away from being dependent on the jQuery templating plug-in, it also adds speed to the controls. You just need to reference our templating engine, no code changes necessary, and the data bound controls like grid, combobox and tree will render faster than it did before New Features in Existing Controls Checkbox Column for igGrid Boolean data columns can be rendered with checkboxes in flat and hierarchical grids. This provides more natural user experience for dealing with Boolean type data. On the picture below you can see a grid with a Boolean column with checkbox editors. Grid Net Transactions The grid editing functionality has been improved to report only net transactions from the grid control when data is updated, added or deleted. That means transactions which mutually cancel each other will not be reported and the client applications will get only the effective changes on the underlying data, e.g. if a row is added and then deleted neither insert, nor delete transaction will be reported. On the picture below you can see a grid with an updated and deleted row. Hierarchical Grid Virtualization The virtualization technology used for better performance when displaying large data sets has been improved to support hierarchical grids and GroupBy mode for hierarchical grids. Now there are two virtualization modes: fixed and continuous. Fixed mode is the existing virtualization embedded in NetAdvantage for jQuery controls. Continuous mode is new development that supports hierarchical grid and the group by feature to handle situations with variable child row count. Hierarchical Grid GroupBy The grouping functionality available for flat grids is now fully supported for hierarchical grids. It allows flexible grouping of rows based on one or more columns, calculation of summary values (subtotals) and configuring UI elements like expand/collapse button tooltips, group header row template and others. On the picture below you can see highlighted the main elements of the GroupBy feature: the grouping area at the top, and group header rows on root and child level. Infragistics jQuery Hierarchical Grid Selection The selection feature enables the selection of the rows and cells in the igHierarchicalGrid control. Its functionality closely follows the Microsoft® Windows Explorer and Microsoft Excel selection and activation behaviors. It is possible to configure only single or multiple item selection Hierarchical Grid Row Selectors The row selection feature provides the user with the functionality to select entire rows by clicking on the row selector column placed on the left side of the first grid column. This functionality is provided by the igRowSelectors widget. In addition, to this main functionality, the widget provides optional row numbering and checkboxes for row selection. This widget works closely with the Selection feature but can also be used separately for its row numbering capability. Touch Support All the Infragistics jQuery controls support touch interaction. New features and components have been added so that all the controls are touch interface compatible. The concept behind Infragistics jQuery controls is that they should look and behave the same way under Desktop and Touch platforms. Metro Theme The new Metro theme is a result of research efforts to give “native” Metro UI look and feel to NetAdvantage for jQuery controls for upcoming versions of Microsoft Windows. It aims not only the styling and colors but also behavior and touch friendly user interface. On the picture below you can see a flat grid with the Metro theme applied. iOS Theme for Mobile Controls The new iOS theme for the mobile NetAdvantage for jQuery controls has been implemented to target mobile devices. Its purpose is to provide more consistent look and better integration into iPhone and iPad mobile and touch capable applications. Support for MVC Validation MVC style validation with data annotations is incorporated into combo and editor controls. That feature allows seamless integration of NetAdvantage for jQuery validation capabilities with existing applications using data annotations. jQuery Combo Box Load on Demand This release are added load on demand capabilities to the combox box. You can load the combo box with nothing in it during initial load, speeding your initial load time. When the user clicks on the dropdown button, that is when the first call to server is made to get drop down items. In addition, you can now use scroll on demand, setting up the items you would like the combo to fetch from the server as the user continue to scroll the drop down. Conclusion 2012 Volume 1 of NetAdvantage for jQuery is going to be a feature rich, jQuery convention based and standards compliant set of jQuery web controls. 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.