What's New in Ignite UI: HTML5, jQuery & ASP.NET MVC for 15.1

Jason Beres [Infragistics] / Monday, April 13, 2015

Ignite UI™ is the most powerful set of high performance user experience controls and components for development of modern apps in HTML5, JavaScript or ASP.NET MVC. If you are building responsive web apps that target the desktop and mobile, or just hybrid mobile apps, Ignite UI can get you there. We are continuing to invest in rich line-of-business scenarios for the desktop browser, while ensuring the touch experiences and mobility are top of mind in our UX process for new controls and control enhancements.   

Features in Release

igTreeGrid- New Control

We released an early CTP of the tree grid in 2014.2, and we’ve spent the last few months refining and improving it so that it is what a tree grid should be for you! The igTreeGrid™ presents hierarchical data by combining the principles of a tree and tabular data into a single control. Inside the igTreeGrid hierarchical data is rendered using the same columns for each row while providing a way for users to expand and collapse child data. Because the igTreeGrid inherits the igGrid control, you get many of the same features and functionality as the igGrid out of the box.

  • Tree-Specific Filtering
    • The igTreeGrid features a specialized filtering visualization that clearly shows context in filter results in the grid. As you filter a column, matching values are shown at full opacity while the parents of the matching value are shown (by default) at a lower opacity. This makes it easy for you to see how data is related together in the hierarchy even when data is filtered.
  • Tree-Specific Paging
    • When paging data in the grid, you have the option to page either visible data at just the root level or all visible levels. Being able to control paging this way gives you control over how fast you can page through hierarchical data.
  • Enhanced Expansion Options
    • In order to maintain flexibility, the tree grid features a configurable expansion indicator, which can be rendered inline in the first data column or in a standalone column. The expansion indicator can also be customized with a different look-and-feel to achieve custom visualizations.
  • Virtualization
    • The igTreeGrid includes continuous virtualization which allows you to bind the grid to large sets of hierarchical data while maintaining a high-performance experience.
  • Remote Load on Demand
    • Sometimes large sets of data are rendered in the grid and you only want to supply the page with small sets of data at a time. By using remote load on demand, the igTreeGrid is able to add portions of the overall data to the grid as requested by the user.
  • Local Load on Demand
    • To further maintain a high-performance grid, the igTreeGrid features local load on demand which ensures that only expanded nodes are rendered in the browser. As a user expands a parent node, then new elements are created on-the-fly in the page to support new data shown to the user.

 

igGrid- New Features

Our most popular Ignite UI control, the igGrid, also enjoys some new functionality making the grid more flexible and easier to use in more complex scenarios.

  • Column Fixing + Column Moving Integration
    • Added support for the Column Fixing and Column Moving features to work together at the same time in the grid.
  • Improved Column Fixing API
    • Now you can fix a column at specific position in the grid by supplying the target key of the column to its destination position in the grid.
  • More Flexibility in the Selection Feature
    • You now have the opportunity to make a multiple region selection by doing a Ctrl + Mouse Drag action. Selection regions may be non-contiguous.
  • Paging Persistence
    • The Paging feature now remembers its page size and index when you rebind the grid.
  • Single-Column Responsive Layout Template
    • When using the igGrid on a responsive page, you now have the opportunity to define a single-column layout that renders the data from a row into a single column. Using this mode allows you to create a specialized look for data in a grid when rendered on small devices. This custom template gives you full control over what data from the grid is shown in this column.

New Ignite UI Help Viewer

We have a brand new, modernized help viewer for Ignite UI. This makes it much easier to navigate through and share individual topics, and you can also easily switch between product versions (for version 14.1 and up) directly in a topic.
Beyond making the experience easier to use, the actual topics themselves are now available on GitHub in Markdown. This means that you can easily report issues on topics or perhaps even submit additions or changes to a topic via a GitHub pull request.


 

igCombo – Rewritten from the Ground Up

