What's New in Ignite UI and ASP.NET 14.2

Ambrose Little / Tuesday, October 14, 2014

As noted in our 14.1 launch in the spring, we talked about three main areas of focus for this year:

  • Touch Everywhere, Office-Inspired Apps on Every Platform
  • Deliver Outstanding Experiences with Awesome Branding & Styling
  • Developer Productivity Across Every Device, Every Platform

These three themes are carrying into 14.2, and when we talk about 2015 later this year, we’ll evolve these themes even further. Coming releases will continue our laser focus on delivering you the best UI toolsets and developer productivity tools for every platform, which means desktop, responsive Web, and native mobile.

Office-Inspired Apps on Every Platform

We are CTP'ing 2 new powerful tools in 14.2 - a tree grid control that gives you an efficient way of visualizing flat or hierarchical data that share common column sets in a hierarchical view, and a new 100% JavaScript Excel library.

igTreeGrid CTP

This new JavaScript tree grid jQuery UI widget is targeted at common line of business scenarios that involve multiple levels of hierarchical records that share the same column sets and usually involve roll up values for columns. A few common scenarios that the tree grid is great for are project management work breakdown structures, organizational/employee structures, and financial accounting structures.

The igTreeGrid is based on our amazing igGrid, so it carries forward all of the applicable features already present in the grid, as well as our industry-leading performance. It includes support for binding to both self-referential flat data structures as well as true hierarchies.

igTreeGrid.png
Try It Out Now

JavaScript Excel Library CTP

Business users love Excel. They often ask devs to “make it like Excel,” and they also like to be able to seamlessly move from editing table-based data in applications to editing and extrapolating from it in Excel. Until now, doing that in the browser relied on server-side exporting, but in this release, we are shipping our preview of our 100% pure JavaScript Excel library that makes it so that devs can edit and produce Excel spreadsheets in the browser.

This new library is based on the same Excel library we have in other platforms like Windows Forms, WPF, iOS, ASP.NET. Using our robust cross-platform technologies, we've translated to JavaScript. This means that our customers who are used to working with our server-side and desktop Excel libraries will have a familiar object model to work in, but one that is optimized for JavaScript. As noted, this means it works in the browser, but it will also work in other JavaScript runtimes like Node.

Try It Out Now

Deliver Outstanding Experiences with Awesome Branding & Styling

Delivering outstanding experiences requires great functionality, but great looks make a huge difference as well. We are continuing to work hard & innovate to give you beautiful styles that are easy to incorporate into your apps. With this release, we are adding explicit support for Bootstrap themes. Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web, and it’s important that Ignite UI plays well with it.

Bootstrap Themes

With this release we are shipping four ready-made Bootstrap themes for Ignite UI.
bootstrap-igniteui-themes.png

These themes are ready for you to download and simply reference to have your Ignite UI components look and feel at home with these Bootstrap-based themes.

Bootstrap Theme Generator

In addition to the themes we have created, you can also use our Bootstrap theme generator to generate Ignite UI themes using the LESS variables from any Bootstrap-based theme, so you don’t have to wait on us to make Ignite UI look good with your customized theme. :)

In addition to generating the new theme, you can customize any generated theme right on the Ignite UI site before you download it!

A side benefit of this is that you can now more easily customize Ignite UI themes using our LESS variables, which makes integrating Ignite UI even into non-Bootstrap themes significantly easier.


customize-igniteui-bootstrap.png

Try It Out Now

Updated iOS Theme

In 14.1 we shipped a preview of our iOS7 theme. With this release we are shipping the release version. We have also renamed it to just “iOS” because it is not just for iOS 7. It is a theme that fits well with iOS 7+ styling and replaces the prior iOS theme (that was based on iOS 6 and below).

Try It Out Now

Developer Productivity Across Every Device, Every Platform

We’re here to make you more productive. And as part of that, we want to empower you to be productive shipping apps across every device and platform. In 14.2, we’re adding some very significant new goodies to Ignite UI to make that a reality.

Ignite UI Page Designer

