ASP.NET New Features - 2009 Volume 2

We hit the sweet spot in this release delivering you the most powerful, high performance ASP.NET AJAX controls built on our Aikido™ Framework including the hierarchical data grid, month calendar, date picker, editors, and enhancements across the board to WebDataGrid™, WebSchedule™ plus other controls and indicators. All controls have also been tested against the new Microsoft® Windows® 7 operating system, so you can have happy users. Check out our new features below!

 

WebHierarchicalDataGrid™ - NEW!

Drill down into one or many parent-child relationships in your data using our newly released ASP.NET AJAX hierarchical data grid control, WebHierarchicalDataGrid. Users can expand (and collapse) records as they explore your data's relationships, and work with tabular data all in one place with rich functionality to add, edit, delete, sort, page and more. This ASP.NET AJAX hierarchical data grid control is designed for performance with features such as load on demand (both manual and automatic), a "pay-to-play" model of configurable behaviors and more. Check out all of these great features that you can now hatch into your own killer applications:


Pay-to-play model

The hierarchical grid is smart enough to optimize itself in terms of the markup and script that is rendered over the network depending on the behaviors you select. It creates client-side Javascript events and objects for those hierarchical grid elements only if a feature requires them. This strategy helps you decide the features you want the hierarchical grid to support, and delivers optimized performance when rendering based upon your choices.

Based on behaviors enabled within the WebHierarchicalDataGrid Pay-to-Play model, you can render Javascript, HTML, and Client Objects inside the browser.


Data Binding

It's easy to bind many hierarchical data sources to WebHierarchicalDataGrid, such as a custom collection that implements IDataSource, IBindingList, IEnumerable, etc. It can also bind to the standard ASP.NET data source controls and ADO.NET data sets, data tables and data views. If you have multiple flat data sources that you wish to combine, then you can bind WebHierarchicalDataGrid to our WebHierarchicalDataSource control. There are three key data binding features that every ASP.NET AJAX hierarchical data grid should have:

  • Master-Detail Data - WebHierarchicalDataGrid has no trouble handling master-detail (also sometimes referred to as parent-child) data relationships, and presenting this data to users in a convenient and easily used expandable user interface.
  • Self-Referencing Data - WebHierarchicalDataGrid allows your data to refer back onto itself. One of the canonical examples of self-referencing data is an otherwise flat employees data table in which some employees have a supervisory relationship to other employees. The hierarchy of this organizational chain can be handled perfectly easily by our ASP.NET AJAX hierarchical data grid.
  • Multiple Child Bands - WebHierarchicalDataGrid leaves no child band behind. Each parent record can have multiple parent-child relationships to different kinds of child data, and each of these different kinds of child data can reside as a different child band that can be expanded from the parent row.

WebHierarchicalDataGrid allows you to have as many parent-child data relationships as needed; each is related by a data key from one level to the next.


Control Templates

If you have been developing Web-based applications for long, then you know about the many uses for ASP.NET Column templates for defining complex header, footer and cell contents.

In addition to column templates, WebHierarchicalDataGrid also comes with support for an Empty Rows Template and an Error Template. These ASP.NET templates are special purpose templates that WebHierarchicalDataGrid shows automatically when specific cases are met:

  • Error Template - Continue with your application's execution even if an exception occurred within the hierarchical grid control. This template replaces the grid's content area, letting you supply a friendly message concerning what went wrong while keeping their great user experience with the rest of your application intact.
  • Empty Rows Template - This template is used when there are no rows to display, it's that simple. This may happen when the user is using some search functionality in your application and the rows of search matches ought to populate into your hierarchical data grid, but there are no search matches to return.

Single- and Multi-Selection

Users can select objects contained within the data grid, including cells, records (rows), and fields (columns). By setting the Selection Type to Extended, users can select a continuous range of these objects by holding down their Shift key and clicking on the first and last objects within a range. WebHierarchicalDataGrid then automatically selects a contiguous range of adjacent objects automatically. Users can also select a discontinuous range, by holding down their Control key and clicking on individual objects from anywhere within WebHierarchicalDataGrid, even across bands.

