ASP.NET New Features - 2008 Volume 3

We're so excited to introduce our 3rd release of our NetAdvantage® ASP.NET controls this year, which feature the brand new faster, lightweight, high-performing WebDataGrid™ built upon the Aikido™ Framework specifically for your Web 2.0 applications. With this new WebDataGrid, once again, we put Web developers at the forefront of technology when it comes to creating scalable, lightweight AJAX-enabled user interfaces for the Web.

 

WebDataGrid – NEW!

This new lightweight, standards-based data grid control comes with countless features that make it perfect for today's Web application demands including:

• Lazy loading features like pagination to enable your application to load data on demand, significantly increasing initial page loads and application usability when dealing with large data sets.
• Sorting, filtering, selections, and column resizing: All of these behaviors and others are built directly into the data grid control so you simply need to switch on the behaviors and the WebDataGrid does the rest.
• Column templates and row edit template are supported so you can layout the data records in any way your end users want to work with it.
• Data update requirements inserting, updating, and deleting records within the data grid can all be taken care by WebDataGrid.

 

Core WebDataGrid Features

This new high-performance, flat data grid control complements our hierarchical data grid control, the WebGrid™ which you will still want to use when displaying data involving hierarchical data relationships.
Here's a sampling of the features in the NEW WebDataGrid:

 

Modular Architecture

The behaviors architecture of the WebDataGrid makes it easy to understand and code. In order to enable a behavior within the grid, all you need to do is add the behavior to grid's behaviors collection. Once a behavior is added you can now customize it within the designer dialog, markup or in code.

Figure 1: Customize Behavior in Markup

 

Add/Customize Behavior in Code

Activation activation = new Activation();
activation.ActiveCell = WebDataGrid1.Rows[5].Items[3];
activation.ActivationClientEvents.ActiveCellChanging = "Activating";
WebDataGrid1.Behaviors.Add(activation);

With any grid item state that is related to a certain behavior (e.g. active cell, sorted columns, selection), you will find it within the behavior itself. The APIs at both client and server are structured in a similar manner, so once you get a hang of one side of the story, you've learned the other one as well. Here are few examples of client and server code snippets.

	Server Code	Client Code
Get Active Cell	WebDataGrid1.Behaviors.Activation.ActiveCell	$find('WebDataGrid1').get_behaviors ().get_activation().get_activeCell()
Get Selected Cells	WebDataGrid1.Behaviors.Selection.SelectedCells	$find('WebDataGrid1').get_behaviors ().get_selection().get_selectedCells()
Get Sorted Columns	WebDataGrid1.Behaviors.Sorting.SortedColumns	$find('WebDataGrid1').get_behaviors ().get_sorting().get_sortedColumns()

 

 

 

 

 

 

 

 

Pay to play model

The grid is smart enough to optimize itself in terms of the mark up and JavaScript that gets passed onto the client depending on the behaviors you select. It will create client JavaScript events and objects of grid elements only if a feature requires them. This type of approach really helps you as a developer decide the features you want the grid to support, and the grid optimizes its rendering based on it.

 

Auto CRUD

This feature takes the WebDataGrid to a whole new level. Even when working within a disconnected protocol, you can have your grid stay connected to your data source using AutoCrud. If you have AutoCrud enabled (which it is by default), you don't need to handle events and update your data source, even when it is bound to your own custom collection. When you bind the grid, simply set grids DataKeyField property to the data source's key field and enable updates, deletes and inserts on the grid. Now, during any post backs the grid will automatically commit user changes from the client to your data source.

 

Control Templates

If you have been developing web applications and used grid controls, then you know about the Column templates for header, footer and cell contents. Also, if you've used WebGrid you must have come across row edit template too. The WebDataGrid comes with all of that (more details below), but in addition it introduces two new templates, Empty Rows Template and Error Template. These templates are special purpose template and are shown automatically when specific cases are met.



Error Template can let your application continue its execution even if an exception is occurred within the grid. As soon as grid acknowledges this case, it will look for an error template. If one is defined, the grid will replace its content area with the error template. This will have your application users see the rest of the page and let you supply a friendly message letting them know something went wrong. Great user experience!

