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.

Published Jan. 1, 2009— Reads 3,191
Copyright © 2009 SYS-CON Media, Inc. — All Rights Reserved.
Syndicated stories and blog feeds, all rights reserved by the author.

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.

Enterprise Open Source Magazine Latest Stories . . .

So You Want to Use Open Source Cloud for Your Web Application

By Puneet Sangal

Before embarking on using open source cloud technology for your web property, a basic understanding of cloud, as it’s used in the industry, is essential. While there might be exceptions, here are the definitions. A software application delivered on the web instead of installing standa...

Cloud Expo NY: Predictive Analytics Leads to Successful Recommendations

By Elizabeth White

Businesses today generate billions of events or 100s of TBs of data in a month. These data contain valuable insights into customer behavior, key trends, buying patterns, etc. If these are successfully mined, they can lead to successful decision-making to maximize revenue and traffic fo...

GridGain and Grid Dynamics Enable eCommerce and Big Data Solutions

By Thomas Krafft

Grid Dynamics, an eCommerce technology solutions company, and GridGain Systems, makers of an open source in-memory platform for Big Data processing, on Wednesday announced the expansion of their partnership which began in 2008. Grid Dynamics provides personalization and big data solut...

Cloud Expo New York: The Dirty Little Secret of Private Cloud – Running It

By Liz McMillan

Private clouds solve many problems for enterprises and bring unique operational challenges along with them. There are dozens of companies of all sizes that will build you a private cloud and turn over the keys – then what? Trying to convert a traditional enterprise IT operations team t...

Software Defined Networking – A Paradigm Shift

By Kapil Raval

The networking industry has gone through different waves over last 30+ years. In the ’80s, the first wave was all about connecting and sharing; how to connect a computer to other peripheral devices and other computers. There were many players who developed technology and services to ad...

Cloud Expo New York: Private PaaS for the Enterprise and Beyond

By Liz McMillan

If your organization already uses virtualized infrastructure, you are well on your way to providing IT as a Service. But as businesses demand faster results in today’s competitive market, organizations look to gain more benefits from cloud computing than just virtualized infrastructure...