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

Introduction to IE Data Binding - DHTML Lab | 3

Logo

Introduction to IE Data Binding



Example 2

The External Data File (StaffData.csv)

Dept:string,FirstName:string,LastName:string,Email:string,Telephone:string,Picture:string,About:string
Sales,Gareth,Cheeseman,[email protected],018823654895,gc.jpg,Gareth is our top sales man
Sales,Bert,Russell,[email protected],018823654896,none.jpg, Bert backs up Gareth on tricky sales
Support,Ernest,Chipset,[email protected],01882365487,none.jpg,Ernest provides after sales support
Support,Dilbert,Gantry,[email protected],01882365488,none.jpg,Dilbert is fast learning the support trade
Technical,Shawn,FrontBus,[email protected],01882365490,none.jpg,Shawn is our technical Guru
Technical,Roger,Ecma,[email protected],01882365491,none.jpg,Roger is our programming expert

The HTML Page

<HTML>
<HEAD>
<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 = '';
   }
   else
   {
      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
   tdcStaff.Reset();
}
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;
   }
   else
   {
      //Use current sort order for new column sort
      tdcStaff.SortColumn = varColumn;
   }
   tdcStaff.Reset();
}
</SCRIPT>
<STYLE>
BODY { font-size: 9pt; font-family: verdana, tahoma, sans serif, helvetica; }
TH A { color: white }
TH A:Hover { color: yellow }
</STYLE>
</HEAD>
<BODY>
<OBJECT ID=tdcStaff
        CLASSID="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83">
   <PARAM NAME="DataURL" VALUE="StaffData.csv"> 
   <PARAM NAME="UseHeader" VALUE="True">
   <PARAM NAME="TextQualifier" VALUE=",">
</OBJECT>
<TABLE CELLPADDING=0 CELLSPACING=0 BORDER=2>
<TR BGCOLOR=#333366>
   <TD><DIV ID='divDept'><FONT COLOR=#FFFFFF><B>All</B></FONT></DIV></TD>
<TR>
<TD>
<TABLE DATASRC="#tdcStaff">
   <THEAD>
      <TR>
         <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>
      </TR>
   </THEAD>
   <TBODY>
      <TR>
         <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>
      </TR>
   </TBODY>
   <TFOOT>
      <TR>
         <TD COLSPAN=4><B>Dept:</B>&nbsp;
             <SELECT NAME='cboDept' STYLE="WIDTH=150" ONCHANGE='selectChange();'>
                <OPTION>All
                <OPTION>Sales
                <OPTION>Support
                <OPTION>Technical
             </SELECT></TD>
      </TR>
   </TFOOT>         
</TABLE>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>

Download

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

URL: https://www.webreference.com/dhtml/column39/11.html