Blocks of cells can be selected by using the arrow keys of the keyboard to navigate through the cells of WebHierarchicalDataGrid. When the Selection Type is Extended and the user holds down their Shift key, cells are selected to form a square with a top-left and bottom-right corner determined by their arrow key movements.

Blocks of cells can also be selected by the user selecting an initial cell, and then clicking and holding the left mouse button as they drag the cursor across WebHierarchicalDataGrid. Cells are similarly selected to form a square with opposite corners determined by the initial cell's position, and where the user releases their left mouse button.

The WebHierarchicalDataGrid selection feature allows objects to be selected in a continuous or discontinuous fashion by enabling the Selection Type = Extended.

Add, Edit, Delete Rows

You can programmatically add, update and delete rows in WebHierarchicalDataGrid on the client-side (through Javascript), and your users can add, update and delete rows through the user interface. Rows can be added through the Add New Row that can be displayed in any band (topmost band or any child band). Rows can be deleted by selecting them using either single- or multiple-selection and then pressing the Delete key. Rows can be easily updated using editors suitable for their data type that you can associate with any of the columns as an editor provider.


Auto-Detect Editors

WebHierarchicalDataGrid can automatically detect and assign an editor provider for you based upon the field's DataType when that field is editable. WebDateTimeEditor™ will be associated with fields of type DateTime, WebNumericEditor™ will be associated with fields of a numeric type, etc., all without your having to do anything.

The Auto-Detect Editors feature within the WebHierarchicalDataGrid control will automatically provide the appropriate editor based upon the field’s DataType, when that field is in edit mode.


Sorting

Users can control the sorting of columns within WebHierarchicalDataGrid by clicking on the column header. A directional sort indicator appears to indicate whether the column's values are being sorted in ascending or descending order. Users can sort on multiple columns by holding down the Control or Shift keys as they click each of the columns’ headers. You can also pre-set the WebHierarchicalDataGrid to show specific columns already in sorted order.


Paging

WebHierarchicalDataGrid can divide records in your largest data sets into pages, so that end users only have to page through them, one page at a time. Because it can have many child bands, each child band in WebHierarchicalDataGrid can be given its own page size (that way when your users expand a parent row, they aren’t greeted by thousands of child rows, but easily-digestible pages of data). Paging helps you avoid making your users have to scroll, and it can facilitate rapid, random-access to the page or pages containing the information your users want.

The pagination feature within the WebHierarchicalDataGrid control splits large amounts of data into multiple pages, eliminating the need for users to scroll a single page to view the information.


Column Hiding

WebHierarchicalDataGrid allows you to hide columns on the client- or server-side. For example, you may want to hide columns from view that contain machine-readable key values which would be meaningless to your business users. Hidden fields can still be accessed through code, as their values are still rendered down to the client, but they are just not shown in the user interface.


Keyboard Navigation

Users can navigate WebHierarchicalDataGrid using their keyboard, both to move around, scroll and control activation and selection, just by setting its TabIndex property to a positive integer. Here are a list of supported key presses:

  • TAB – Makes the next row/cell active.
  • SHIFT+TAB – Makes the previous row/cell active.
  • CTRL+TAB – Switches between an active row and an active cell.
  • Spacebar – If the active cell is a checkbox, spacebar toggles its checked state; otherwise, spacebar selects/deselects the active row.
  • LEFT ARROW – When a cell is active, this makes the next cell active. When a row is active, expands the child row island (if any).
  • RIGHT ARROW – When a cell is active, this makes the previous cell active. When a row is active, collapses the child row island (if any).
  • UP ARROW – Makes the row/cell in the previous row active. Applies only within the current row island. Press SHIFT+TAB to move to a parent row from the first row in a row island.
  • DOWN ARROW – Makes the row/cell in the next row active. Applies only within the current row island. Press TAB to move to the next row in the parent band from the last row in a row island.
  • CTRL+DOWN ARROW – Retrieves the next batch of rows through AJAX when using XML rendering.
  • SHIFT+UP (or DOWN) ARROW – Includes the row above (or below) in a multiple-row selection. Applies only within the current row island.
  • ENTER – Triggers a click if the cell is a cell button. Navigates to a cell's Target URL, if one exists.
  • DEL – Deletes the current row.
  • +/- – Pressing the + key expands the active row if it has children. Similarly, pressing the – key collapses the active row.

