Data binding links a data source to a Web page. Data binding lets you create pages that display, sort, and filter data on the client side, without numerous round trips to the server. This is accomplished by creating a template for the data using extensions to HTML proposed to the W3C. You can manipulate the data using Dynamic HTML on the client side, eliminating the delay of constant server updates. You can use a delimited text file as the source for the Tabular Data Control, use Remote Data Service to connect to any ODBC database, or create a custom data source object. The data source object can be written with JavaBeans or as an ActiveX control.

The Data Source
The Data Consumers
The Data Source Object (DSO)
Repeated Table Sample
Current Record Sample
Sorting
Filtering

© 1997 Microsoft Corporation. All rights reserved. Terms of use.


The data source for the Tabular Data Source Object is a simple delimited text file. You can create the file using Notepad or any other text editor, or you can output the text file with most popular database products. The data source can contain two kinds of entries: a header line, which specifies the field names and (optionally) their data types, and the data itself, with field contents separated by commas or a user-specified delimiter. If the field contents contain HTML code, you can render the HTML by placing it between tags that support the DATAFORMATAS parameter. Here is a sample table with one of the stock symbols (TACP) in bold thanks to DATAFORMATAS.

You can use HTML tags in tables and forms, as well as other HTML tags, as data consumers. When you display data in a table, Internet Explorer 4.0 will expand the number of rows to match the number of records in the data source. This allows you to display a number of records at one time. You can display data one record at a time, and navigate through all of the records in the dataset.

The Tabular Data Control and the Remote Data Service are objects that you can add to your Web pages. They control the link between the Web page and the data source. There are specific events fired by page elements bound to a data source that allow you to control how data is displayed on the page without frequent trips back to a database on a server. The order in which events fire gives you a high degree of control over data display and updates. Note that only the Remote Data Service (RDS) is capable of data updates. The Tabular Data Control (TDC) reads delimited files on the server, but does not update them. If you need a custom data interface, you can write your own controls using the interface provided by the Internet SDK.

The table below uses a Tabular Data Control to display multiple records from a file. You can also take a look at the source code for the table. You can sort the table by clicking on the appropriate heading (Company, Symbol, etc.).

The form below uses a Tabular Data Control to display one record at a time from a data source file. You can also take a look at the source code for the form.

Client-side sorting (and most other manipulation of the data) is done on the client side using properties and methods of the data source object. You can use JavaScript or VBScript to invoke the methods. Sorting is accomplished with the Sort property. In the samples below, onClick handlers sort the database with just two lines of source code. The ID of the TDC is "quotelist." The first line of each handler sets the column to be used for sorting, and the second line causes the data to redisplay using the Reset method. Here is an example of a table whose contents you can sort by clicking on the column headings.

function company_onClick()
  ' Sorts by company name.
  quotelist.Sort = "Company"
  quotelist.Reset()
end function
function company_onClick()
  ' Sorts by increasing volume, then by decreasing price.
  quotelist.Sort = "Volume; -Price"
  quotelist.Reset()
end function

Filtering is accomplished with the Filter property. The source code sample below shows two onClick handlers. The myFilter handler sets a filter (all records with a volume greater than 100,000 shares), and the myNoFilter handler removes the filter. You can create more complex filters by using logical AND and OR operators: "(Quantity > 10 & color = 'lime') | Quantity < 5". Note the use of parentheses to organize this complex expression for proper parsing.

function myFilter_onclick()
  elem_list.object.Filter = "Volume>100000"
  elem_list.Reset()
end function

function myNoFilter_onclick()
  elem_list.Filter = ""   'No filters.
  elem_list.Reset()
end function

The first line of the file can be a list of the field names, with optional data types. For example, in the table below, the third field, Quote, is of type FLOAT, and the fifth field, Volume, is of type INT (integer).

