Login | Register   
LinkedIn
Google+
Twitter
RSS Feed
Download our iPhone app
TODAY'S HEADLINES  |   ARTICLE ARCHIVE  |   FORUMS  |   TIP BANK
Browse DevX
Sign up for e-mail newsletters from DevX


advertisement
 

Display Recordset Data in a Paged Fashion, Part IIIa

Learn to use the Tabular Data Control (TDC) feature of Internet Explorer to let users navigate from page to page without making a round trip back to the server for data.


advertisement

f you have been following my previous articles, you've seen how to display recordset data in a paged fashion using a couple of different techniques. The first article, "Display Recordset Data in a Paged Fashion, Part I," displayed a static set of data from the recordset, making a round trip back to the server for each page to be displayed. Part II took a different approach and used some smart DHTML, CSS, and JavaScript to display all the data in a recordset, allowing the user to navigate from page to page without making a round trip back to the server. Another technique that achieves the same results is to use the Tabular Data Control (TDC) feature of Internet Explorer.

Now, I do not favor this technique very much. It has its pros and cons and the biggest con is that it will only work on Internet Explorer 4 and above. Netscape will not support this technique. However, I would still urge you to master this technique. You might encounter some cases where you want to use this technique (as in a controlled environment, like an intranet, where you have control over the browser being used). Not only that, understanding this technique will be key to mastering the next technique that is coming down the technology pipeline—XML Data Islands. That technology is something you will use in the near future to enhance your data-driven Web pages.

Mastering the Tabular Data Control is also the easiest way to learn about another useful IE-specific feature—Remote Data Services. While the Tabular Data Control is useful for displaying static data (usually present in flat-delimited text files), Remote Data Services allows you to access live data from a database.



Master the Tabular Data Control
If you use an ActiveX control in your Web pages, you need to provide information about the control as well as indicate where the user can download the control. The user is usually prompted with a dialog box before the ActiveX control is downloaded. Then the control needs to be installed before the Web page can use it. This entire process makes using ActiveX controls on Web pages less appealing. However, what if you could use ActiveX controls that are built into the browser itself? Then the user doesn't have to download anything; your Web page simply starts using the control.

When you install Internet Explorer on your machine, it silently installs a number of different ActiveX controls. These controls are lightweight and don't really cause any problems, so it's not like buying and installing a third-party grid control. Think of it as similar to the common controls that ship with Windows—the treeview control, the listview control, and so forth that are used by Windows Explorer.

The Tabular Data Control is one of these controls. The Tabular Data Control acts as an invisible container holding a set of records on your Web page that you can manipulate within your code. If you have programmed with Visual Basic, the Tabular Data Control is similar to the Visual Basic Data Control, except it is not visible. Like the Visual Basic Data Control, you can manipulate it using your code—you can move from record to record and access its data. Unlike the VB Data Control, the only kind of data that the Tabular Data Control can display is a delimited-text flat file on your Web server (usually a comma-separated values file).

Suppose you had a list of data that you wanted to display on your Web page—for example, a list of customer information. You could display the list as rows and columns using the HTML <TABLE> structure. For each row in the list, you would require one set of <TR></TR> tags, and for each column in the list, you would need a <TD></TD> pair. If you had a hundred rows in the list, you would need to code a hundred row tags for your HTML table.

The TDC allows you to do it with a single row tag. In addition, it lets you provide navigation capabilities. Let's take a look at the TDC in action. First, make sure you have a comma-separated list of values. Save it as "TheList.txt" on your Web server. Then proceed to create your HTML page. Using the Tabular Data Control consists of two steps: first declare the TDC object and set its data source, and then display the data from the TDC using an HTML construct like a table or a text box.

Declare the TDC Object and Set Its Data Source
To declare the TDC object, use the <OBJECT> tag:

<OBJECT ID="objTDC" 
CLASSID="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83"> 
<PARAM NAME="DataURL" VALUE="TheList.txt"> 
<PARAM NAME="UseHeader" VALUE="True">
</OBJECT>

Its name (given by the ID attribute) is objTDC. The Web browser knows what ActiveX control this refers to by its Class ID (a GUID or Globally Unique Identifier). When the browser parses this piece of code, it looks in the Windows registry to locate the Class ID and based on that it tracks down that the ActiveX control is located within the file TDC.ocx installed by IE on your machine. It then loads the TDC within your Web page. No downloads needed, no user prompting. The CLASS ID for the TDC is a fixed value and you cannot change it.

Within the TDC declare, you specify that the data for the TDC is obtained from the file "TheList.txt". That file is the comma-separated values list you generated. You also specify that field names within the file occupy the first row and that the TDC needs to use these field names. The DATAURL parameter indicates the location of your data file. This value could be the name of your text file, a valid URL, or a relative URL. For example, your statement for DataURL could take any of these forms:

