Using the Tabular Data Control

Now that we've covered some of the theory involved in DHTML data binding, let's take a look at some real examples. For the TDC, we'll look at two code samples—a simple example and then a more advanced example.

Sorting a Simple HTML Table

The code below shows the source code for TDC.htm. This file, along with all the other related files, is included on the CD-ROM under the CHAP16 folder.

 <HTML> <HEAD> <META name=VI60_defaultClientScript content=VBScript> <META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0"> <SCRIPT ID=clientEventHandlersVBS LANGUAGE=vbscript> <!-- Sub Col1_onclick     CTDCCtl1.Sort = "A"     CTDCCtl1.Reset End Sub Sub Col2_onclick     CTDCCtl1.Sort = "B"     CTDCCtl1.Reset End Sub Sub Col3_onclick     CTDCCtl1.Sort = "C"     CTDCCtl1.Reset End Sub Sub btnFilt_onclick     CTDCCtl1.Filter = "A=1"     CTDCCtl1.Reset      End Sub Sub btnReset_onclick     CTDCCtl1.Filter = "A=*"     CTDCCtl1.Reset End Sub --> </SCRIPT> </HEAD> <BODY> <H2>Simple Table (Using the Tabular Data Control)</H2> <HR> <OBJECT CLASSID="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83"  id=CTDCCtl1 VIEWASTEXT> <PARAM NAME="DataURL" VALUE="TDC.csv"> <PARAM NAME="UseHeader" VALUE="True"> </OBJECT> <TABLE BORDER=1 DATASRC="#CTDCCtl1"> <THEAD> <TR> <TH ID="Col1">1st<TH ID="Col2">2nd<TH ID="Col3">3rd <TBODY> <TR> <TD><SPAN DATAFLD=A></SPAN> <TD><SPAN DATAFLD=B></SPAN> <TD><SPAN DATAFLD=C></SPAN> </TABLE> <P> <INPUT type="button" value="Filter" id="btnFilt" name="filter"> &nbsp; <INPUT type="button" value="Reset" id="btnReset" name="reset"> <P> <FONT face="" size=2> Click a column heading to sort the table by that column </FONT> </BODY> </HTML> 

The TDC.htm file demonstrates how to use the TDC to retrieve data from a comma-delimited text file named TDC.csv and display it within the browser in the form of an HTML table. Notice that the code consists of the <OBJECT> tag for the TDC, plus an HTML table for the display. Also notice the DATASRC and DATAFLD attributes that are used to bind the data to the HTML table. And that each column within the HTML table has been given an ID. This allows us to reference the various columns in our script. Finally, client-side VBScript has been used to trap several events: the onclick event for the column headers is used to sort the data by the values in that column. Also, the Filter and Reset buttons are used to demonstrate how to filter the data and reset the data back to its original setting.

Figure 16-2 shows how this page appears within the Internet Explorer 4.0 browser. When you click the column headers, you'll see that the table is sorted so that the numbers appear in ascending order for that particular column. This is done on the client side with no round-trip back to the TDC.csv file.

click to view at full size.

Figure 16-2. The TDC.htm file within the Internet Explorer 4.0 browser.

Sorting and Searching Using an HTML Table

The next example takes the functionality of the TDC a little further. We'll use the TDC to retrieve information about customers and use an HTML table to navigate through the resultset and to search for data by customer ID, company name, or contact name.

Note
If you want to add the TDC ActiveX control onto your Visual InterDev Toolbox just bring up the Customize Toolbox dialog box and then browse through the list of ActiveX controls until you find the control with the name Tabular Data Control. This control is named tdc.ocx and is usually installed in the C:\WINNT\System32 folder if you are running Windows NT. Having the TDC in your Toolbox makes it easy to add it to your Web pages instead of having to manually code the <OBJECT> tag and the CLASSID attribute.

