What's New in Ignite UI for JavaScript in 17.1

Infragistics Team / Thursday, June 22, 2017

We’re excited to announce the 17.1 release of Ignite UI for JavaScript! Our goal with this release was to make good on our “Write Fast, Run Fast” promise, while also creating a great experience for modern web developers.

As you’ll see, in 17.1 we have definitely delivered.

The 17.1 release boasts great new features and controls, such as:

But we didn’t stop there. The 17.1 release includes several new controls and features for developers using frameworks like Angular and React. We’ve also added several library-wide updates and productivity features to keep Ignite UI for JavaScript the best choice in web component frameworks.

 New Data Grid Features

Search by Text

Ignite UI already has the fastest JavaScript grid available, and now we’ve made the grid even better with some great new features that your users are going to love.

The first new feature we want to tell you about is called “Search by Text.” In most grids you filter on a column by column basis. This is fine if you care only about finding a particular instance of some data in a specific column, and you know which column your data is in.

But what if you want to look across all your columns?

Suppose you have a list of orders with billing and shipping addresses, and you want to see all orders that will be shipped or billed to New York City. With conventional column-based filtering, you could set up a filter in your ship to and bill to columns. The problem is that instead of giving you what you want, you will see orders whose ship to and bill to address are both in New York City. With Filter by Text, the Ignite UI grid will search for the value across all of your columns, giving you every row where New York City is in the bill to address, the ship to address or both.

This feature is easy to implement: simply capture the user's input and Ignite UI’s Data Source API will take care of the rest. You can give your users a textbox and allow them to search on any value they like. Or, you can provide some more restrictive like a drop-down list box or an edit mask if you want to have control over what your users search for. The choice is yours, and Ignite UI makes it easy to add this feature to your application.

Enhanced Group Summaries

Another very popular feature of the Ignite UI grid is the ability to group rows together based on specific data. This has long been a great way for users organize data and make it easier to work with. With the 17.1 release, Ignite UI now supports data summaries for grouped data.

These summaries enable you to display aggregate information for each group of information. This enhanced summary, which can be displayed above or below each data group, has built-in functions for the most popular data aggregations, such as Count, Sum, Average, Minimum and Maximum. This new summary also enables developer to create their own custom functions to handle any data aggregation need you may have.

Grid Caption Template

When using a third-party component in your application, the ability to control how that comenent fits into your page from a user-experience point of view. A good component should have the ability to visually conform to wherever it’s deployed and add to the user experience, not detract from it. In that spirit, the Ignite UI grid caption now supports the use of HTML, not just plain text.

This new feature gives you the ability to create stylish, eye-catching captions for your grid that fits right in with the surrounding user experience – instead of detracting from it.

Also, new in 17.1 is support for UTC ISO 8061 date serialization. This format is supported in the Ignite UI Grid, Hierarchical Grid and all our editors. Developers can configure these controls to render dates into either universal or specific time zone values.

We’ve also updated our Number Editor to support decimal point rounding. Developers can configure these components to support a specific level of precision, with values either being rounded or truncated as required.

New Spreadsheet Component

Spreadsheets packages are the most popular type of business applications on computers. Trillions of dollars across the globe are managed in these applications, and for good reason. Users understand the mechanics and features of these applications and enjoy the freedom of being able to structure and manipulate their data any way they want.

With the 17.1 release, Ignite UI is helping developers bring the power of the spreadsheet to their applications with the brand-new Spreadsheet component.

This powerful new component enables users to import and export their data into and out of your applications easily. This functionality supports local and remote data sources. Users can store their files locally on their computer, or on a server.

Formula Bar

The most powerful feature of any spreadsheet is the ability to create formulas based on the spreadsheets data. The Spreadsheet component includes a formula bar that allows users to see formula definitions. The Spreadsheet component supports custom formulas and provides dozens of built-in functions, including simple formulas such as SUM, MEAN, and MEDIAN, in addition to more complex formulas such as GEOMEAN and HARMEAN. The Formula Bar is also resizable, making it easier to see long or complex formulas.

Configurable View