Symbol,Company,Quote:FLOAT,Change:FLOAT,Volume:INT
BRYN,Brayola Baryons Inc.,5,.125,30000
TACP,Proton Tacos,23.5,.5,2400
LPTN,Leptonics Inc.,44,-1.125,634000
NTRM,International Neutrino Masters,134.5,-18.125,1230500
ZPEC,Z-Particle Emission Controls,27,2.625,28000
HAL,Halcyon Abatement Logistics,33,-3,333000
TPRT,Particle Treatments Inc.,84,.25,45000

Field names in the header line are separated by commas. You can also specify a custom delimiter of your choice.

Symbol,Company,Quote,Change,Volume

If you specify a data type with a field name, separate the field name and the data type with a colon, like this:

Symbol,Company,Quote:FLOAT,Change:FLOAT,Volume:INT

The DIV, SPAN, MARQUEE, and IMG tags support the DATAFORMATAS parameter. For example, to bind a SPAN to data that contains HTML formatting:

<SPAN DATASRC="#mydata" DATAFLD="description" DATAFORMATAS="html"></SPAN>

If the value in the description column is "This is <FONT SIZE=+2><B>large, bold</B></FONT> text", the resulting binding would look like:

This is large, bold text

Here is sample HTML for a table bound to a Tabular Data Control (TDC). The TDC uses the DataURL parameter to point to the data source. The table uses the DATASRC parameter to reference the TDC, and the DATAFLD parameter in the DIV and SPAN tags to reference the field names. If the source file does not specify field names, the default field names are Column1, Column2, etc.

<object id="quotelist" classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83"
align="baseline" border="0" width="0" height="0">
<param name="DataURL" value="http://www.myweb.com/quotes.txt">
<param name="UseHeader" value="True"></OBJECT>
<TABLE ID="elemtbl" DATASRC="#quotelist">
<TBODY><tr>
        <td><SPAN DATAFLD="Company"></SPAN></td>
        <td><SPAN DATAFLD="Symbol" DATAFORMATAS="html"></SPAN></td>
        <td align=right><DIV DATAFLD="Quote"></DIV></td>
        <td align=right><SPAN DATAFLD="Change"></SPAN></td>
        <td align=right><DIV DATAFLD="Volume"></DIV></td>
</tr></TBODY></table>

Forms are just one example of a way you can display records. In this example, form elements are bound to a data source. To bind a TEXT INPUT element to a data source: <INPUT TYPE=TEXT datasrc="#quotelist2" DATAFLD="Quote">.

Form elements linked to a data source support updating of the data source. This includes the following form elements:


The sample source code below shows a typical use of the Tabular Data Control (TDC). The source file is "http://www.myweb.com/quotes.txt", shown as the DataURL value. The UseHeader value is set to True because there is a header line in the data source. Remote Data Service is considerably more sophisticated, and is documented in detail in the Internet SDK.

<object id="quotelist" classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83" align="baseline" border="0" width="0" height="0">
<param name="DataURL" value="http://www.myweb.com/quotes.txt">
<param name="UseHeader" value="True">

Company
Symbol
Quote
Change
Volume


The TABLE tag uses the DATASRC parameter to identify the Tabular Data Control object that is associated with the table. The DIV and SPAN tags (always located within TD tags!) use the DATAFLD parameter to identify which field displays in what column of the table. You can specify multiple rows (with different fields in the rows), use COLSPAN and ROWSPAN, and you can put more than one bound HTML element in a cell.

<table border="0" id="elemtbl" datasrc="#quotelist" cellpadding=4>
<THEAD><tr>
        <td width=300><b><DIV id=company>Company</DIV></b></td>
        <td width=70><b><DIV id=symbol>Symbol</DIV></b></td>
        <td width=80 align=right><b><DIV id=quote>Quote</DIV></b></td>
        <td width=100 align=right><b><DIV id=change>Change</DIV></b></td>
        <td width=100 align=right><b><DIV id=volume>Volume</DIV></b></td>