WebEditors™ - NEW!

We have added 6 new ASP.NET AJAX editors in this release that are built upon the Aikido™ Framework:

  • WebMaskEditor - Features an input mask displayed during editing for guiding users to enter data that complies with your format constraints
  • WebDateTimeEditor - Features improved localization and DateTime input/display formatting
  • WebNumericEditor - Features general-purpose data entry of numbers with spin buttons
  • WebCurrencyEditor - Features support for entering amounts of currency
  • WebPercentEditor - Features support for entering percentages
  • WebTextEditor - Features multi-line and password (typed characters appear as asterisks) modes

The WebTextEditor provides a means for multi-line text editing for a single piece of data.


Spin Buttons

You can optionally add support for spin buttons on editors to give users an alternative means of incrementing or decrementing the editor's value. If you bind a list of values to a text editor, your users can use the spin buttons to select one of the choices in that list (like a dropdown – without the dropdown).

Allow users to edit text or numerical values with the click of a button with the WebEditors spin buttons feature.


Prompt Text

Each editor can be displayed with a watermark (or prompt text for when it has a null value) which disappears as soon as the editor receives focus. If the user sets focus elsewhere without specifying a value, this watermark will reappear.

The prompt text feature within the WebEditors control provides users the guidance they need by displaying instructional watermark text in fields with a null value.


ASP.NET Validator Support

What would a set of ASP.NET AJAX editors be without validation support? With WebEditors you enjoy complete ASP.NET validator support so that you can stop submissions that don't meet the most fundamental of your business rules where it is least costly to stop them – at the client's browser.

The validator support feature within the WebEditors control provides client-side stop-gap measures to ensure all appropriate information is entered.


Easy Localization

Just set the culture information and our WebEditors take on the customary form that local users expect, resulting in a seamless localization experience for your global Web-based applications.

Setting the culture used in the WebEditors will automatically localize the information for a better global user experience.


WebMonthCalendar™ - NEW!

A new ASP.NET AJAX calendar control in the form of WebMonthCalendar makes its debut in this release, boasting superior stylability, navigation and standards conformance that its having been built upon the Aikido Framework enables, plus one additional ability many customers have asked us for – week number display!

The week number display feature within the WebMonthCalendar control provides enhanced data when viewing calendar information.


Fully-Localizable and Stylable

Select any culture and have the month calendar automatically adopt the days of the week and date formatting appropriate to that culture.

The WebMonthCalendar localization feature allows for the culture-specific days and date formatting to be displayed.


Style sets are included for many popular looks and feels, from Office 2007 to Appletini. The individual styling points of the month calendar include all of the following:

  • Custom day styles
  • Weekend styles
  • Active day styles
  • Hover styles
  • Disabled styles
  • Selected styles
  • Styles for days in other months

The WebMonthCalendar styling feature allows users to select a theme for which their calendar will display.


Select Anything from Dates to Decades

Use WebMonthCalendar in a variety of scenarios including single- and multiple selection of contiguous dates (date ranges) as well as non-contiguous dates (by holding down the Control key). In its view selection mode, users are able to pick the month from a year, the year from a decade, decades from a century, or centuries from a millennium.

