Data Centers

Take advantage of the Tabular Data Control data source object in IE 4+

When you need to display comma-delimited text on a Web page, you can leverage Tabular Data Control data source objects in Internet Explorer 4+. Here's a look at how to do it, along with a generous helping of demo code.


Microsoft provides a number of data source objects with Internet Explorer (version 4.0 and later) that can help you display data on a Web page. A data source object can be implemented as an ActiveX object through the use of the HTML object tag. One of these data source objects, the Tabular Data Control, provides data binding for delimited text files. This means that you now have a way to use the ancient text files provided by people and companies still using versions of BASIC from the dawn of the personal computer era. Just in case you don’t remember your ancient history, these are the files with the fields delimited by commas, like the one shown in Listing A. With the Tabular Data Control data source object, it is possible to bring this data—if not the people (or their taste in music)—out of the 1970s.

The Tabular Data Control in action
Using the Tabular Data Control data source object requires at least two properties, DataURL and UseHeader. The DataURL property specifies the data file as either a file or a URL. The UseHeader property indicates that the first line of the data file contains the column names, which are used for data binding. For example, the first line in Listing A identifies the first column as Artist, the second as Song, and the third as Format.

DataURL and UseHeader are always used, but a number of optional properties can be useful as well. The first is the CharSet property, which identifies the data file’s character set. The FieldDelim property identifies the character that marks the end of a field in the data file. Listing A uses the default character, a comma. The Language property specifies the data file’s language; the default is eng-us. The TextQualifier property identifies the character that surrounds the individual fields. The RowDelim property identifies the character that marks the end of a row. The default RowDelim is the newline character.

Listing B shows a page that uses the Tabular Data Control data source object to display the delimited text file from Listing A. The combined result of these two files appears in Figure A.

Figure A


The usefulness of the Tabular Data Control data source object doesn’t end with displaying tabular information from a text file. You can also sort the tabular information on the client side by adding some JavaScript (Listing C) and making a few changes to the HTML for the table’s column headers (Listing D). This enables you to sort in either ascending or descending sequence based upon the values in the individual table rows.

In addition to sorting information, the Tabular Data Control data source object lets you filter out unwanted information. Let’s say, for example, that someone is really stuck in the 1970s and wants to display only artists and songs for 8-track. A filter provides a method of showing just the information for that format. Because we’re using a data source object, we can use less code than other methods would require. All that is needed is the JavaScript function shown in Listing E and the HTML select object shown in Listing F. Listing G contains the final version of our sample page.

Possible applications for the Tabular Data Control data source object include Web-based reporting in situations where the information doesn’t change often and setting defaults on a form. Although the Tabular Data Control data source object isn't as dynamic as I'd like, it does provide some useful functionality when working with somewhat static information.

 

 

 

 

 

 

 

Editor's Picks