Introduction to IE Data Binding - DHTML Lab | 3 | WebReference

Introduction to IE Data Binding - DHTML Lab | 3


Introduction to IE Data Binding

Example 2

The External Data File (StaffData.csv)

Sales,Gareth,Cheeseman,,018823654895,gc.jpg,Gareth is our top sales man
Sales,Bert,Russell,,018823654896,none.jpg, Bert backs up Gareth on tricky sales
Support,Ernest,Chipset,,01882365487,none.jpg,Ernest provides after sales support
Support,Dilbert,Gantry,,01882365488,none.jpg,Dilbert is fast learning the support trade
Technical,Shawn,FrontBus,,01882365490,none.jpg,Shawn is our technical Guru
Technical,Roger,Ecma,,01882365491,none.jpg,Roger is our programming expert

The HTML Page

<TITLE>IE DHTML Data Binding Example 2</TITLE>
<SCRIPT LANGUAGE='Javascript'>
function selectChange()
   // Check for special case of "All" filter
   var filt = cboDept.options[cboDept.selectedIndex].text;
   if (filt == 'All')
      tdcStaff.FilterColumn = '';
      tdcStaff.FilterValue = '';
      tdcStaff.FilterCriterion = '';
      tdcStaff.FilterColumn = 'Dept';
      tdcStaff.FilterValue = filt;
      tdcStaff.FilterCriterion = '=';
   // Update title <DIV> at top of screen
   divDept.innerHTML = "<FONT COLOR=#FFFFFF><B>" + filt + "</B></FONT>";
   //Reset the DSO, this will in turn refresh any bound elements
function colSort(varColumn)
   //Check to see if we are sorting on the same column
   //If so assume user simply wishes to invert sort order
   if (varColumn == tdcStaff.SortColumn)
      //Invert order
      tdcStaff.SortAscending = !tdcStaff.SortAscending;
      //Use current sort order for new column sort
      tdcStaff.SortColumn = varColumn;
BODY { font-size: 9pt; font-family: verdana, tahoma, sans serif, helvetica; }
TH A { color: white }
TH A:Hover { color: yellow }
<OBJECT ID=tdcStaff
   <PARAM NAME="DataURL" VALUE="StaffData.csv"> 
   <PARAM NAME="UseHeader" VALUE="True">
   <PARAM NAME="TextQualifier" VALUE=",">
<TR BGCOLOR=#333366>
   <TD><DIV ID='divDept'><FONT COLOR=#FFFFFF><B>All</B></FONT></DIV></TD>
<TABLE DATASRC="#tdcStaff">
         <TH BGCOLOR=#333366><A HREF='Javascript: colSort("FirstName");'>First Name</A></TH>
         <TH BGCOLOR=#333366><A HREF='Javascript: colSort("LastName");'>Last Name</A>></TH>
         <TH BGCOLOR=#333366><A HREF='Javascript: colSort("Telephone");'>Telephone</A></TH>
         <TH BGCOLOR=#333366><A HREF='Javascript: colSort("Email");'>Email</A></TH>
         <TD BGCOLOR=#EEEECC><DIV datafld=FirstName></DIV></TD>
         <TD BGCOLOR=#EEEECC><DIV datafld=LastName></DIV></TD>
         <TD BGCOLOR=#EEEECC><DIV datafld=Telephone></DIV></TD>
         <TD BGCOLOR=#EEEECC><A DATAFLD=Email STYLE='Text-Decoration:None' ONMOUSEOVER='if(this.href.indexOf("mailto:") == -1){ this.href = "mailto:" + this.href};'><SPAN datafld=Email></SPAN></A></TD>
         <TD COLSPAN=4><B>Dept:</B>&nbsp;
             <SELECT NAME='cboDept' STYLE="WIDTH=150" ONCHANGE='selectChange();'>


You can download a Zip file that includes all required files for both examples.

Produced by Ian McArdle and Paul Thomas and

All Rights Reserved. Legal Notices.
Created: Oct 17, 2000
Revised: Oct 17, 2000