The code below shows the source code for TDC_Customer_List.htm. This file, along with all the other related files, is included on the CD-ROM under the CHAP16 folder.

 <HTML> <HEAD> <META name=VI60_defaultClientScript content=VBScript> <META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0"> <SCRIPT ID=clientEventHandlersVBS LANGUAGE=vbscript> <!-- Sub Col1_onclick     CTDCCtl1.Sort = "CustomerID"     CTDCCtl1.Reset End Sub Sub Col2_onclick     CTDCCtl1.Sort = "CompanyName"     CTDCCtl1.Reset End Sub Sub Col3_onclick     CTDCCtl1.Sort = "ContactName"     CTDCCtl1.Reset End Sub Sub search_onclick     If listbox.selectedIndex = 0 Then         col = "CustomerID"     Elseif listbox.selectedIndex = 1 Then         col = "CompanyName"     Else         col = "ContactName"     End If     str = col & "=" & CStr(find.value)     MsgBox(str)     CTDCCtl1.Filter = str     CTDCCtl1.Reset      End Sub Sub reset_onclick     CTDCCtl1.Filter = "CustomerID=*"     CTDCCtl1.Reset End Sub Sub next_onclick     datatbl.nextPage End Sub Sub previous_onclick     datatbl.previousPage End Sub --> </SCRIPT> </HEAD> <BODY> <H3>Customer List (Using the Tabular Data Control)</H3> <HR> <TABLE cellpadding=3> <TR> <TD>Find</TD> <TD><INPUT id=find name=find></TD> <TD>In Column</TD> <TD> <SELECT id=listbox name=listbox> <OPTION selected>Customer ID</OPTION> <OPTION>Company Name</OPTION> <OPTION>Contact Name</OPTION> </SELECT>  </TD> </TR> </TABLE> <OBJECT classid=clsid:333C7BC4-460F-11D0-BC04-0080C7055A83      id=CTDCCtl1 VIEWASTEXT>     <PARAM NAME="UseHeader" VALUE="1">     <PARAM NAME="DataURL" VALUE="Customers.csv"> </OBJECT> <TABLE id=datatbl BORDER=1 DATASRC="#CTDCCtl1" DATAPAGESIZE="8"> <THEAD> <TR> <TH ID="Col1">CustomerID <TH ID="Col2">CompanyName <TH ID="Col3">ContactName</TR> <TBODY> <TR> <TD><SPAN DATAFLD=CustomerID></SPAN> <TD><SPAN DATAFLD=CompanyName></SPAN> <TD><SPAN DATAFLD=ContactName></SPAN></TR></TBODY> </TABLE> <TABLE cellpadding=3> <TR> <TD> <INPUT type="button" value=" <- " id=previous name=previous> </TD> <TD> <INPUT type="button" value=" -> " id=next name=next> </TD> </TR> </TABLE> <HR> <TABLE cellpadding=3> <TR> <TD> <INPUT type="button" value="Search" id=search name=search>  </TD><TD> <INPUT type="button" value="Reset" id=reset name=reset>  </TD> </TR> </TABLE> <P> <FONT face="" size=2 style="BACKGROUND-COLOR: #ffffff">     Click a column heading to sort the table by that column</FONT>  </BODY> </HTML> 

Figure 16-3 shows the resulting screen when viewed within Internet Explorer. You'll notice that the table displays eight rows of data. This was accomplished by setting the DATAPAGESIZE attribute within the <TABLE> tag as follows:

 <TABLE id=datatbl BORDER=1 DATASRC="#CTDCCtl1" DATAPAGESIZE="8"> 

click to view at full size.

Figure 16-3. The TDC_Customer_List.htm file showing how the TDC together with the HTML TABLE element can be used to navigate, search, and sort a client-side recordset.

The previous and next buttons shown in Figure 16-3 allow the end user to page through the recordset. This is accomplished by calling the previousPage and nextPage methods on the table object. Note that we are not calling methods on the TDC here. The methods are executed against the table object by referencing its ID, which in this case is datatbl.

Search functionality is provided via a text box and a drop-down list box. The drop-down list box allows the user to specify the column on which to perform the search. When the Search button is clicked, the search_onclick event fires and the TDC is filtered using the filter property. Wildcards also work in this type of search. The Reset button simply resets the filter to include all customer IDs by using a wildcard and retrieves all the data back into the HTML table.

When you run this code sample, you'll notice how quickly the page responds to your input. Using an HTML table is a way to keep the page size light and ensure fast download plus fast navigation, searching, and sorting. One minor drawback to loading the data on the client side is that there might be some delay in loading the page because of the amount of data being retrieved. To minimize this effect, you should load only the data you need for your particular Web page to carry out the required functionality.



Programming Microsoft Visual InterDev 6. 0
Programming Microsoft Visual InterDev 6.0
ISBN: 1572318147
EAN: 2147483647
Year: 2005
Pages: 143

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net