Click here to Skip to main content
15,868,016 members
Articles / Web Development / HTML
Article

Link ASP.NET Data Grid to Microsoft Excel in the client side

Rate me:
Please Sign up or sign in to vote.
3.29/5 (13 votes)
12 Dec 20041 min read 91.4K   1.9K   47   7
How to use JavaScript to export HTML table into Excel work sheet?

Sample Image - 6.jpg

Introduction

I was playing with internet explorer context menu, suddenly I noted that I have menu item called "export to Microsoft Excel".

:)

When I clicked on this command it is transferred the contents of the selected table to Microsoft excel.

How did I steal the code?

To guess what was happing on when I clicked on the context menu item, I used the IE feature, break at next statement (from menu item choose View-> Script Debugger->Break at Next Statement ), and made a small table and as I clicked on the menu and I got the VBScript file in Visual Studio .NET.

How did I link the datagrid with the script?

I have used something called HTC "HTML Components" which is a good thing to learn if you are developing an ASP.NET Server Control. My HTC script is divided in to two parts :

  • First one is how to display a small icon near the datagrid, and that was by
    1. creating HTML image object.
      JavaScript
      ImgaElement=this.document.createElement("img")
    2. putting the image near the datagrid table.
      JavaScript
      ImgaElement.style.top=this.element.offsetTop-3 
      ImgaElement.style.left=this.element.offsetLeft+offsetWidth-3
  • And the second part is how to plug it to the Microsoft Excel. In this task I did not do anything new but converting the VBS file to JavaScript one and add additional lines for checking the security settings.
    JavaScript
    try 
    {
           xlApp= new ActiveXObject("Excel.Application"); 
    } 
    catch(e) 
    {
        alert("Please check the Internet security setting");
            return -1;
    }

How to use it?

  • An important note before using the component is, to enable the "Initialize and script ActiveX controls not marked as safe"

    :)

    in the security tab in the internet security settings.

  • Copy the images and the HTC folders to your web project.
  • Add a the DLL file (DataGridProject.dll) to your references and to the Toolbox controls.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


Written By
Web Developer
Jordan Jordan
web developer
email : mohammed.barqawi AT gmail.com

Comments and Discussions

 
QuestionHow does it work? Pin
alexmoraes22-Feb-06 2:30
alexmoraes22-Feb-06 2:30 
Generallogo Pin
uswebpro226-Jan-06 17:22
uswebpro226-Jan-06 17:22 
GeneralNeedhelp Pin
Mikiyuki Sakura7-Mar-05 22:41
Mikiyuki Sakura7-Mar-05 22:41 
GeneralROFL! Pin
Ashaman13-Dec-04 2:54
Ashaman13-Dec-04 2:54 
GeneralRe: ROFL! Pin
Mark Brandon20-Dec-04 4:33
Mark Brandon20-Dec-04 4:33 
GeneralRe: ROFL! Pin
Ashaman20-Dec-04 7:04
Ashaman20-Dec-04 7:04 
GeneralRe: ROFL! Pin
DanielHac8-Feb-05 13:05
DanielHac8-Feb-05 13:05 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.