Our original jQuery-based combo that we shipped almost four years ago was very functional, but over the years we’ve seen that it started showing its age. In 15.1, we are shipping a brand new combo that is built with great UX and reliability as top priority. While it has much improved, we’ve also minimized API changes so that you can drop and replace with minimal effort to start benefitting from the new combo. Don’t worry—we’ve documented all of the changes so you know what to do.
We’re confident that you will find the improvements well worthwhile. The new combo provides a solid foundation for years to come so that we can better help you create awesome Web apps.

  • Improved Styling
    • The new combo does not use inline CSS styling for positioning and sizing, which means it can rely on browser rendering optimizations more, but more importantly this means it is much easier to style and get the look and feel that you or your designer wants! We’ve also ensured we keep the old class names where applicable so that your existing custom styles (and our themes) should just work.
  • Improved Defaults
    • In some areas we have changed the defaults to provide a better UX out of the box, which also reduces the code necessary on your part to get to those optimal experiences for your end users. This is true of the styling, which has a more modern feel by default now, as well as other subtle usability improvements.
  • Many New Keyboard Interactions
    • The old combo had the basics, but we have dramatically expanded what you can do with the keyboard, which makes it more efficient and natural for end users to navigate, select, expand, etc. without having to switch back and forth between the mouse and keys.
  • Improved Reliability
    • Here are some details of the work we’ve been doing to maximize the value of this new combo:
      • New combo code is 55% the size of the old combo, reducing both download & parsing time.
      • Code complexity is significantly reduced to increase performance and improve testability.
      • Code coverage is much higher with a higher pass rate.
  • API Improvements
    • We also took this opportunity to revisit some less-than-optimal API choices to improve discoverability and understandability of the API. This means, in some cases, names that just make more sense but also the elimination of unnecessary APIs that were required by the old combo’s implementation details.

 

JavaScript Excel Library

Yes, that’s right—you get the same extensive Excel document object model found in our rich client and server Excel engines right there in the browser! Not only can you manipulate Excel docs like a pro, you can leverage the built-in powerful Excel formulas for all your number-crunching needs. In 14.2, we CTP’d the first version of our new 100% JavaScript Excel library. We’ve been working non-stop ever since to optimize, improve, and finalize it in the meantime.  In addition to squeezing down the file size as much as possible, we have greatly increased our code coverage and test pass rate, as well as enhanced compatibility to reach all the browsers we support.

JavaScript-based Excel Grid Exporter

We’re doing the heavy lifting for you now. Add this component to your page along with the igGrid, and with a few lines of code—boom! You can export what users are looking at into an Excel file without any round-tripping to the server.

Page Designer Improvements

We released the amazing Ignite UI Page Designer in 14.2, which makes it much easier using a WYSIWYG design-time experience to quickly lay out a modern Web page using Ignite UI components and configure your components. In the 15.1 release timeframe, we have published some helpful updates to make it even better.

  • Out-of-the-Box Theming Support
    • Previously the Page Designer explicitly supported the default Ignite UI theme. We have now added support for other Ignite UI themes and common Bootstrap-based themes that you can easily select with the built-in theme picker.
  • Improved Data Sources Experience
    • One of the challenges with designing in the browser is the difficulty of CORS access to data sources. We can’t change the nature of the browser, but we have tried to make it easier to understand and work with this limitation in the designer by explicit support for JSONP data source and local data source as well as a new data source editor and better error messages to help you debug.


 

igCombo Knockout Extension Improvements

The first version of the igCombo Knockout Extension supported two-way data binding between a Knockout ViewModel property and the igCombo input. Now the igCombo has a fully functional Knockout Extension which supports two-way data binding between a Knockout observable collection and the igCombo list, as well as two-way data binding for selected items in the combo. The combo also now serves references to the data it is bound to in all events and API methods which makes it easy for developers to work with Knockout ViewModel data through the combo.

jQuery Mobile 1.4+ Support

Ignite UI mobile controls are now compatible with the most recent version of jQuery Mobile, 1.4+.

More Control Over igGrid Column Styling

We’ve added a new setting so that you can specify custom header and column CSS classes for igGrid columns configuration.

Wrapping it Up ....

That’s it for this big release of Ignite UI. We are investing heavily in modern web - we know that digital transformation and mobilization of your existing desktop applications to mobile devices and browsers are your key initiatives this year and next – Ignite UI will help drive your successful transitions. If you have any questions, shoot me an email at jasonb@infragistics.com, and if you have any ideas for the product or don’t see a feature that you’d like, let us know at the User Voice site so we can hear you voice!