Log in to like this post! What’s New in 21.1: Ignite UI for Web Components Brian Lagunas / Wednesday, June 2, 2021 Spring is upon us. The bees are buzzing, the birds are chirping, the flowers are blooming, and Infragistics is launching a brand-new release of Ignite UI for Web Components. So let’s grab a handful of our Spring treats, and cover all the goodies we are shipping in today’s Ignite UI for Web Components 21.1 release. 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 of our Web Components customers. In this latest release of Ignite UI for Web Components 21.1, we wanted to make sure we focused on the editing and selection capabilities of the Web Components grid. We really wanted to home in the editing and selection experiences so that they feel natural regardless of if you are using a mouse or just the keyboard. Enter Behavior After Edit By far the most popular request we have received from our customers was the ability to control the Enter key. Our customers are used to the editing experience provided by Microsoft Excel. Meaning that when you edit a cell and then commit the edit by pressing the Enter key, the active cell then moves to the cell under the previously edited cell. This allows end-users to perform fast data entry on a single column. To support this request, we added a new property named EnterBehaviorAfterEdit. This property will control the behavior of the Enter key when it is pressed to commit an edit operation. The EnterBehaviorAfterEdit property has the following options: - None (Default) - after an edit is committed using the Enter key, the current cell stays active. - MoveUp - after an edit is committed using the Enter key, the cell above the current cell becomes active. - MoveDown - after an edit is committed using the Enter key, the cell below the active cell becomes active. - MoveLeft - after an edit is committed using the Enter key, the cell to the left of the current cell becomes active. - MoveRight - after an edit is committed using the Enter key, the cell to the right of the current cell becomes active. Enter Behavior While the “Enter Behavior After Edit” feature met the requirements of 98% of our customers, another feature was requested regarding the Enter key. The default behavior of the Enter key is to enter edit mode on the active cell. However, some customers did not want this behavior. Instead, they wish to use the Enter key to navigate the cells instead of entering edit mode on a cell. To support this request, we added a property named EnterBehavior. The EnterBehavior property has the following options: - None – pressing the Enter key does nothing. - Edit (Default) – the active cell enters edit mode on pressing the enter key. - MoveUp – the cell above the current active cell becomes active. - MoveDown – the cell below the current active cell becomes active. - MoveLeft – the cell to the left of the current active cell becomes active. - MoveRight – the cell to the right of the current active cell becomes active. Begin Editing on Key Press Another popular editing feature that was inspired from Excel was the ability to enter edit mode by simply typing characters on the keyboard. Before today, if you wanted to enter edit mode on an active cell, you had to either hit the Enter key, press F2, or click/double-click on the cell. Starting today, you can now immediately enter edit mode on an active cell by typing valid edit characters on the keyboard. These characters include: abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890!"$%^&*()_+-=[];\'#,./\|<>?:@~{} By default, this new editing behavior is turned on. However, if you wish to turn it off, you can set the EditOnKeyPress property to false. As you can see, when you combine the new “begin editing on key press” feature with the “enter key behavior” feature, you get a seamless, fluid, and intuitive editing experience. Selection Improvements The next area of focus for the Web Components grid was selection. We really wanted to make sure the selection experience was smooth, intuitive, and keyboard friendly. We started by adding Row Range Selection. Yeah, I know… that seems like an obvious feature to have, but we ran out of time in the last release to add it. So we are adding it now. What is Row Range Selection? Row Range Selection I the ability to select a range of rows that may or may not be contiguous. Row selection can be made using either the mouse or keyboard. To enable this selection mode, you must set the SelectionMode property to MutipleRow. Here are the selection interactions that have been added to the Web Components grid. Click a row and then drag the mouse to select contiguous rows. Click a row, hold the Shift Key, and then click another row to select all rows between the first row you click and the last. Hold the Control Key (CTRL) and click a row to add the row to the current collection of selected rows. Press the Shift Key and use the arrows keys up or down to select rows. Of course, if at any time you wish to deselect all rows you have selected, simply press the Escape Key on the keyboard. Column Summaries in Column Options The Web Components grid has had support for summaries for over a year now. However, to use them, you must apply summaries using the API. Meaning, you must write code to add them. The end user cannot add the summaries themselves at runtime. Lets be honest, that’s where summaries are most popular. Starting today, your end-users can now add summaries to any column they want using the column options dialog. Simply open the dialog by clicking on the column menu, click on the Summaries menu item, and then select which summaries you want to apply to the column. Click the apply button and watch the magic happen. Web Components Date Picker The Web Components Date Picker component offers a drop-down control that’s optimized for picking a single date from a calendar view where contextual information like the day of the week or fullness of the calendar is important. The Web Components date picker was initially shipped with limited features in our last Ignite UI for Web Components 20.2 release. Since then, we have been hard at work completing the functionality of the Web Components date picker to provide all the features you would expect in a Web Components date picker component. Here is a highlight of all the new features we are shipping in our Web Components Date Picker for this 21.1 release. Text Input You can now use the keyboard to enter dates into the Web Components date picker component without selecting a date from the calendar drop down. You enter the date value as a numeric or an alpha-numeric representation of the date. Format Input Text Now that text input is allowed in the Web Components Date Picker, it is important that you can format the date that is displayed in the text area of the date picker component for your locale. To set the format of the date, you have two options.: The DateFormat property, which is an enumeration containing common date formats. In this example we are using the DateFormats.DateLong option: The FormatString property, which allows you to use any combination of "d, dd, ddd, dddd", "m, mm, mmm, mmmm", or "y, yy, yyy, yyyy" separated by either a space, slash (/), dash (-), or period (.). The following example is using the "yyyy/mm/dd" format string: Today Button We have added a “Today Button” to the calendar drop down. This "Today" button will bring the current date into focus within the calendar drop down no matter what month or year you have navigated to within the calendar. You can show the Today Button from the calendar drop down by setting the ShowTodayButton property to true. First Day of Week You can now define the first day of the week for your locale by setting the FirstDayOfWeek property. In this example; the first day of the week is set to DayOfWeek.Monday: Week Numbers By setting the ShowWeekNumbers property to true, you can display a column which displays the number of weeks in the current month. First Week of Year When using Week Numbers, you can define when to start the first week of the year. To do this, simply set the FirstWeekOfYear property to one of the following values: FirstWeekOfYear.FirstDay, FirstWeekOfYear.FirstFullWeek or FirstWeekOfYear.FirstFourDayWeek. In this example, we have set the FirstWeekOfYear property to FirstWeekOfYear.FirstFullWeek. Notice that the week number 1 now falls on the week starting Jan 3rd instead of Jan 1st. Date Limits When date limits are set via the MinDate and MaxDate properties, the Web Components Date Picker will not allow out-of-bounds dates to be picked or entered. All dates that fall outside the set date limits will be disabled and grayed out. In this example, the allowed dates are 1/15/2020-1/30/2020: Labels You can provide a text caption or description for the Web Components Date Picker by setting the Label property. In this example, the Label property is set to "Enter Date". When the date picker receives focus, the label will then float above the date picker. Placeholders When the value of the Web Components Date Picker is null, you can render a text hint to your end users by setting the Placeholder property of the component. Accessibility The Web Components Date Picker is now accessible by screen readers and provides full WAI-ARIA accessibility support and 508 compliance. 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.