Hwan Hong

XYChart's X-Coordinate Popups

2010-11-29T15:40:00Z

XYChart's XCoordinatePopup is a popup that is shown when the user's cursor hovers over the main area i.e. the rectangular region where datapoints are rendered. The popup's contents generally reveal details about the datapoints that lie along that particular x-coordinate. Note the difference between this and the plain popup behavior -- in that case, the popup's context is the datapoint being hovered over, rather than the datapoints along the x-coordinate. As such, one can think of XCoordinatePopup as a summary of the datapoints that are contained in that columnar area.

Features

When EnableXCoordinatePopup is set to true, the XCoordinatePopup's default popup will appear with basic datapoint values, such as in Figure 1.

Figure 1. Default XYChart XCoordinatePopup

The popup consists of two parts: an index template (the upper, darker gray section of Figure 1's popup) and a data template (the lower, lighter gray section of Figure 1's popup). By defining a custom template for both or either section one can override these default templates. For example, the XCoordinatePopup in Figure 2 is achieved using the following XAML:

<ch:XYChart.XCoordinatePopup>
  <ch:XCoordinatePopup>
    <ch:XCoordinatePopup.DataTemplate>
      <DataTemplate>
        <Grid>
          <caCalc:CalcEngine x:Name="calc0" >
          <caCalc:CalcEngineInput Id="context" Value="{Binding}" />
            <caCalc:CalcEngine.Expression>
              <sys:String>
                var a[]; 
                a[0] = S0.DataPoint.Y; 
                a[1] = S0.DataPoint.Brush; 
                a[2] = S1.DataPoint.Y;
                a[3] = S1.DataPoint.Brush;
                a
              </sys:String>
            </caCalc:CalcEngine.Expression>
          </caCalc:CalcEngine>
          <StackPanel Orientation="Vertical">
            <TextBlock
              Text="{Binding Output[0], ElementName=calc0, StringFormat=\{0:$#\,0\}}" 
              Foreground="{Binding Output[1], ElementName=calc0}" 
              FontSize="10" />
            <TextBlock
              Text="{Binding Output[2], ElementName=calc0, StringFormat=\{0:$#\,0\}}" 
              Foreground="{Binding Output[3], ElementName=calc0}" 
              FontSize="10" />
          </StackPanel>
        </Grid>
      </DataTemplate>
    </ch:XCoordinatePopup.DataTemplate>
  </ch:XCoordinatePopup>
</ch:XYChart.XCoordinatePopup>

Figure 2. Customized XYChart XCoordinatePopup

Classes

RelativePositionX, RelativePositionY -- Translation on the xy plane to shift the popup from its default position as a percentage.
XOffset, YOffset -- Translation on the xy plane to shift the popup from its default position in pixels.
IndexTemplate, DataTemplate -- Templates for the index (top) and value (bottom) parts of the popup. The datacontext for both is a SeriesCrossSection object.
- SeriesCrossSectionContext -- Object which provides the set of datapoints that lie along (or closest to) the x-coordinate where the cursor is currently sitting. Derives from Dictionary<string, DataPointContext> and implements the IPropertyProvider interface. For each datapoint in the cross-section there is an item in the dictionary. The key is the Series name and the value is the DataPointContext object related to the datapoint. The IPropertyProvider interface also allows one to access dictionary items in Calc script, such as in a CalcContainer.

In-depth Explanation

Let's take a closer look at the markup to generate the XCoordinatePopup in Figure 2.

Figure 3. Customized XYChart XCoordinatePopup markup

This XCoordinatePopup XAML defines a DataTemplate, which will overwrite the default. However IndexTemplate is not defined and so Chart will provide its own default template for the upper region of the XCoordinatePopup.
The CalcEngine, "calc0", sets the DataTemplate context as its Input.
Since the context is a dictionary, a Calc expression of "self[‘S0’]" would access the datapoint context of the datapoint from series “S0”. In this case however the SeriesCrossSectionContext class implements IPropertyProvider so we can use property syntax instead -- the cleaner and simpler "S0", the name of the Series object.
The CalcEngine computes values and brushes and returns them in an array; in this simple example it doesn't actually do anything to them but pass them back.
The value section of the XCoordinatePopup consists of two TextBlocks. These blocks bind text and brushes to the Output of the CalcEngine.

In summary, XCoordinatePopup is a useful way to interactively compare individual datapoints across multiple series. It consists of an IndexTemplate and a DataTemplate, and as such it is highly customizable.