Empty Rows Template are shown whenever there are no rows to display, it's that simple. This can happen when a user puts a filter condition that returned no rows; or you have a search box within your page and the search result bound to the grid contains no data; or even when a user goes ahead and deletes all rows within the grid. When any of these cases are met, the grid will check for Empty Rows Template and if there is one defined, it will display it within the grid area.

 

Client Bindings

If you are not a big fan of JavaScript but still want to make your application perform rich client side operations like updating rows using row editing templates, then here is a gift for you. Apart from using regular text boxes for data entry, you can pick any Infragistics editor and place it inside of the Row Edit Template. Use client bindings as shown below, associate the editor to a column. In the browser, when the user opens the template, all the values in the smart editors will be populated automatically from the row they are trying to edit. Any changes made by the user will be passed back to the row. You don't need to write any JavaScript code at all.



If you want to use your own editor within the template but still want to bind it using client bindings, then you can supply your own js code that will get and set the value to your editor. Click on the expansion button on the right of client bindings dialog to do so.

 

Styling your WebDataGrid

WebDataGrid contains all the style point that you would need to style the grid in the way you want. Everything can be styled using CSS and all grid elements that can be styled expose a CSS Class. You can even use NetAdvantage AppStylist® to style the WebDataGrid just like other Infragistics ASP.NET controls.

 

More Templating Options

WebDataGrid includes several other templates that you can use to provide a custom user interface for various elements of the control, including:

• Column Templates - Allows you to customize the Cell, Alternating Cell, Header and Footer of a column. Place an HTML control that you want to interact with on the client, or any other server controls that you want to display in any section of the columns.
  
  
  
  
• Pager Templates - Embed recognizable page numbers or commands, like previous and next, into the paging UI element displayed by the data grid. You can be as creative as you want to be using templates, easy command arguments, lets you hook a button to a specific pager command with ease. For example, you can place a button in the template and set the command to be "Prev" and it will automatically move to the previous page when clicked.
  
  

 

WebDataGrid Features to customize data displayed

Filtering

End users can apply their own filter criteria to a data bound WebDataGrid control, hiding the records that do not match the filter from display so that the user can work with only the data that they need. Filtering applies to basic text (equals, does not equal, begins with, ends with, contains, does not contain), dates (equals, between, before, after, this/next/last time period such as week or quarter) and numeric data (equals, does not equal, conditions such as greater-than or less-than-or-equal-to, and between) in columns. Users can change the filter on their own through a filter row allowing them to specify different filters on different columns in the data grid.

 

Paging

WebDataGrid can divide up the records in your large data sets so that end users only have to page through them, one page at a time. This enables your user interface to avoid scrolling, and to only present users with a digestible amount of information at any one time. A template that you can customize on the WebDataGrid allows the user to change the currently displayed page.

 

Sorting

Users can control the sorting of the columns in the WebDataGrid by clicking on the column header. A sort directional indicator appears indicating whether the column is sorted in ascending or descending order. Users can sort on multiple columns by holding down the Control or Shift keys as they click the column headers.

 

Intelligent Column Resizing

Depending on how you setup your column widths, the column resizing behavior will act accordingly. If you setup column widths in percentages such that it covers your entire grid area (column widths equals 100%), then the grid will make sure that it stays that way even when a user resizes a column.

In a percentage width scenario, when a user resizes one column, the grid will let the user change the width of that column, the total width gain or loss from the user action is then used to adjust other columns while maintaining their column widths to grid width ratio. If you set the entire grid’s width in percentage and resize the browser window, all columns maintain their column width to grid width ratio within the grid as well.

If you want pixel-based column sizing or implement your own column sizing for the grid, set up the column width in pixels to begin with. Upon column resizing by the user, the grid will use a scrollbar if needed when the user expands the column width beyond grid's width. You can even use the min and max column width settings to make sure the user remains within a certain width range. To customize it, simply listen to the column sizing client event and change the default behavior.

 

Selection

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