The WebMonthCalendar selection feature allows dates to be selected in a continuous or discontinuous fashion by utilizing the Ctrl key on the keyboard.


Windows Vista®-style Keyboard Navigation

Users familiar with the key mappings of the Windows Vista operating system will feel right at home when using the keyboard to navigate through the different views and select dates on WebMonthCalendar in your ASP.NET AJAX applications.

  Month Calendar Month Selection Year Selection Decade Selection
Up Arrow Key Go to the same week day in the previous week Go to the month above in the same year. If in the top row, then go to the last month in the same column in previous year Go to the year above in the same decade. If in the top row, then go to the last year in the same column of the previous decade Go to the decade above in the same decade selection view. If in the top row, then go to the last decade in the same column of the previous decade selection view
Down Arrow Key Go to the same week day in the next week Go to the month below in the same year. If in the last row, then go to the top month in the same column in next year Go to the year below in the same decade. If in the last row, then go to the top year in the same column of the next decade Go to the decade below in the same decade selection view. If in the last row, then go to the top decade in the same column of the next decade selection view
Right Arrow Key Go to the next day. If on the last day of the month, go to the first day of the next month Go to the next month. If on December, go to January of the next year Go to the next year. If on the last year in that decade, go to the first year in the next decade Go to the next decade. If the last decade in the “decade selection,” go to the next century. If the last century, do nothing
Left Arrow Key Go to the previous day. If on the first day of the month, go to the last day of previous month Go to the previous month. If on January, go to December of the previous year Go to the previous year. If on the first year in that decade, go to the last year in the previous decade Go to the previous decade. If the first decade in the “decade selection,” go to the previous century. If the first century, do nothing
Control+Up Arrow Key Move to Month Selection View Move to Year Selection View Move to Decade Selection View N/A
Control+Down Arrow Key N/A Move to Month Calendar View Move to Month Selection View Move to Year Selection View
Control+Right Arrow Key Move to the same day in next month. If next month doesn’t contain that day, then go to the last day in the next month Move to the same month in the next year Move 10 years forwards Move to the next Decade Selection View. If you are on the last one, then move to the last decade in that view
Control+Left Arrow Key Move to the same day in previous month. If next month doesn’t contain that day, then go to the last day in the previous month Move to the same month in the previous year Move 10 years backwards Move to the previous Decade Selection View. If you are on the last one, then move to the first decade in that view
Escape Key N/A Move to Month View without selecting anything
Home Key Move to the first day in that month Move to first month in this view Move to the first year in this decade Move to the first decade in this century
End Key Move to the last day in that month Move to the last month in this view Move to the last year in this decade Move to the last decade in this century
Space / Enter Key Select Date Select Month and move to Month Calendar View Select Year and move to Month Selection View Select decade and move to Year Selection View
Page Up Key Behaves the same as the Control + Left Arrow Key
Page Down Key Behaves the same as the Control + Right Arrow Key

 

WebDatePicker™ - NEW!

Initially displayed to users like a date-editing field, but one which can dropdown a month calendar so that users can opt to pick a date from a calendar, WebDatePicker is an ideal editor for inclusion in your data grids and Web forms for date entry where you might have used WebDateChooser™ in the past.

Add the WebDatePicker control to your data grids or web forms to allow users to select a specific date from a drop down "calendar" field.


By combining all of the abilities of the new WebMonthCalendar (see above) with all of the enhanced date editing functionality of the new ASP.NET AJAX-powered WebDateTimeEditor™ into a dropdown date picker that is fully stylable and works across browsers, you can deliver this dual functionality anywhere in your Web applications to improve your user’s experience.


Reusable Calendars

No matter how many WebDatePickers you may have on a page at one time, they all share the same WebMonthCalendar (since only one calendar can appear dropped down at any given point in time). This lightens the client-side footprint considerably in terms of markup and memory overhead. Your users will enjoy the greater responsiveness, and overall faster performance of your Web application.