An Overview of XYChart Areas

2010-11-25T19:55:00Z

The visual layout for ComponentArt's XYChart for DataVisualization control is composed of five regions called Areas. This article aims to give an idea of what these regions are, so that you can better customize your own.

Figure 1. shows the arrangement of XYChart's Areas:

Figure 1. XYChart Areas

(In pink) Legend - (Optional) Located at an edge of the chart, depending on the docking property
(Gray and white) The main chart area is represented by the XYChartMainArea; it holds the actual rendered graph (line, area, bar, etc.).
(In violet) There are four axis areas, one along each side of the main area: XAxisArea, YAxisArea, X2AxisArea, and Y2AxisArea.

By default XYChart populates the XYChartMainArea, XAxisArea and YAxisArea with content, such as axis annotations and coordinate system elements e.g. horizontal and vertical gridlines, stripes, etc. The secondary areas, X2AxisArea and Y2AxisArea, are left empty. All of these defaults can be overwritten with custom definitions. Setting DefaultAxisAnnotationsVisible to false also removes these built-in definitions. Note that if one defines an area, the default AxisAnnotation (or other element) can still be used by including an undefined instance of it.

e.g.

<ch:XYChart XPath="Date" Width="400" Height="300" ... >
  <ch:XYChart.XAxisArea>
    <ch:AxisCoordinates />  <!-- Including AxisAnnotation as undefined  will cause Chart to insert its default version -->
    <ch:ChartLabel>
      ... etc

Each Area is a Collection of elements. The visual tree of XYChartMainArea is defined by the elements of its underlying Collection, and these are displayed one on top of another. AxisAreas on the other hand are StackPanels are displayed in an inside-out order i.e. the first member is closest to the XYChartMainArea.

MainArea

XYChart's MainArea can be populated with the following classes:

Series Classes
- BarSeries - Datapoints are represented by individual bars (rectangles going left to right) or columns (rectangles going from bottom to top).
- AreaSeries - Datapoints are connected by a line, and the space between that line and the axis is given a fill.
- LineSeries - Datapoints are connected by a styled line.
- MarkerSeries - Datapoints are represented by a pre-defined graphic.
- CandleStickSeries - Financial stock datapoints are drawn using a "candlestick", a custom hybrid of line and bar charts.
- OHLCSeries - Financial stock datapoints are drawn using "Open-high-low-close" markers, which are similar to the candlestick marker.
- CompositeSeries - A series that is composed of a combination of other series.
Coordinate System Classes
- CoordinateLines - Horizontal and vertical lines used to demarcate intervals on the axes.
- CoordinateStripes - Horizontal and vertical regions between CoordinateLines.
- CoordinateSystemFrame - Border around the main area, as well as 3D considerations i.e. rendered depth.
Interaction Classes
- SeriesTracker - A reticle which highlights datapoints, following the user's cursor when on the chart main area.
- SeriesAnnotationTracker - A popup rendered over the series, following the user's cursor when on the chart main area.

I should mention that there is some overlap between the Series classes -- for example, AreaSeries also has a built-in LineSeries (though of course you can choose to turn this off), and Bar, Line, and Area series can have a MarkerSeries, so you don't need to add this series separately.

AxisAreas

The AxisAreas are generally comprised of the following classes:

AxisCoordinates - System used to uniquely determine the positions of datapoints. Inside an AxisArea, it includes the labels indicating value intervals.
AxisScrollBar - Scroll bar used to scroll and zoom through the main rendered area of datapoints, as shown in Figure 2.

Figure 2. Scroll bar

AxisLabel - Visual labels applied to the regions between intervals along the axis.
Example:

Figure 3. XAxisArea AxisLabel

In Figure 3 there are two custom AxisLabel definitions inside the XAxisArea. The first uses an in-line Calc expression to change the color of the AxisLabel instance background to red if the sum of the "Services", "DV" and "UI" datapoint Y values are less than "Expenses". The second simply outputs the Month string. The XAML that defines the above follows:

<ch:XYChart.XAxisArea>
  <ch:AxisLabels >
    <ch:DateTimeCoordinates From="1" Step="1" DateLevel="Month" />
    <ch:AxisLabels.Template>
      <DataTemplate>
        <common:CalcContainer> <!-- CalcContainer inside Common is only available in DataVisualization SP2+ -->
          <common:CalcContainer.Computing>
            <sys:String>
              var back = Black;
              var diff = Series.Services.DataPoints[Index].Y + Series.DV.DataPoints[Index].Y + Series.UI.DataPoints[Index].Y - Series.Expenses.DataPoints[Index].Y;
              if(0 > diff)
                  back=Red
              else
                  back=Black;
              Background = back;
              Data = diff
            </sys:String>
          </common:CalcContainer.Computing>
          <ch:FormattedTextBlock Format="$#,#" HorizontalAlignment="Stretch" Margin="0.5,1,0.5,1" TextAlignment="Center" FontSize="11" FontFamily="Calibri" Foreground="White"/>
        </common:CalcContainer>
      </DataTemplate>
    </ch:AxisLabels.Template>
  </ch:AxisLabels>
  <ch:AxisLabels >
    <ch:DateTimeCoordinates From="1" Step="1" DateLevel="Month" />
    <ch:AxisLabels.Template>
      <DataTemplate>
        <Border Margin="4">
          <TextBlock TextAlignment="Center" Text="{Binding FormattedStartValue}" />
        </Border>
      </DataTemplate>
    </ch:AxisLabels.Template>
  </ch:AxisLabels>
</ch:XYChart.XAxisArea>

ChartLabel - Custom XAML elements positioned between other axis area elements or between a legend and the rest of the axis area.
e.g.

Figure 4. ChartLabels

As you can see, XYChart is actually a pretty flexible control! I hope that this post has given you a better grasp of the vocabulary used to build an XYChart.

HOWTO: Using ComponentArt Themes with your Web.UI AJAX/MVC controls

2010-02-19T19:46:00Z

With Web.UI 2010, ComponentArt has introduced the ability to quickly apply a pre-built stylized design to UI controls in the form of Themes. This allows developers to concentrate on the functional behavior of the control, as design concerns are essentially moved into CSS. This has the added benefit of cleaning up the control definition code.

To use Themes with one of the pre-built styles included with the Web.UI installation package:
1. Set AutoTheming to true on the control.
ASP.NET AJAX:

<ComponentArt:Menu
  AutoTheming="true"
  ...

ASP.NET MVC:

<%= Html.ComponentArt().Menu()
  .AutoTheming(true)
  ...

The control will now render out CSS classnames on its elements, as well as generate any client templates and/or ItemLooks used by the Theme.

2. Supply the CSS classname definitions. The Web.UI installation package includes several pre-built themes. To use one add a link to the "theme.css" file, with the associated image files in the same directory as the stylesheet.

<link href="/themes/arcticwhite/theme.css" type="text/css" rel="stylesheet" />

Inside this stylesheet are all of the expected classes necessary to define the appearance of the control.

The resultant Menu with the ArcticWhite theme applied:

All Web.UI ASP.NET AJAX/MVC controls on the page with AutoTheming enabled should now be drawn with the Theme applied, without requiring setting any additional properties. Note that changing the applied Theme is literally as easy as changing the stylesheet link to point to a different "theme.css" file.

3. (Optional) Add Theme-coordinated icons.
a. Specify an IconCssClass/IconUrl on items.
XML:

<SiteMap>
  <item Text="File" >
    <item Text="New..." IconCssClass="icon-file-new" />
    <item Text="Open..." IconCssClass="icon-file-open" />
  ...

ASP.NET AJAX:

<ComponentArt:Menu ...>
  <Items>
    <ComponentArt:MenuItem Text="File">
      <ComponentArt:MenuItem Text="New..." IconCssClass="icon-file-new" />
      <ComponentArt:MenuItem Text="File"  IconCssClass="icon-file-open" />

ASP.NET MVC:

<%= Html.ComponentArt().Menu()
  ...
  .Items( o =>
  {
    o.Add().Text("File").Items( o2 =>
    {
      o2.Add().Text("New...").IconCssClass("icon-file-new");
      o2.Add().Text("File").IconCssClass("icon-file-open");

The predefined IconCssClass names are enumerated in the "icon-map.png" file inside the /themes/ folder.

b. Add a link to the "icons.css" file, with the associated "icons.png" file in the same directory as the stylesheet. If there are disabled items, make sure that "icons-disabled.png" is also in the directory.

<link href="/themes/arcticwhite/icons.css" type="text/css" rel="stylesheet" />

The resultant Menu with some icons defined:

Introducing Recurring Appointments for Web.UI Scheduler ASP.NET AJAX

2009-11-06T20:59:00Z

Web.UI 2009.2 saw the addition of the Scheduler for ASP.NET AJAX control, which handled one-time Appointment objects. With 2009.3 we have implemented RecurringAppointment objects, allowing one to define appointments that repeat and to fine tune the rules that describe that repetition pattern (SchedulerRecurrencePattern objects). Scheduler thus now contains two collection of objects, Appointments and RecurringAppointments. Exceptions, appointments that would otherwise be a member of the RecurringAppointment occurrences, are kept in the Appointments collection.

On the client Scheduler will examine its list of RecurringAppointments and dynamically generate Appointment instances, adding them temporarily to the Appointments list. These will be marked by having their instance property set to true and a non-empty RecurringAppointmentID. If an Appointment is found to have the same Start and RecurringAppointmentID as the potential instance it is considered an exception and the instance creation is skipped. In this way deleted instances are emulated by setting the exception's visible property to false.

Client events that are raised on that instance (which will be Appointment events) will need to be handled by the developer, to determine whether the user meant to apply the changes to that instance (in which case it should become an exception Appointment) or to the series as a whole, in which case the changes will apply to the RecurringAppointment. We do this in our Recurring Appointments and WebService - SOA.UI examples, in the Scheduler1_onAppointmentBeforeRemove() and AppointmentDialog_OnClose() event handlers.

Ok, let's take a look at how to make one of these new objects on the client. For this exercise I'll take some of the code from the Client-side API example and describe what's going on in detail.

1. Create the object and give it an ID. This ID will be used to track the RecurringAppointment's events so not having one isn't much of an option.

var recurringAppointment2 = new ComponentArt_SchedulerRecurringAppointment();

recurringAppointment2.set_id('R02');

2. Specify the range (ie. span of time) that the RecurringAppointment will apply to, which for these objects is defined in a Period object. When creating a ComponentArt_Period you can give it the StartDateTime and Duration in the constructor to save some typing. Don't forget that the months of JavaScript Date are 0-based indexed!

var range1 = new ComponentArt_Period(new Date(2009,10,2,0,0,0), 1000*60*60*24*5);

recurringAppointment2.set_range(range1);

3. Describe how the appointment instances should be repeated over the range. In this example we'll use an OccurrenceType of Weekly, with an Interval of 1 (ie. happening every week) and have the appointment happen on Mondays and Thursdays (1 and 4).

var pattern1 = new ComponentArt_SchedulerRecurrencePattern();

pattern1.set_interval(1);

pattern1.set_occurrenceType(2); // 2:weekly

pattern1.set_daysOfWeek([1, 4]);

recurringAppointment2.set_pattern(pattern1);

4. Define the Appointment that will be used as a template, whose properties will be copied by Scheduler into the appointment instances.

var appointment2 = new ComponentArt_SchedulerAppointment();

appointment2.set_appointmentID('R02_0');

appointment2.set_start(new Date(2009, 10, 2, 16, 0, 0));

appointment2.set_duration(1000 * 60 * 45);  // 45 minutes

appointment2.set_title('Swimming');

appointment2.set_description('');

recurringAppointment2.set_appointment(appointment2);

Hopefully this gives you a better understanding of our approach to repeated appointments. Thanks for reading!

Web.UI ASP.NET Grid: Synchronize Checkbox States with Row Selection

2009-06-16T00:00:00Z

One can use the Grid's itemBeforeCheckChange and itemBeforeSelect client events to synchronize the state of checkboxes and row selection. Some extra logic is required since checkbox clicks also trigger row selection. I use the load client event is used to initially set all checked rows as selected. The code here I used on the Grid Editing - Client Mode example, after adding DataField "Discontinued" as a boolean ColumnType="CheckBox" GridColumn.

ASPX:

<ComponentArt:Grid id="Grid1" ...>
  <Columns>
    <ComponentArt:GridColumn DataField="Discontinued" ColumnType="CheckBox" />
....
  <ClientEvents>
    <itemBeforeCheckChange eventhandler="Grid1_onItemBeforeCheckChange" />
    <itemBeforeSelect eventhandler="Grid1_onItemBeforeSelect" />
    <load eventhandler="Grid1_onLoad" />

JS:

var checkboxClick = false;
var rowClick = true;
function Grid1_onItemBeforeCheckChange(sender, e)
{
  checkboxClick = true;
}
function Grid1_onItemBeforeSelect(sender, e)
{
  if (checkboxClick)
  {
    checkboxClick = false;
    e.set_cancel(true);
    if (e.get_item().getMember('Discontinued').get_value())
    {
      rowClick = false;
      sender.select(e.get_item(), true)
    }
    else
    {
      rowClick = true;
      sender.unSelect(e.get_item());
    }
  }
  else
  {
    if (rowClick)
    {
      rowClick = false;
      e.set_cancel(true);
      // 6 is the column index of DataField "Discontinued"
      e.get_item().setValue(6, !e.get_item().getMember('Discontinued').get_value());
      sender.select(e.get_item(), true)
    }
    rowClick = true;
  }
}
function Grid1_onLoad(sender, e)
{
  var table = sender.get_table();
  sender.beginUpdate();
  for (i=0;i<table.getRowCount();i++)
  {
    if (table.getRow(i).getMember('Discontinued').get_value())
    {
      rowClick = false;
      sender.select(table.getRow(i), true);
    }
  }
  sender.endUpdate();
}

If you want selection to ONLY be done via the checkboxes, then modify the Grid1_onItemBeforeSelect client event handler to cancel user clicks.
JS:

function Grid1_onItemBeforeSelect(sender, e)
{
  if (checkboxClick)
  {
    checkboxClick = false;
    e.set_cancel(true);
    if (e.get_item().getMember('Discontinued').get_value())
    {
      rowClick = false;
      sender.select(e.get_item(), true)
    }
    else
    {
      rowClick = true;
      sender.unSelect(e.get_item());
    }
  }
  else
  {
    if (rowClick)
    {
      e.set_cancel(true);
    }
    rowClick = true;
  }
}

Web.UI ASP.NET Grid: Retrieve the filtered set of rows in Client RunningMode

2009-03-19T23:09:00Z

Currently the Grid doesn't expose the filtered set of GridItems after a search/filter action, preventing operations from being applied exclusively to that set of rows. Until Grid provides a method to access these, you can build your own set of filtered items by using the undocumented gridLevel FilterExpression property.

eg.
JS:

function getFilteredRows(grid)
{
    var table = grid.get_table();
    var filteredRows = new Array();
    for (i=0;i<table.getRowCount();i++)
    {
      var DataItem = table.getRow(i);
      if (eval(grid.Levels[0]. F i l t e r E x p r e s s i o n ))
      {
        filteredRows[filteredRows.length] = DataItem;
      }
    }
    return filteredRows;
}

You could then grab the filtered items (after a search/filter action) with something like
JS:

 
// grab the first search result's text in column 3
alert(getFilteredRows(Grid1)[0].getMemberAt(3).get_text());

Note: You'll have to remove the spaces from the " F i l t e r E x p r e s s i o n " above, as our blog software doesn't permit this string in codeblocks.

Convert Web.UI ASP.NET Grid into a data entry spreadsheet

2009-03-12T22:19:00Z

Using client templates and some JavaScript one can change Web.UI Grid's editing interface to behave more like a data entry spreadsheet. I started from the code suggestions given in Q10111 - HOWTO: Create a Microsoft Excel spreadsheet-like Grid and added keystroke handling for adding new rows and moving up and down between editable cells (Up Arrow and Down Arrow to go up and down, Tab and Shift+Tab to go right and left). I also added a delete template (a clickable X) so that users could easily remove rows. In my example I start with a blank Grid which is initially populated in the load client-event with a blank row.

ASPX:

<ComponentArt:Grid id="Grid1"
AllowTextSelection="true"
.... >
    <ClientEvents>
        <load eventhandler="Grid1_onLoad" />
    </ClientEvents>
    <Levels>
        <ComponentArt:GridLevel
        .... >
            <Columns>
                <ComponentArt:GridColumn DataCellClientTemplateId="DeleteCellTemplate" />
                <ComponentArt:GridColumn DataField="ProductName" DataCellClientTemplateId="EditCellTemplate" />
                <ComponentArt:GridColumn DataField="UnitPrice" DataCellClientTemplateId="EditCellTemplate" />
                <ComponentArt:GridColumn DataField="UnitsInStock" DataCellClientTemplateId="EditCellTemplate" />
            </Columns>
        </ComponentArt:GridLevel>
    </Levels>
    <ClientTemplates>
        <ComponentArt:ClientTemplate Id="EditCellTemplate">
            <input style="border-style:none;width:## DataItem.getCurrentMember().get_column().get_width() ##px;"
            id="textbox_## DataItem.get_index() ##_## DataItem.getCurrentMember().get_column().get_dataField() ##"
            type="text"
            value="## DataItem.getCurrentMember().get_value() ##"
            onfocus="this.select();editingTextboxId = this.id;editingClientId = '## DataItem.ClientId ##';
            editingDataField = '## DataItem.getCurrentMember().get_column().get_dataField() ##';
            editingIndexRow = ## DataItem.get_index() ##;"
            onKeyDown="return EditField_onKeyPress(event)"
            onBlur="saveCell('## DataItem.ClientId ##', '## DataItem.getCurrentMember().get_column().get_dataField() ##', this.value);" />
        </ComponentArt:ClientTemplate>
        <ComponentArt:ClientTemplate Id="DeleteCellTemplate">
            <a tabindex="-1"
            style="color:#f00;" 
            href="j__avascript:Grid1.deleteItem(Grid1.getItemFromClientId('## DataItem.get_clientId() ##'));">X</a>
        </ComponentArt:ClientTemplate>
    </ClientTemplates>

JS:

var editingIndexRow = -1;
var editingTextboxId = "";
var editingClientId = "";
var editingDataField = "";
var firstEditableDataField = "ProductName";

function Grid1_onLoad(sender, e)
{
	Grid1_addRow();
}
function saveCell(itemId, columnField, newValue)
{
	var row = Grid1.GetRowFromClientId(itemId);
	// Check if value was changed
	var oldValue = row.GetMember(columnField).Value;
	if (oldValue != newValue)
	{
	// Get column index for SetValue
		var col = 0;
		for (var i=0;i<Grid1.Table.Columns.length;i++)
		{
			if (Grid1.Table.Columns[i].DataField == columnField)
			{
				col = i;
				break;
			}
		}
		row.SetValue(col, newValue, true);
	}
	return true;
}
function Grid1_addRow()
{
	var col = 0;
	if (Grid1.get_table().getRowCount() > 0)
	{
		// cancel adding row if there is already a blank one
		var row = Grid1.get_table().getRow(Grid1.get_table().getRowCount()-1);
		for (var i=0;i<Grid1.Table.Columns.length;i++)
		{
			if (row.getMemberAt(i).get_text() != "")
			{
				Grid1.get_table().addRow();
				break;
			}
		}
	}
	else
	{
		Grid1.get_table().addRow();
	}
	setTimeout("setTextboxFocus();", 100);
}
function setTextboxFocus(datafield, index)
{
	if (typeof datafield == "undefined") datafield = firstEditableDataField;
	if (typeof index == "undefined") index = Grid1.get_recordCount() - Grid1.get_recordOffset() - 1;
	var elementId = "textbox_" + index + "_" + datafield;
	try
	{
		document.getElementById(elementId).focus();
	}
	catch (err)
	{
	}
}

function EditField_onKeyPress(e)
{
	if(!e) e = window.event;
	key = e.keyCode ? e.keyCode : e.which;
	if (key == 13) //enter
	{
		saveCell(editingClientId, editingDataField, document.getElementById(editingTextboxId).value);
		Grid1_addRow();
	}
	if (key == 38) //up
	{
		var index = editingIndexRow - 1;
		if (index > -1)
		{
			editingIndexRow = index;
			saveCell(editingClientId, editingDataField, document.getElementById(editingTextboxId).value);
			setTextboxFocus(editingDataField, index);
		}
	}
	if (key == 40) //down
	{
		var index = editingIndexRow + 1;
		if (index < Grid1.get_pageSize())
		{
			editingIndexRow = index;
			saveCell(editingClientId, editingDataField, document.getElementById(editingTextboxId).value);
			setTextboxFocus(editingDataField, index);
		}
	}
}

Here's a screenshot of what the Grid will look like:

Download the code for this example (8.56 KB)

Notes:
i. I tested against Internet Explore 7, Firefox 3, Chrome, Safari and Opera. I set UseSubmitBehavior to false on the ASP Button so that a postback doesn't occur when the user hits Enter, but this doesn't seem to work in Chrome or Safari. The Grid functionality should otherwise be identical across these browsers.
ii. I save cell data whenever key navigation occurs since the Up/Down/Enter strokes won't raise the blur event.
iii. I had considered adding Left/Right Arrow navigation but that would require remembering which column is currently in focus, which would greatly complicate things so I opted not to.
iv. The "save changes" ASP Button simply loops through the Items collection on the server and outputs their values so that you can get an idea of how to store the edits.
v. I give a tabindex of -1 to the DeleteCellTemplate anchor so that it's skipped during Tab navigation.
vi. In the JS section above you'll need to remove the underscores from "j__avascript" as our blog software doesn't allow that string.