Log in to like this post! Ignite UI for Web Components - What’s New in 21.2 Brian Lagunas / Thursday, December 16, 2021 I’m sorry but you need to tell your kids Santa Claus isn’t coming this year. Why you ask? Well, it’s because Santa, and all his elves, are going to be too busy building mind blowing web applications using today’s release of Infragistics Ignite UI for Web Components 21.2. Today’s Ignite UI for Web Components 21.2 release is jam-packed with goodies for everyone to enjoy. Besides adding four major features to the Web Components data grid, we have also added 17 brand new components to the product. Now, let’s turn on the holiday music and unwrap this gift of awesomeness! Web Components Grid It’s no secret that the Web Components grid is by far the most popular component in the Ignite UI for Web Components product offering. Easy to use, exploding with performance, and packed with features. It’s no wonder why the Ignite UI for Web Components grid is the go-to component for all our Web Components customers. In this latest release of Ignite UI for Web Components 21.2, we wanted to make sure we focused on the most important features that have the biggest impact on a grids ability to provide value to an end-user. Filter Row While the Ignite UI for Web Components data grid has always supported filtering, the filter experience was limited to the column options dialog with the excel style filtering feature. While this works, it’s not always the most optimal filtering experience. For this reason, we have added a brand-new filter row to the data grid component. You can now provide filters inline making for a much better end-user filtering experience. Not only can you simply filter a specific column, but you can also choose the filter operand for that filter such as start-with, ends with, and contains just to name a few. Not happy with the built-in filter operands? No problem, you can build your own custom filter operands that will show in the data grids new filter row. Interactive GroupBy Probably the most important on my list, was the ability to group columns by a simple drag and drop operation. Before today’s Ignite UI for Web Components 21.2 release, you had to use the column options dialog to group columns. Unfortunately, that isn’t the best experience and becomes very confusing at times. However, starting today you can now drag and drop any column header into the brand-new data grid GroupBy Header to automatically apply your groupings. It’s so easy and so smooth. Cell Merging Cell merging is a common feature in Microsoft Excel that allows you to deliver data clarity and avoid duplication by merging neighboring data cells across different rows whenever they display matching values. While Excel made this feature famous, it is now a very common request in the context of showing data in a data grid. With the release of Infragistics Ignite UI for Web Components, the data grid has full support for cell merging. Save/Load Layout When your end-users move, sort, filter, pin, resizes a column, adds a summary, or groups the data grid at runtime, they would often like to save the state of their changes to be loaded later. As of today, they can! You can now save the layout of the Web Components data grid to json using the DataGrid.SaveLayout method and then provide the ability to load any saved layout back into the data grid using the DataGrid.LoadLayout method. Web Components Avatar The Ignite UI for Web Components Avatar component helps adding initials, images, or material icons to your application. Web Components Badge The Ignite UI for Web Components Badge is a component used in conjunction with avatars, navigation menus, or other components in an application when a visual notification is needed. Badges are usually designed as icons with a predefined style to communicate information, success, warnings, or errors. Web Components Button The Ignite UI for Web Components Button directive is intended to turn any button, span, div, or anchor element into a fully functional button. Web Components Calendar The Ignite UI for Web Components Calendar component provides an easy and intuitive ways to display date information. Users can choose from three different selection modes - single selection, multi selection or range selection. Web Components Card The Ignite UI for Web Components Card component displays text, images, icons, and buttons in a visually rich presentation that can serve as an entry point to more detailed information. Web Components Checkbox The Ignite UI for Web Components Checkbox component is a selection control that allows users to make a binary choice for a certain condition. It behaves similarly to the native browser checkbox. Web Components Icon The Ignite UI for Web Components Icon component unifies icon/font families so developers can use them interchangeably and add material icons to markup. Web Components Input The Ignite UI for Web Components Input is used to create single-line or multi-line text elements. They help to cover common scenarios when dealing with form inputs. Web Components List The List component is extremely useful when presenting a group of items. You can create a simple list of textual items, or a more complex one, containing an array of different layout elements. The Ignite UI for Web Components List component displays rows of items and supports one or more header items. Each list item is completely templatable and will support any valid HTML. Web Components Navigation Bar The Ignite UI for Web Components Navigation Bar component informs the user of their current position in an app and helps them move back (much like the “back” button in a browser). The Navigation Bar can also provide links to quick actions such as search or favorite, helping users navigate smoothly through an application without trying to move to invalid routes or states. The bar sits at the top of the container it is placed in. Web Components Navigation Drawer The Ignite UI for Web Components Navigation Drawer component is a side navigation container. It can rest above content and slide in/out of view or be pinned to expand/collapse within the content. A mini version provides quick access to navigation even when closed. The Navigation Drawer features responsive mode selection and touch gestures. Content is completely customizable and can make use of default menu item styling. Web Components Radio and Radio Group The Ignite UI for Web Components Radio Button and Radio Group components allow the user to select a single option from an available set of options that are listed side by side. Web Components Ripple The Ignite UI for Web Components Ripple component creates an animation in response to a touch or a mouse click. Web Components Switch The Ignite UI for Web Components Switch component functions like a checkbox but explicitly represents boolean on and off states. Clicking the Switch component will toggle the value of the component from an “on” state (boolean true) to an “off” state (boolean false). Let’s Wrap this Baby Up! If you have ideas about new features we should bring to our components, important issues we need to fix, or even brand new components you’d like us to introduce, please let us know by posting them on our Product Ideas website. Follow and engage with us on Twitter via @infragistics. You can also follow and contact me directly on Twitter at @brianlagunas. You can also subscribe to my YouTube channel to be notified of new videos, and follow me on Twitch to watch me stream live. Also make sure to connect with our various teams via our Community Forums where you can interact with Infragistics engineers and other customers. Lastly, when you do build something cool with our controls, please make sure to let us know.