<PARAM NAME="DataURL" VALUE="TheList.txt"> 
<PARAM NAME="DataURL" VALUE="/Data/TheList.txt"> 
<PARAM NAME="DataURL" 
VALUE="http://www.yourservername/Data/TheList.txt"> 

Display the Data From the TDC
You can display the data from the TDC using an HTML construct like a table or a text box. To display this list in the form of a table, you would normally use code similar to Listing 1. Listing 1 shows the first three rows out of about 100 rows in your list. This code results in a three-row table with a header row at the top. To use the data from the TDC, however, you will need to write only one row for the data and one row for the headings (see Listing 2).

You begin by declaring the <TABLE> tag and informing the browser that the data for the table is going to be provided by the TDC object (objTDC). You do this by using the DATASRC (Data Source) attribute:

<TABLE DATASRC=#objTDC>

The pound (#) character before the name of the TDC tells the browser that the data source is declared within the same HTML file.

The table is then split into two sections: <THEAD> and <TBODY>. The <THEAD> section contains the headings, which are hard coded—one <TH> for each column. Within the <TBODY> section, you code a single row using a single <TR></TR> pair. For each column of data you wish to display, you use a <TD></TD> tag pair. Within the cell (the TD), you use the HTML container tag <DIV> to place your data. You use the DATAFLD (Data Field) attribute to point to the field name within your list that will populate this cell:

<TD><DIV DATAFLD="CustomerID"></DIV></TD>

The browser then magically fills in all the columns for each row of the list. If you had 500 rows in your list, you would get a 500 row table automatically (see Figure 1). See this example in action at www15.brinkster.com/theasppro/10MinPagedRecs3A.asp. Listing 3 displays the code used in the example (I added a style sheet to make the table look neater).

You will notice that this process lacks page navigation. The Web browser simply dumps all the contents of the list on to the page—if there were 500 rows, you get all 500 rows, period. The next step is to allow for page navigation and ensure that the user can see only 20 rows at a time. To do that, you apply some of the properties of a table as well as some methods of the TDC.

To make sure the table displays only 20 records at a time, you use the DATAPAGESIZE attribute of the <TABLE> tag:

<TABLE DATASRC=#objTDC DATAPAGESIZE="20">

Now the page displays data from the TDC, but only the first 20 rows. Check it out at www15.brinkster.com/theasppro/10MinPagedRecs3B.asp.

In order to provide page navigation, you need to manipulate the table's code. You simply use the NextPage, PreviousPage, FirstPage, and LastPage methods of the table to move from page to page. To begin, provide a name for the table using the ID attribute so that you can access it from client-side script:

<TABLE DATASRC=#objTDC DATAPAGESIZE="20" ID="tblData">

Once you have named the table, you can create four buttons to help the user navigate:

<FORM>
<INPUT TYPE="BUTTON" VALUE=" |< " ONCLICK="tblData.firstPage();">
<INPUT TYPE="BUTTON" VALUE=" << " ONCLICK="tblData.previousPage();">
<INPUT TYPE="BUTTON" VALUE=" >> " ONCLICK="tblData.nextPage();">
<INPUT TYPE="BUTTON" VALUE=" >| " ONCLICK="tblData.lastPage();">
</FORM>

The code within the buttons is simple—you invoke the appropriate method to move to the next or previous pages. See the results of this code at www15.brinkster.com/theasppro/10MinPagedRecs3C.asp. Listing 4 displays the code that produces this page and Figure 2 shows what your users will see.

To recap using the Tabular Data Control, here are the steps that you and the browser take to achieve your results. You place a TDC object on the page using the <OBJECT> tag and the appropriate Class ID. Within the TDC, you indicate where to obtain the data using the DATAURL parameter. When the browser parses that code, it loads the ActiveX control silently on your Web page. The control then populates itself with the data from your data source—your text file. At this point, all the data resides in the memory of your browser client machine.

You place a table structure on the Web page, but instead of hard coding the values of the table cells, you code them as placeholders for the different columns of the Tabular Data Control. Also, you indicate to the browser what Data Source Object (DSO) the table points to by specifying the DATASRC attribute for the table and the DATAFLD attribute for the cells. The browser starts to render the table and for each row in the TDC recordset, it renders one row in the table over and over again till either all rows are completely rendered or the limit placed by your DATAPAGESIZE attribute is reached.

In the final example, when you click on each button, it simply invokes the appropriate method of the table. This causes the browser to cycle back and forth between the data in the TDC and render all the appropriate rows on the browser instantaneously.

Sort and Filter the Data
In addition to providing page navigation using the table's NextPage, PreviousPage methods, the TDC provides sorting and filtering capabilities. To sort the data in the recordset, you simply use the Sort property to set the fields to sort by and then the Reset method to repaint the screen:

objTDC.sort = '+CustomerName'
objTDC.reset();

To see this in action, modify the code of the previous example. In place of column headers as plain text, make the column headers as links so that clicking on the link will sort the data by that column. All you need to do is change the code that displays the headings from:

<TR>
	<TH>Customer ID</TH>
	<TH>Company Name</TH>
	<TH>Contact Name</TH>
	<TH>Contact Title</TH>
</TR>

to:

<TR>
<TH><A HREF="javascript:SortBy('CustomerID');">Customer ID</A></TH>
<TH><A HREF="javascript:SortBy('CompanyName');">Company Name</A></TH>
<TH><A HREF="javascript:SortBy('ContactName');">Contact Name</A></TH>
<TH><A HREF="javascript:SortBy('ContactTitle');">Contact Title</A></TH>
</TR>

Each heading is now wrapped around a call to a JavaScript function called SortBy. Each call passes the name of the field to sort by.

Later on in the page, you define the JavaScript function that simply uses the Sort property and Reset method of the TDC to perform its task:

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
function SortBy(strField) {
    objTDC.sort = '+'+strField;
    objTDC.reset();
}
//-->
</SCRIPT>

You now have instant sorting on your table. See this example in action at www15.brinkster.com/theasppro/10MinPagedRecs3D.asp.

You can achieve filtering using a similar technique. First, set the Filter property of the Tabular Data Control to a "field=value" criteria to filter on, and then use the Reset method to initiate the filter and repaint the screen. You can specify multiple filter criteria by separating each "filter=value" pairs with commas ("field1=value1, field2=value2").

For more information on how to use the Tabular Data Control, check out the Tabular Data Control Reference page at http://msdn.microsoft.com/workshop/database/tdc/overview.asp.

And before you inundate me with e-mail asking how to do a specific task using the Tabular Data Control, let me warn you—what I told you is what you get...nothing more. There is a limit to how much you can manipulate the appearance of the data within your table. Unlike VBScript code where you have total control, in this case, you can only do what the TDC and the table construct allows you to do.

This article should give you an idea of what you can accomplish with the Tabular Data Control. The TDC is useful when you want to display static lists that are stored as text files on your Web server—price lists, contact lists, phone directories, and so forth. If you were presenting an index of Web page titles, it would be easy to store the titles as a flat file and display them using the TDC. However, for real-time dynamic data, the TDC is not very useful—unless you come up with a batch process that periodically writes out the flat text file from data in a database. It would be much nicer if you could get the functionality of the TDC with the ability to view data from a database, which is what RDS allows you to do. You will see how to use the RDS feature of Internet Explorer next time.


Look Ma! I'm Viewing Data from a Database Using the TDCC
As I say, your comments and feedback on my articles are always welcome. And one such bit of feedback from reader Gary Pupurs shows a very ingenious technique to access real-time data from a database using the Tabular Data Control. Thanks for the tip, Gary.

Remember, the TDC uses a delimited text file for its data source. You can either have this text file residing on your Web server or, as Gary pointed out to me, you can create one on the fly and send it to the TDC as its data source. In our examples above, we used a static text file residing on the web server as the DataSource of the Tabular Data Control (using the DATAURL parameter). Instead, we can have the TDC's Data Source pointing to a "on-the-fly-created" text file.

To do so, create an ASP page whose only job is to read the database and dump its contents in a comma-separated format text file. Then point the TDC to the ASP page rather than to a text file—and voilà!—the TDC gets its data from the ASP page, which in turn gets its data from the database. Let's see how this is done.

If you have read one of my earlier articles on this site, "Got Data? Send It to Your Users as an Excel Spreadsheet from Your ASP Page," you know the principles of accessing data from the database and sending it as a comma separated list. Create a new ASP page called "TheList.asp" that accesses data from your database and does a "response.write" of the data using a comma separated list format. Then, modify your TDC object declaration to use the "TheList.asp" as its DATAURL rather than the "TheList.txt" that we were using before. And you have real-time database data viewable using the Tabular Data Control. To see this in action, and get a copy of the code, take a look at www15.brinkster.com/theasppro/10MinPagedRecs3E.asp.



   
Rama Ramachandran is the Vice President of Technology with Imperium Solutions and is a Microsoft Certified Solution Developer and Site Builder. He has extensive experience with building database systems and has co-authored several books including "Professional Visual InterDev 6 Programming" and "Professional Data Access" (Wrox). Rama teaches Visual Basic and Web development at Fairfield University and University of Connecticut.
Comment and Contribute

 

 

 

 

 


(Maximum characters: 1200). You have 1200 characters left.

 

 

Sitemap
Thanks for your registration, follow us on our social networks to keep up-to-date