The Spreadsheet component provides many options to manage how users work with and consume the data presented to them. You can programmatically change for look, feel and format for the Spreadsheet control based on any event or user interface element you choose. Using the powerful executeAction method and the underlying options, you can manipulate the spreadsheet data and how it is displayed (e.g. hide elements like gridlines, headings), as well  as well as change many other properties of the control.

The spreadsheet also programmatically supports zooming and text formatting (bold, italics, underline). These features work in real-time, so your users can change these settings on the fly. Users can also split the spreadsheet into scrollable panes, show/hide the formula bar and freeze the first column or row.

New Schedule Component

Writing applications that deal with dates and times can be challenging. A significant part of that challenge comes when it’s time to create an intuitive and expressive interface that users enjoy and developers don’t feel like the constantly have to fight with. With Ignite UI’s new Schedule component, it’s now easy to create applications with great time-based user interfaces that look great on the desktop and on mobile devices.

Appointments

The Appointment is a core concept in a scheduling application, containing all the relevant information about an activity that will occur during some block of time, such as a meeting or an event. The Schedule component allows you to provide a collection of appointments with details such as a start date, end date, subject, and more. These are displayed in the Month View or Agenda View, whichever is selected. The Schedule component also provides support for recurring appointments with daily, weekly, monthly, and yearly recurrence patterns.

Resources

In addition to scheduling appointments, you can also schedule resources, such as the conference room where you plan to hold a meeting or the person responsible for a presentation. Each resource can be assigned a unique color scheme to more easily identify the resource associated with an appointment. You can choose from 11 built-in color schemes including Grape, Strawberry, Sky, and Leafy, just to name a few.

Views

The Schedule component provides two different types of views to display dates and appointments, including Month and Agenda.

Month View

The Month View shows the weeks of the month arranged vertically, going from top to bottom, with the days of the week  arranged horizontally. The month view displays a split agenda view so that appointments can be displayed below the month for the selected date. (If you don't need the agenda split view, you can easily remove it.)

Agenda

 The Agenda view shows a full list of all scheduled appointments. This allows you to focus only on upcoming scheduled events. Scroll appointments to see what’s coming up next.

More Great New Features

In addition to our new grid features, our new Spreadsheet component and our new Schedule component, we’ve been hard at work making other changes and additions to make Ignite UI even better.

  • Ignite UI IntelliSense Support: Ignite UI now has IntelliSense support for both Visual Studio and Visual Studio Code. IntelliSense is a great tool that helps developers increase their productivity while also guiding them through the Ignite UI API. You can add IntelliSense support via our NuGet package, from the Visual Studio Marketplace or download directly from our repository
  • Ignite UI Angular Quick Start Application – Want to get up and going on your Angular application with Ignite UI even faster? Well, we’ve forked the popular Angular 2 Quick Start application and added all the references you need for Ignite UI controls. Simply download the application, run NPM install, and start coding.
  • Angular ER Dashboard Reference Application – Last fall we released the Ignite UI Stock Tracker reference application to demonstrate how easy it was to use Ignite UI’s grids and charts in an Angular application. With 17.1 we are releasing a new reference application based on our very popular ER Dashboard sample. In addition to featuring Ignite UI’s grids and charts, this new application demonstrates how components like Ignite UI’s Tile Manager, Combo Box and Hierarchical Grid can help you build great Angular applications.
  • Help, Documentation and Samples – In addition to all the new features and components we’ve added to Ignite UI for 17.1, we continued to update and enhance our developer support resources. We’ve redesigned our Sample Browser to help you find the samples and code you’re looking for faster and with fewer clicks. The API documentation has been enhanced to include references types and improved event argument documentation. And finally, our help topics not only include code snippets, but the ability to see running code inside the topic page.

17.1 is another in a long line of great releases for Ignite UI. In addition to all the great features listed above, we’ve redesigned our website and improved our samples and documentation. Our goal is to make it easier for you find helpful information and samples, so you can accelerate your development with Ignite UI. 

With Ignite UI, we are committed to helping you continue to write fast, run fast and build great applications for the modern web.