Log in to like this post! Ignite UI: What’s New in 13.1 HTML5, jQuery & ASP.NET MVC Controls Jason Beres [Infragistics] / Monday, March 25, 2013 As we start rolling out the blogs today on the new features for 13.1., we hope you get as excited as we are about the new stuff we are shipping in 13.1. We are continuing to solidify and expand our story of delivering the only toolset on the market that lets you design & build enterprise-ready applications for every major platform and device. With Ignite UI, you can build high performance enterprise class HTML5 & jQuery based controls that can power desktop, tablet & mobile phone applications. If you asked me what the key messages are for the 13.1 release, I would say we focused in these areas: Touch Touch Touch & Mobile Mobile Mobile Everywhere– all controls are touch supported with touch friendly styles. In our jQuery mobile set of controls, we ship 6 adaptive jQuery Mobile themes and an all new responsive UI framework to deliver the most modern touch & tablet experiences. HTML / jQuery & ASP.NET MVC Pivot Grid– Infragistics now completes the trifecta in web based data grids – customers have a choice of a Flat, Hierarchical, or OLAP Pivot Grid to deliver high-performance, data intensive experiences in their browser based applications. Responsive Web Design & Controls Support– Grid & Chart are now enabled with a responsive web design capability that allows you to control in CSS how a control behaves when the screen is resized for different devices. Tile Manager UI– Based on our popular XAML Tile Manager UI, we’ve built a similar control for web based interactive layouts. Based on our new Layout Manager component, this popular desktop UI pattern comes to the Web with a container based grid layout that allows the end user to expand, collapse & rearrange their screen. Data Visualization- Ignite UI features market-leading Data Visualization controls for Business Charting, Financial Charting and Geospatial Mapping applications & dashboards. 13.1 provides even better parity across development platforms for Data Visualization using HTML5 & jQuery, iOS, WPF and Silverlight. Ignite UI now supports new Data Chart types and features, and introduces the following new controls: Doughnut Chart Funnel Chart Sparkline Radial Gauge KnockoutJS- Support for the popular KnockoutJS MVVM library key controls like Grid, Tree, Combo, Editors MVC Controls – Every control we ship includes a server-side MVC counterpart, so if you are an ASP.NET developer building MVC applications, you get all features. That’s the high level, so lets get into the details of what we are shipping in 13.1. New Control – Doughnut Chart The Doughnut Chart – just like the Pie Chart – is primarily used to show statistics expressed in percentages. Both consist of a circular area divided into sections, where each section has an arc length proportional to its underlying data value. Both are used for representing categorical data, are most effective when there are only a few categories, and when each category makes up a relatively large percentage of the data as a whole. The primary difference between the Pie Chart and the Doughnut Chart is that the latter has a “hollow” or “empty” center, and will typically display multiple series. A given data series is represented by a ring that is drawn around the “hole” and the data in any given ring totals 100%. These rings are displayed in a concentric pattern where each ring representing a data series, either independent from one another or linked via a hierarchy. The sections that make up each ring may differ in size or each section within a ring may be the same size. Key Features of the Doughnut Chart Multiple Ring Series & Data-Binding– The Doughnut Chart supports one or more rings surrounding a hollow or empty center. The center may either be a “blank circle” or may contain a label. Each ring can either represent a separate data series that you data-bind to a collection via the ItemSource property, or can be a ring within a parent-child hierarchy. Configurable Inner Radius– The inner radius of the Doughnut Chart center is configurable, allowing the developer to select the center as an object and extend the boundary or set the inner radius via a property setting. Slice / Section Labeling– The Doughnut Chart allows developers to control how each slice or section is labeled. Options are available to automatically select how the labels are displayed inside or outside of the chart, or using the BestFit method. Legend Support– The Doughnut Chart supports the automatic display of a legend which identifies each series displayed as a data ring, as well as each slice / section within a data ring. The legend can be configured and docked to any of the chart’s corners or borders. Slice Selection – Allow users to select slices and change the color of selected slices. Others” Category– The underlying data for any Doughnut Chart can often contains small value items, too numerous to display in a significant manner via separate slices. For such occasions, the “Others” category allows for automatic aggregation of several data values into a single slice. Developers can set the OthersCategoryThreshold property to separate which values get their own slice, and which values will get rolled under “Others”. Styling & Themes – The look & feel of the Doughnut Chart is completely customizable, allowing you to style it to your app design and your brand. Simple properties are exposed to easily style the outlines and brush fill colors of the pie slices, allowing you to use solid colors as well as gradients. Alternatively you can use chart themes to give your pie charts and other charts a consistent and color-coordinated look and feel. Simply set the theme property to one of the predefined themes or create your own. New Control – Funnel Chart Visually showcase diminishing values in your HTML5 Web applications and sites with our new funnel chart, a single series chart that displays data in a funnel shape with a variable number of sections, each representing the data as different portions of 100%. The funnel chart control uses the new HTML5 Canvas tag to plot funnel charts on web pages and makes it easy for end users to illustrate value "fallout" in the sales process or bottlenecks in the flow of a multi-step process. Funnel charts are very similar to pie charts in that that they display the values associated to different categories of items. They are different though because the sum of values shown on a funnel chart is not necessary to be the total of some larger entity. Funnel slices are usually displayed sorted by value from the largest down to the smallest or in reverse. They can appear with the same height or the height may be proportional to item value. The funnel chart usually has a conic shape but it allows a Bezier curve to form the contour of its left and right sides. Key Features of the Funnel Chart Weighted Slices– You can configure slices to be displayed with different height based on their value. This display option allows for a more obvious visual clue for the value of a slice compared to other slices. Slice Selection– You can enable slices to be selected and configure selected and unselected style for slices. Slice selection functionality can be enabled for the igFunnelChart control allowing the user to select slices with a single mouse click or screen tap. Another click or tap deselects the slice. Additionally, selected and unselected styles can be defined and applied to the slices depending on their state. Bezier Curve Shape– You can add more visual appeal to a funnel chart by configuring the sides of the chart to take shape in the form of a Bezier curve as opposed to the regular trapezoid shape. Developers can also configure the position of the Bezier control points in order to control the exact shape. Inverted Funnel– The funnel chart allows to be displayed with smallest value and on top as opposed to the regular view with largest value on top. By default a funnel chart displays the largest slice (the largest data value) on top and the rest of the slices going down sorted in descending order by value. Styling – Built-in control styling where the Funnel chart attempts to obtain default values for some of its properties from CSS classes. The control, sub-controls and attributes can all be styled to match the desired look & feel of your Web application or site. This includes colors, fonts, borders, padding, opacity, background, text alignment and more. New Control – Sparkline Charts (SparkLine, SparkBar, SparkArea, Win/Loss) The new Sparkline control is a data-intense, design-simple graphic that allows end users to spot trends, variations and patterns in data in a clear and compact representation. What sets the Sparkline chart apart from its full DataChart cousin is its lightweight nature which allows dozens or even hundreds or Sparkline charts to be loaded without a list or grid, enabling quick trend lookup in Web applications and sites. Key Features of the Spark Charts Multiple Display Choices– The Sparkline Chart can be configured to display one of four baseline microchart types: Line, Area, Column and Win/Loss. Data binding– Each Sparkline chart can be populated automatically by data-binding it to an igDataSource for both static and live data scenarios. Markers Support– Display markers such as First/Last, High/Low, Negative and Normal. Trend Lines– Many different trend lines can be applied to help users analyze their data, including linear, weighted, quadratic, cubic, quartic, quantic, logarithmic, exponential and more. Adjust Ranges– Apply Normal, Minimum and Maximum ranges to any Spark Chart type. Styling – Built-in control styling where the Sparkline chart attempts to obtain default values for some of its properties from CSS classes. The control, sub-controls and attributes can all be styled to match the desired look & feel of your Web application or site. This includes colors, fonts, borders, padding, opacity, background, text alignment and more. New Control – Radial Gauge Make your data visualizations and dashboards more engaging with radial gauges for iOS that show your key performance indicators (KPI) with rich style and interactivity. Create highly configurable, round or semi-round dials and gauges for your information dashboard with the look and feel of a clock, industrial control panel, automotive dashboard or aircraft cockpit. The Ignite UI Radial Gauge is powerful yet simple to use. Just drop it in your page and you’re ready to go with the default look & feel. Simply tweak the configuration options to your liking to meet whatever custom look you desire in your application. The Ignite UI Radial Gauge for HTML5 & jQuery is compatible with the NucliOS (i.e. native iOS) and XAML (i.e. WPF & Silverlight) versions of the same Radial Gauge, both visually and in features, that Infragistics is introducing on multiple platforms. Key Features in the Gauge control Fully Configurable Radial Scale– The Radial Gauge control lets you control the Start and End positions of the scale, major and minor tick marks, labels, color ranges and sweep direction. You can create full 360 degree scales, or half circular gauges with 180 degree scales, 90 degrees, 45 degrees or any custom value you want. Fully Configurable Needle– The Radial Gauge control lets you control various attributes of the needle, including the needle color, length, point, base, and cap. The following needle shapes are built-in: None Rectangle Triangle Needle Trapezoid Rectangle With Bulb Triangle With Bulb Needle With Bulb Trapezoid With Bulb Configurable Backing– The Radial Gauge backing can be configured to control various visual attributes such as the colors, shape around the gauge edges (fitted or circular), over sweep and corner radius. You can additionally control the transparency and display any custom image from within your CSS. Motion Framework Animations Support – The Radial Gauge control supports animated transitions between configuration states. The control gradually animates as it redraws changes to the needle, needle position, scale range, color range and more. You can control the speed of the animations by setting the desired Transition Duration. New Series & Chart Types in Data Chart The Ignite UI jQuery Data Chart is already the most powerful charting control for HTML5 developers. Release 13.1 brings even more goodness to Web and Hybrid app developers with new data series. New Chart Series This latest release of Ignite UI introduces 17 new chart types in the Data Chart control, enabling you to easily implement heavy-duty data visualization and analysis on large volumes of data with high performance in Web and hybrid HTML5 applications. The Ignite UI igChart now supports a total of 39 chart types, including the following new chart series introduced in release 13.1: Category Series– The igChart’s collection of baseline Category series is being expanded to support the following chart type: Category Point Stacked Chart Category Series – The jQuery igChart now supports a whole range of stacked series for every day scenarios. Stacked Area Series Stacked Bar Series Stacked Column Series Stacked Line Series Stacked Spline Area Series Stacked Spline Series Stacked 100 Area Series Stacked 100 Bar Series Stacked 100 Column Series Stacked 100 Line Series Stacked 100 Spline Area Series Stacked 100 Spline Series Scientific Charts – From wind patterns to performance metrics, Polar & Radial series can expose new insights in many scientific data sets. The new scientific charts supported include: Polar Spline Area Series Polar Spline Series Radial Area Series Chart Scatter Series - Also known as Scatter Plots or Scatter Graph, you can benefit from this type of mathematical diagram in your Web and hybrid apps using Cartesian coordinates to display values for two variables for a set of data. You can also enable trend lines to facilitate data analysis. The new scatter type supported is: Scatter Spline Series The Ignite UI data chart control for HTML5 and jQuery developers is designed for modularity using chart series. Multiple chart series are supported to create composite charts for better data comparisons on the same surface. New Control – Pivot View The new igPivotView is a two-panel control that combines the new igPivotGrid control and the new igPivotDataSelector controls, separated by the new igSplitter control. The igPivotGrid, igPivotDataSelector, and igSplitter – assembled together to provide in one place all needed tools for manipulating multidimensional (OLAP data) in a pivot grid. Key Features in the Pivot View Browser Based Business Intelligence– Bind to server-side XMLA data sources like Oracle, SAP & SQL Server Analysis Services, or server & client-side Flat data sources. Rich Data Discovery– Enable rich data discovery with drilldown, sorting & data filtering. Multiple layouts- Change how the row headers are arranged for display with regards to the amount of space they occupy with the Standard or default Compact View. Data Selection- The igPivotDataSelector provides drop-downs to select a database to connect to, cube to extract data from, and a set of measure groups. Metadata Tree– Display available dimensions with their respective hierarchies along with a list with all the available measures are loaded in a tree once the user chooses a database, cube, and measure group. Deferred Update– Immediate and Deferred mode are supported, which give control to the user on the frequency of the grid updates. Configurable Panel Views - Swap the pivot grid and the selector using the dataSelectorPanel properties of the igPivotView. New Control – Pivot Data Selector The new igPivotDataSelector is an interactive jQuery based UI control that enables users to select data slices, typically, when data is being visualized in an igPivotGrid. All of the UI features that you would expect to be used to interact with an actual OLAP or flat data source are wrapped up in this control. They include: Drop-downs for selecting database, cube and measure group A metadata tree displaying all dimensions, measures, hierarchies and levels Drop areas for selecting of hierarchies and measures A deferred update checkbox An update button to refresh the view connected to the data selector Key Features in the Pivot Data Selector Data Selection- The igPivotDataSelector provides drop-downs to select a database to connect to, cube to extract data from, and a set of measure groups. Metadata Tree– Display available dimensions with their respective hierarchies along with a list with all the available measures are loaded in a tree once the user chooses a database, cube, and measure group. Deferred Update– Immediate and Deferred mode are supported, which give control to the user on the frequency of the grid updates. Visualize Your Cube - Use the same data source instance as other Ignite UI controls, such as igPivotGrid, which enables you to build complete OLAP data visualization applications. New Control - Pivot Grid The igPivotGrid control is a jQuery based data presentation control for displaying data in a pivot table. It enables users to perform complex analysis on the supplied data. The igPivotGrid uses the Online Analytical Processing (OLAP) approach to present the results of multi-dimensional queries in an easy to comprehend manner. The igPivotGrid control uses an instance of either igFlatDataSource™ or igXmlaDataSource™ component as data source. Key Features in the Pivot Grid Rich Data Discovery– Enable rich data discovery with drilldown, sorting & data filtering. Multiple layouts- Change how the row headers are arranged for display with regards to the amount of space they occupy with the Standard or default Compact View. Build the Complete Experience - Combine with the igPivotDataSelector control to provide users with the ability to add/remove hierarchies and measures to/from the pivot grid. Grid New Features & Enhancements We are not resting on our laurels as the market leader in performance and features in our HTML / jQuery Data Grid. In 13.1. we are continuing to match the pace of the fast and furious Web world with new features and enhancements to existing grid features. Key Features Responsive Design– Taking from popular responsive UI frameworks like Twitter Bootstrap, we’ve added support that allows CSS classes to trigger visibility of columns based on the size of the grids container. A developer can also that the row template based on the container size. Cell Merging CTP to RTM – Enable a slick hierarchical view based on the sort of a column. Column Fixing CTP – Deliver an Excel like, interactive fixed column view. KnockoutJS CTP to RTM – let KO do the data binding magic for you with the Grid. WebUpload Enhancements WebUpload gets one of the most sought after feature requests in 13.1 – we’ve added support for multiple file selection. KnockoutJS Support We’ve added / updated Knockout support to the following controls: WebCombo Editors Tree Grid I know your next question is “what about Chart”? I’ve talked to the team about this, and we are going to get that into a checkpoint release very soon. So stay tuned. I want it as much as you do. New Control - Splitter The splitter is a component which create dynamic layout with resizable and collapsible panels. This component is a nice addition for Ignite UI’s toolbox because it is not available in the jQuery UI’s toolset and customers have no alternatives for acquiring this component from another source for free. The Splitter control can be horizontal or vertical, can include buttons for Left, Right or Collapse, and can be dragged accordingly to resize a containers widget. The Splitter is designed with programmable events for Collapse, Expand & Resize, and has full keyboard support for interactions. Key Features in Splitter Horizontal & Vertical Splitters Nested Splitters New Control - Layout Manager The Layout Manager is a jQuery UI widget, which implements several major layout modes, and does not have any UI on its own. The layouts can be used for laying out web pages, as well as single page applications. All of the layout modes that are implemented are responsive and fluid by design, meaning the layout adjusts based on the resize events on the browser. Key Features in Layout Manager Layout Customization– Design Flow, Border, Vertical or Column layouts based on the resizing algorithm that suites your needs. Interactive Grid - Create an absolute positioned layout that can be interactively minimized & maximized in a non-visual Tile Manager like UI. New Control – Tile Manager The web has evolved into richer experiences for end users. No longer is a static, even responsive UI enough for high-end user experiences. Controls like the new Tile Manager deliver on this new type of richness that can be delivered in HTML pages. Based on our new LayoutManager control, the TileManager gives a touch friendly, tablet-ready, interactive UI that allows the end user to expand, collapse and move widgets on the page. This is enabled by giving developers the ability to create a grid based layout in HTML that allows widgets to be hosted in defined column spans & row spans. Key Features in Tile Manager Tile Layout- Arrange tiles explicitly as regimented columns and rows like in a Grid panel, even span multiple columns and rows or display them as a data-bound Items Control that automatically creates a series of tiles. State-Based Customization - Define different item templates and size constraints to your tiles and have them automatically applied when the state changes between minimized, minimized expanded, normal and maximized. jQuery Mobile Enhancements We are continuing to polish our mobile control offering with enhancements to the jQuery Mobile List control. In 13.1 we’ve implemented events as properties on list view MVC wrapper and the ability to create a collapsible listing on the Mobile List control. Release 13.1 Looks Awesome! When Can I Get it? So hopefully you see the same awesomeness as I do in this release. I can’t wait for you to start using it and most of all giving us feedback. We are about 3 weeks away from the official marketing release of April 16th. If you can’t wait to get your hands on the controls, you can shoot me an email at jasonb@infragistics.comand let me what control and/or feature you really want to work with now and we’ll get you early access to the bits. If you have ideas about new features we should bring to our controls, important issues we need to fix or even brand new controls you’d like us to introduce, please let us know. Follow and engage with us on Twitter via @infragistics. You can also follow and contact me directly on Twitter at @jasonberes or shoot me an email at jasonb@infragistics.com. Also make sure to connect with our various teams via our Community Formswhere you can interact with Infragistics engineers and also other customers. Lastly, when you do build something cool with our controls, please make sure to let us know, we always love to hear from you.