A Current Row Indicator for HTML DataWindows

Jan. 1, 2009 12:00 AM

One of the typical problems developers face when using the HTML DataWindow (HTML DW) is that there's no SetRowFocusIndicator() method to allow users to see which row is the current one. This can confuse the user and lead to errors. For example, without a current row indicator users may not know which row will be deleted when they press a Delete button. This article describes a simple and effective technique for addressing this problem.

The Solution
Figure 1 shows an HTML DW with a current row indicator pointing at the second row.

The key to the proposed solution is that it avoids the need for a round-trip to the server. It simply uses the RowFocusChanged event to set the text in a Pointer computed column to "<<<" for the current row and to a blank (" ") for all other rows.

Changes to the DataWindow Object
As a first step, open your DataWindow object in the DataWindow painter and add a computed column called "pointer" with blank text as its expression. Figure 2 shows the Computed Column entry in the DataWindow painter.

As demonstrated in Figure 3, you must set the Tab Order for the Pointer column to nonzero because SetItem(), at least in the current version, doesn't work for HTML DW columns with a Tab Order of zero.

Since the Pointer computed column contains blank text, and since it has the same background color as the DataWindow, it doesn't show in the DataWindow. This allows you to keep using the same DataWindow object within regular DataWindow controls. This same line of reasoning explains why we place the Pointer column on the right - so we don't have to modify the layout of the existing columns.

Before you save and exit, make sure that the "Client Events" and "Client Scriptable" options are enabled in the "HTML Generation" properties tab for the DataWindow object. These options allow us to use client-side events, such as RowFocusChanged, and client-side methods, such as SetItem(), with the HTML DW control. Also, make sure the "Object Name" property is set to "htmlDW" for consistency with the name used in the following scripts.

Scripting the RowFocusChanged Event
Writing script for client-side HTML DW events requires that you define a function whose name is the control name (htmlDW in our case), followed by an underscore and the event name. Add the script provided in the code below to the HEAD section of the Web page where the HTML DW control resides. This function will be fired by the RowFocusChanged event in the HTML DW control. The function finds out how many rows are in the HTML DW control, and loops through these rows to set the Pointer column to blank. As its final step, the function sets the Pointer column in the current row to the indicator text.

<SCRIPT language=JavaScript>
function htmlDW_RowFocusChanged(newRow)
{var dwrows = htmlDW.RowCount();
for (var i=1; i <= dwrows; i++)
{ htmlDW.SetItem(i, 'pointer', " "); }
htmlDW.SetItem(newRow, 'pointer', "<<<");
};
</SCRIPT>

There's just one more minor point that requires your attention. After HTML DW actions such as Delete, Insert and Update, the reloaded HTML DW resets the current row. Furthermore, the RowFocusChanged event doesn't fire when the Web page loads. Hence, as shown below, you need to call htmlDW_RowFocusChanged() function each time the Web page loads.

<BODY bgColor=silver language=JavaScript onload="htmlDW_RowFocusChanged(1);">

Conclusion
Since this technique provides a current row indicator without a round-trip to the server, the performance is very good. Another advantage is that after adding the Pointer column to the DataWindow object, the DataWindow can continue to function in regular DataWindow controls.

The main limitation of this technique is that the Pointer column can't have a Tab Order of zero. While Internet Explorer respects the formatting of the column, Netscape Navigator ignores it and displays it as an Input column with a white background and sunken 3D borders. I hope future versions of the HTML DW support the SetItem() method for columns with a Tab Order of zero.

Related Links

▪ Figure 1

▪ Figure 2

▪ Figure 3

About Ido Millett
Ido Millet is an associate professor of MIS at Penn State Erie. His professional experience includes systems analysis and project management for large-scale information systems, consulting, and development of information systems. Over the last six years he has taught Advanced Applications Development courses using PowerBuilder.