Animation

You can apply animated effects to the drop down calendar of WebDatePicker as it expands or collapses itself.

 

WebDataGrid - Enhanced!

Column Fixing

WebDataGrid allows you to fix columns to the left or right sides of the data grid, making it easier for your users to pin one or a few columns in place so that they can be conveniently referenced without having to scroll back and forth horizontally to do so. You can style the fixed columns to give them their own distinguished column style, and adjust the position where the pushpin button appears in the column headers.

Pin columns in a data grid so that information is easily accessible without requiring users to scroll.


Virtual Scrolling

WebDataGrid will send partial data down to the client at first that is enough to display the visible rows on screen for the user, and then requests additional rows asynchronously as the user scrolls so that they are available when they come into view. This improves the performance of the data grid, allowing it to display its visible rows almost immediately, and lets the user navigate through large volumes of data without having to send the entire data source down to the client.

There are two modes for virtual scrolling that are supported:

  • Virtual - Users can instantly scroll through the rows that are already cached within WebDataGrid. When users attempt to scroll beyond these cached records, an AJAX request retrieves the next batch of records for them to see.
  • Deferred - Users can scroll through rows by using the vertical scrollbar, however WebDataGrid only jumps to the rows at the scroll bar position when the user finishes scrolling (this has the benefit of avoiding any intermediate AJAX requests). While the user scrolls, the index of the first visible row will be displayed in a tool tip so the user can gauge through how many rows s/he has moved.

WebDataGrid also features several new properties that allow you to tune the performance based on the characteristics you would like your users' viewing experience to exhibit. For example, you can direct WebDataGrid to initially pull down more rows if most user interaction can be satisfied by only the first screenful or two of data, such that very few of your users ever need an asynchronous request.


Auto-Detect Editors

WebDataGrid can automatically detect and assign an editor provider for you based upon the column's DataType when that column is editable. WebDateTimeEditor is associated with columns of type DateTime, WebNumericEditor is associated with columns of numeric type, etc., all without your having to do anything. One set of editor providers will be shared no matter how many data grids you may have on the page, resulting in a faster and lighter weight rendering with minimal overhead.


Client-Side Events

Enjoy greater client-side interaction through the addition of new client-side events. There are new client-side events for a variety of keyboard, mouse and context menu actions.

The client-side event feature notifies users of the many actions they can take within the data grid.


Column Hiding

WebDataGrid now allows you to hide columns on the client- or server-side. For example, you may want to hide columns from view that contain machine-readable key values which would be meaningless to your business users. Hidden fields can still be accessed through code, as their values are still rendered down to the client, but they are just not shown in the user interface.

 

WebScheduleGenericDataProvider™ - NEW!

This new addition to the WebSchedule™ family of controls is a data provider control that lets you more easily use any data source with its own schema to connect with your WebSchedule views, or combine data that is combined from multiple different kinds of data sources (for example, when some data is coming from a relational database and other data is coming from an XML document). It supports the use of ASP.NET DataSource controls, custom Collections and even ADO.NET objects such as DataTable, DataView and DataSet.

Easily use any data source or combine multiple data sources to connect to your WebSchedule views.


Easily Access Additional Data Fields

WebScheduleGenericDataProvider allows you to pull data from any supported data source (even simple lists) by setting the DataSource/DataSourceID properties for each and every data field. By accessing the new DataRow property on Activity (e.g., Appointment) and Resource objects, you can retrieve any data from the underlying record through the data source, even if some of its fields are not mapped to these objects’ properties. This allows you to have any number of additional columns in your schema that will be available to you at run-time.


Recurrences Made Flat

In order to eliminate the need to perform transactions across entities, WebScheduleGenericDataProvider has simplified the Activity-to-Recurrence entity relationship to one property stored on the Activity, named the RecurrencePattern.