This summer, we released a public preview of our new HTML5 modern Web page designer. The primary focus for this new tool in this release is to make laying out and configuring Ignite UI controls significantly easier. With that in mind, here’s a quick overview of the key features of the page designer in this release. This is a first step for this tool, and we look forward to enhancing it for you over future releases!


igniteui-page-designer.png

Searchable Toolbox Chock Full of Advanced HTML5 Components
toolbox-advanced-html5-components.png

All you have to do is drag and drop them onto the design surface, then you can use the familiar property grid component editor to configure them.


Easy-to-Use Component Editor

html5-component-editor.png

This component editor makes it a breeze to set up your Ignite UI components:

  • Browse or search through all the component properties and events.
  • Easily toggle Booleans, pick from enumerated options, and drill into complex and collection-based properties.
  • View the integrated API help while hovering over properties and events.
  • One-click to create and edit event handlers.
  • Double-click to create or edit CSS classes, and double-click to jump to the code for a property.
  • Click the ? at the top to jump straight into API docs for that component.

 

Simplified Responsive Web Design

Use the built-in Bootstrap row component to easily leverage the Bootstrap grid framework on your page.

simplified-responsive-web-design.png

Take advantage of the CSS breakpoint visualizer and editor to see and edit your responsive design.


rwd-breakpoint-editor.png

And if you have a responsive breakpoint selected in the designer, when you double-click to create a CSS class for a component, it will correctly declare the selector inside of the current breakpoint.


jump-to-breakpoint-class.png

 

Code Editor with Clean Code

A key goal with the page designer is to produce clean code that you can copy and use in your projects. We also integrated the world-class ACE code editor to give you a good in-designer code editing experience.


html5-code-editor.png

As you can see, the API docs are also incorporated into the code editing experience to further reduce flipping back and forth between docs and working with Ignite UI.

Try It Out Now

igGrid Improvements

Infragistics data grids are the workhorses of many applications, and the igGrid is no different! So we are always working on improving it to make it more productive and capable. In this release we are including a few improvements.

  • Column Fixing & Virtualization - we earlier shipped column fixing, and with this release you can now use it together with virtualization.
  • Selection - we have refactored and improved the selection feature so that it is 30% smaller JavaScript size and related operations perform more smoothly.

 

Append Rows on Demand

In 14.1 we shipped “load on demand” as a preview for the igGrid. In this release, we are completing that feature and have renamed it to “append rows on demand.” We did that both to avoid confusion with other load on demand features and just to generally better describe what it does.

javascript-data-grid-append-rows-on-demand.png

The same experience you get with apps such as Twitter where when you reach the bottom of the currently-loaded list or newsfeed and you can retrieve the next set of items is now offered in the igGrid. The user has two options for achieving this feature, automatically and on request. Automatic will load the next set when the user scrolls to the bottom and on request show a button that lets the user specifically ask to load more.

Try It Out Now

Improved Docs Integration

You may not have noticed yet, but this summer we published a nifty little update to our API docs viewer.


link-to-igniteui-api.png

What this means is that we (and you ;) ) can link directly to specific API member docs, like so:

https://www.igniteui.com/help/api/2014.2/ui.iggrid

More importantly, we have updated all of the samples on IgniteUI.com to now link directly to related, specific APIs so that you don’t have to go searching for them. A small thing, but it makes finding docs that much easier.

Bugs Be Gone!

No release would be complete without the requisite squashing of bugs, but in this release we smashed a whole TON of ‘em across both Ignite UI and ASP.NET. Reliability is a core product quality for us, and while it may not be sexy, it is an integral part of what we think about as we make software for you. We want you to have confidence when you ship out your apps built with Infragistics that you and your customers won’t be surprised by bugs.

Summary

As you can see, there’s a lot of great stuff coming your way in this release for our Web products. New core LOB tools, new page designer, new Bootstrap themes—it’s all about making you more productive and your apps more useful, usable, and desirable.

To get started using all this goodness, download Infragistics Ultimate 14.2 today!

If you have any product ideas or suggestions, the best place to share them is on our User Voice-driven Product Ideas site. If you need help with anything, feel free to contact us. And if you wanna strike up a convo with me, you can reach me at ambrose@infragistics.com.

Have a great day!