Blocks of cells can be selected by using the arrow keys of the keyboard to navigate through the cells of the grid. When the Selection Type is Extended and the user is holding down the Shift key, cells are selected to form a square with a top-left and bottom-right corner determined by the 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 the data grid. 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.

 

Row Selectors

Row selectors give your grid more of spreadsheet type of look, just like Excel. You can do operations on the row, like selecting row(s), or opening up a row edit template, or activating a row. There are events that you can set to do something different when a user clicks on a row selector.

Users indicate the state of a row by using row selector icons, for example, is the row selected, active, being edited or if it is one of the auxiliary rows, filter or add new row. You can also enable the grid to display row numbers on the row selectors.

 

Built-in Keyboard Navigation

Activation behavior supports keyboard navigation within the control. Users can use the standard navigation keys to navigate within the control. Arrow keys, tab and enter key lets the user navigate between grid cells. Using shift + enter key or shift + tab key enables them to navigate backwards within the WebDataGrid.

This also plays a key role when you want to support keyboard with other features of the grid. For example, with editing you want the user to be able to use the tab key to navigate while being able to edit cells at the same time. To support selection using keyboard, or to let the user do multi-sort on the grid while holding the ctrl key, enable activation.

 

Columns

The column structure of the WebDataGrid can be defined in two different ways. First, the data grid control can be allowed to automatically interrogate the data source it binds to so that it can generate a column structure much like the Autogenerate Columns feature in the WebGrid control. Otherwise, the data grid control allows you to manually define those columns displayed in the control, and this can be done through the WebDataGrid's rich design-time experience in Visual Studio® 2005 or Visual Studio 2008.

Column operations like sorting and filtering are based on the type of columns for optimization and ease of use. Depending on the type of column, the WebDataGrid will display the filtering options available for that type accordingly.

 

Data Binding

It's easy to bind any enumerable data sources to the WebDataGrid, such as a custom collection that implements IDataSource, IBindingList, IEnumerable, etc. It can also bind to the standard ASP.NET data source controls including LinqDataSource. WebDataGrid exposes a DataSource property (so you can set a reference to your enumerable data source), a DataSourceID property (if you want the data grid to locate your data source control dynamically at run-time elsewhere on the Page), and a DataBind method that you can call to bind the data grid to your flat, enumerable data source.

 

Editing Features within the WebDataGrid

Add Rows

You can programmatically add rows to the WebDataGrid on the client-side (through JavaScript), and you can enable a default user interface that allows your end users to insert new rows themselves. Pre- and post-events on the server-side are raised so that you can inject your own custom code to handle when a new row needs to be inserted into your data source.

 

Updating Rows

You can programmatically add rows to the WebDataGrid on the client-side (through JavaScript), and you can enable a default user interface that allows your end users to insert new rows themselves. Pre- and post-events on the server-side are raised so that you can inject your own custom code to handle when a new row needs to be inserted into your data source.

The row edit template gives you the ability to create a totally customizable template that the user can use to edit data within a row. This template can serve as a container for arbitrary data entry controls as called for by your data-oriented application, so if you want to include images and drop-down controls and masked editors then you are free to do so in any way you like. The row edit template also contains two specific button controls built-in, an OK and Cancel button, which you can use to commit changes back to your data source or cause the row edit template to close without committing changes.

 

Deleting Rows

You can programmatically remove rows from the WebDataGrid on the client-side (through JavaScript). You can enable the end user to delete rows on his/her own by pressing their Delete key if you enable Seleciton (a Selection Type of either Single or Extended is required).

 

Using Special Editors for Data Entry

In addition to using regular text boxes to edit the grid, you can also use special editors for editing for your columns depending on their data types. Grid supports a large pool of special editors that you can configure for your columns. Once an editor is set for a column, the grid will use that editor whenever the user tries to edit data within any of the cells that belong to that column. Similarly you can use the special editor within the Row Edit Templates as well, as described in the client bindings section above. The editors available for the WebDataGrid are:

• WebSlider™
• WebTextEdit™
• WebCalendar™
• WebNumericEdit™
• WebCurrencyEdit™
• WebDateTimeEdit™
• WebDateChooser™
• WebMaskEdit™
• WebPercentEdit™