RecurrencePattern encodes all of the information necessary for the recurrence in a varchar() array (string) data value that can be read, updated, and deleted with its root activity. Data read and written by WebScheduleGenericDataProvider must use the RecurrencePattern. Please see the API documentation for details on how the RecurrencePattern has been encoded.

 

WebSchedule™ - Enhanced!

We have added several new and often-requested features to the WebSchedule (besides the brand new generic data provider described above). These ASP.NET scheduling features are sure to delight your users.


Multi-Day Event Banner

When using the WebDayView™ and WebMonthView™ you can now have multi-day event banners spanning continuously across several days in the all day event area of these controls. Optimized layout ensures that your multi-day events arrange themselves intelligently, thereby making the best use of the space available to them. Plus, your event banners can display start or end times with an arrow when an activity spans more days than are currently visible within the WebSchedule view.

The multi-day event banner feature within the WebSchedule conveniently displays the event across all of the appropriate days in the calendar.


Multiple Resources on a Schedule View

WebDayView and WebMonthView both now support displaying multiple resources at the same time, on the same WebSchedule view simultaneously. A scheduling resource can be any person, place or thing for which activities are scheduled (e.g., a resource can be an employee, a conference room, or a piece of A/V equipment). You can designate one resource as being active, so that his activities appear in an active style. All other resources have their activities shown in an inactive style. You can customize the styles used by resource, although they default for you to the out-of-the-box Microsoft Outlook® 2007 color scheme.

The multi-resource feature within the WebSchedule allows for multiple resources' events to be displayed within one calendar view with specific color themes to differentiate.


Broadened Browser Support

WebSchedule now supports Microsoft Internet Explorer® 8, Safari 4, Google® Chrome™ 2.0 and Mozilla® Firefox® 3.5.

Note: The stored procedures for WebSchedule 9.2 have changed. If you are using a pre-2009 Volume 2 version of the Microsoft SQL Server® WebSchedule database then you must run the Upgrade2to9.2.sql script to update the stored procedures in your existing database to the latest version for the WebSchedule 9.2 controls to work properly.

 

WebDataTree™ - Enhanced!

We have enhanced our ASP.NET AJAX tree control so that it allows you to disable Auto-Checking of checkbox tree nodes. For example, normally when a user checks a child node in WebDataTree, its parent node (if unchecked) becomes partially checked (or fully checked, if the one child tree node is the only child tree node). This was automatic, but through disabling Auto-Checking of checkbox tree nodes you can now stop this behavior from happening when it is not needed.

Users can control whether to use Auto-Checking of checkbox tree nodes.

 

WebDropDown™ - Enhanced!

We have added the new AutoSelectOnMatch property to the WebDropDown control so that you can enable or disable the auto-selection that occurs when a value is matched. This property is turned on by default.

 

AJAX Indicator – NEW!

One last gizmo we thought you would enjoy is the AJAX indicator, a customizable, animated indication of potentially long-running AJAX operations such as refreshing your application data, loading a large document, or updating countless configuration settings. We admit that we didn’t just create this for you, but we use it extensively ourselves and it has been built-in to the WebDataGrid, WebHierarchicalDataGrid, WebDataTree and WebDropDown controls. It allows you control over modality, so that you can suspend interaction with the underlying control or page until your long-running AJAX operation completes. Now you can use the AJAX Indicator yourself on your own pages.

Use the AJAX Indicator to identify potential long-running AJAX processes.

 

All ASP.NET AJAX Controls – Enhanced!

We have enhanced all of our ASP.NET AJAX controls (that is, the controls based on the Aikido Framework) so that they support minimalized Javascript. This produces a smaller footprint on the client, with a commensurate increase in performance. For example, a 100KB script file is compressed down to a 70 KB script file now, and that will load in 30% less time than before.

We have also implemented support for Microsoft Internet Explorer 8, Safari 4, Google Chrome 2.0 and Mozilla Firefox 3.5 across all of our ASP.NET AJAX controls.