</tr></THEAD>
<TBODY><tr>
        <td><SPAN DATAFLD="Company"></SPAN></td>
        <td><SPAN DATAFLD="Symbol" DATAFORMATAS="html"></SPAN></td>
        <td align=right><DIV DATAFLD="Quote"></DIV></td>
        <td align=right><SPAN DATAFLD="Change"></SPAN></td>
        <td align=right><DIV DATAFLD="Volume"></DIV></td>
</tr></TBODY></table>
Event Description
onbeforeupdate(can_cancel) This event is fired when an element loses focus. This applies to form elements where you can change data, such as TEXT boxes. The event's handler can cancel the update if can_cancel is set to true.
onafterupdate() This event is fired following the transfer of data from the element to the data provider.
onrowexit(can_cancel) This event is fired just prior to the data source control changing the current record. The event's handler can cancel the update if can_cancel is set to true.
onrowenter() This event is fired when moving to a new record.

The data source uses "<B>TACP</B>" for the stock symbol shown in bold below, while the other symbols are just normal text without HTML codes. By storing the HTML codes in the data, you have complete control over when and how the HTML is used in data display.

Company
Symbol
Quote
Change
Volume


The Remote Data Service obtains its data from a server component. The server component can access data in ODBC-compliant databases. If you have existing data you want to publish in SQL server, Access, Oracle, or any other ODBC accessible DBMS, use the RDS. In addition to accessing your database, RDS transmits its data using the HTTP protocol so the RDS can work over the Internet and through firewalls.

You should use the RDS if you:

Once you've determined the type of data source object to use, simply include it in your HTML file using an OBJECT tag and set the parameters. Be sure to set a unique ID attribute on the OBJECT. The Internet Explorer 4.0 binding agent requires this.

The Tabular Data Control obtains its data from a comma-separated-value file (you may also specify a custom delimiter). The file is accessed using a URL so you can put the file on your Web site where the TDC can retrieve it.

You should use a TDC if you:

This form shows one data record at a time.

Symbol:   
Company:  
Quote:    
% Change: 
Volume:   

Previous Record

Next Record

<object id="quotelist2" classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83"
align="baseline" border="0" width="0" height="0">
<param name="DataURL" value="quotes.txt">
<param name="UseHeader" value="True"> </object>
Symbol:   <INPUT TYPE=TEXT datasrc="#quotelist2" DATAFLD="Volume">
Company:  <INPUT TYPE=TEXT datasrc="#quotelist2" DATAFLD="Company">
Quote:    <INPUT TYPE=TEXT datasrc="#quotelist2" DATAFLD="Quote">
% Change: <INPUT TYPE=TEXT datasrc="#quotelist2" DATAFLD="Change">
Volume:   <INPUT TYPE=TEXT datasrc="#quotelist2" DATAFLD="Volume">
<B ID="prevRec" STYLE="cursor:hand">Previous Record</B>
<B ID="nextRec" STYLE="cursor:hand">Next Record</B>

function prevRec_onclick()
  if quotelist2.recordset.AbsolutePosition > 1 then
    quotelist2.recordset.moveprevious
  end if
end function
function nextRec_onclick()
  if quotelist2.recordset.AbsolutePosition < quotelist2.recordset.recordCount then
    quotelist2.recordset.movenext
  end if
end function

The following elements can be bound to the column of a data source control.

Elements Supports Update Supports HTML Rendering Supports Repetition
A      
APPLET Yes    
BUTTON   Yes  
DIV   Yes  
FRAME      
IFRAME      
IMG   Yes  
INPUT TYPE=CHECKBOX Yes    
INPUT TYPE=HIDDEN Yes    
INPUT TYPE=PASSWORD Yes    
INPUT TYPE=RADIO Yes    
INPUT TYPE=TEXT Yes    
LABEL   Yes  
MARQUEE   Yes  
OBJECT Yes    
SELECT Yes    
SPAN   Yes  
TABLE     Yes
TEXTAREA Yes    
Company
Symbol
Quote
Change
Volume