Freigeben über

Using Tabular Data Control to display CSV files

  • Artikel

One Easy Way to display smartly data from your excel sheet on webpage.

I was recently trying to display some date from and excel sheet on a webpage.
Yes save as webpage is alway and option. But then the data becomes static....So how to display
the data smartly I mean with paging and sorting support..One cool feature I came across was
TDC or Tabular Data Control introduced my microsoft with IE 4. So what is TDC?
TDC is activeX control from Microsoft. TDC is capable of displaying
Let me give an example

Step 1: Open a text editor and copy the data below and save the text file as exceldata.txt

"SL","Full Name","Email","Role"
"1","Rob Smith","smithr","Sales Manager"
"2","Mike Williams","WilliamsM","Marketing Manager"
"3","Serena Jason","jasons","Sales Executive"
"4","Harry Potter","Potter","General Manager"

Step2: open a text editor and copy the code below and save it as an html page.

<Html>
<head>
<OBJECT ID="tdcEmpDetails" WIDTH=0 HEIGHT=0
CLASSID="CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83" >
 
  <PARAM NAME="DataURL" VALUE="exceldata.txt">
  <PARAM NAME="UseHeader" VALUE="true">
</OBJECT>
</head>

<body>
<table border=1 DATASRC="#tdcEmpDetails">
<tr>
   <td><span datafld="SL"></span></td>
   <td><span datafld="Full Name"></span></td>
   <td><span datafld="Email"></span></td>

</tr> 
</table>
</body>

</Html>

Step 3: open the html file in a browser ...I am sure you will be happy to see the result...at least I was...

Now this is just a static table.. then what did I mean by smartly displaying data...
With TDC it is very easy to provide both paging and sort support on the displayed data...

Now let us take a deep dive into the TDC object model.

To see the entire list of properties exposed by TDC please visit the following link:
https://msdn2.microsoft.com/en-us/library/aa360597.aspx

To see the entire list of methods exposed by TDC please visit the following link:
https://msdn2.microsoft.com/en-us/library/aa360598.aspx
Actually there is only one method supported by the TDC that is Reset, which is used to reload the data based on the new filter or sort setting.

You can easily find examples on msdn on how to apply filtering and sorting on TDC.
But what is intersting is applying paging....You can use the DataPageSize property of the table tag to limit the number of rows
displayed and then use firstpage, lastpage,nextpage and previouspage method to implement paging. Below is an example that will help you
understand better...Not the ID field supplied to the <table>

<Html>
<head>
<OBJECT ID="tdcEmpDetails" WIDTH=0 HEIGHT=0
CLASSID="CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83" >
 
  <PARAM NAME="DataURL" VALUE="exceldata.txt">
  <PARAM NAME="UseHeader" VALUE="true">
</OBJECT>
</head>

<body>
<table ID="tblEmpDetails" border=1 DATASRC="#tdcEmpDetails"  DATAPAGESIZE=2>
<tr>
   <td><span datafld="SL"></span></td>
   <td><span datafld="Full Name"></span></td>
   <td><span datafld="Email"></span></td>

</tr> 
</table>

   <BUTTON ID=cmdfirstPage onclick=" tblEmpDetails.firstPage()">&lt;&lt;</BUTTON>
   <BUTTON ID=cmdpreviousPage onclick=" tblEmpDetails.previousPage()">&lt;</BUTTON>
   <BUTTON ID=cmdnextPage onclick=" tblEmpDetails.nextPage()">&gt;</BUTTON> 
   <BUTTON ID=cmdlastPage onclick=" tblEmpDetails.lastPage()">&gt;&gt;</BUTTON>

</body>

</Html>

 

One last warning...I have seen that excel misses to add double quotes around field values..make sure you add then manually...sorry about that

Comments