1. Update3: We’re back to our own hosting.
    2. Update2: Razvan Dragomirescu was kind enough to mirror the spreadsheet widget. Click here to access the demo. Thanks Razvan!
    3. Update: Due to high traffic the demo page might load very slowly. Please have patience.

In the last weeks, I’ve been using my so very little spare time to create a spreadsheet widget based on dojo.
Click here for a demo of the spreadsheet widget. It is based on release 0.3.1 of dojo toolkit. Dojo is an excellent framework. Scores 3rd in this Ajaxian survey. The first two: Prototype and Scriptaculous are lightweight frameworks and certainly don’t offer as much functionality as Dojo. If you make a top of the “heavy” js frameworks, Dojo will definitely take 1st place.

So here’s a status of the widget:


  • Based on Toolbar and TabContainer widgets
  • Keyboard cell navigation
  • Column, row resizing
  • Cell, column and row selection
  • Cell formatting (font, font size, bold, italic, underline, color, background color)
  • Sheet management (rename, delete, new)
  • Functions (22 math functions, 6 string functions)


  • This widget is definitely not final and has several bugs
  • Tested with Firefox and IE only
  • On IE runs slower than Firefox
  • If it would be released as an independent piece of software it would be labelled as 0.7 version

Goals for “1.0” version:

  • Fix all remaining bugs related to column, row resizing and selection
  • Support cell presentation format (dates could be displayed as mm-dd-yyyy, numbers as xx.xx, etc)
  • Support for date functions
  • Post spreadsheet data in JSON format to be saved serverside
  • Improve validation

technorati tags:, , ,

51 responses to “Spreadsheet dojo widget

  1. This is a very nice piece of work, you have knitted. I am amazed how well this functions.

    Since it is a spreadsheet, I would recommend optimizing calculations between cells that are dependant on eachother. At least for some simple additions with sum sub results took 2-3 secs for the code to generate results. This might have to do with your Matrix Cell dependency code.

    Anyway, this is very very good. Looking forward seeing more from you!!!

  2. Not sure why it takes 2-3 secs for formulas to compute. I tested it on IE and FF on Windows and didn’t have any problems neither on my desktop Athlon64 2G RAM, nor on my laptop Centrino 1.4, 512 RAM.

    What configuration are you using?

  3. Like all dojo based widgets, seized my entire browser (FF 1.5) while loading, this time for well over a minute!

    You guys seriously need to fix that loading module.

  4. This is looking really good! The only thing I’m not seeing is the ability to save the files either in .xls or .odf ( preferably .odf of course) any plans for this?

  5. This is a great widget, it is works very smooth compared to other grid widgets I’ve seen.

    To improve performance on Internet Explorer you can try to build the spreadsheet with insertCell and insertRow. String concatenation (html+= in the createSpreadsheetCells function) is terribly slow in IE.

    var table=dojo.byId(‘spreadsheet-table’);

    for(var i=0; i

  6. This is a first class grid widget, nice work!

    Are there any plans to implement the ability to lock the header columns so they do not scroll vertically, but still scroll correctly horizontally? This is one feature that I’m always looking for but can never seem to find.

  7. :-) I was afraid someone will ask for this feature sooner or later. FYI google spreadsheets does lock the column and row headers.

    I guess at one point I will try to fix this too, but after the features planned for 1.0. Good point though.

  8. Great looking spreadsheet.

    I was wondering if you’re planning to change the backing decimal number representation from double/float to BigDecimal to get the math correct:
    i.e. a1 = 100.00, b2 = 9.95, c1 = a1 + b1 should be 995.00 instead 994.9999999999999.

  9. Hello,

    First of all, congratulations for your Widget. I have a problem and I would like to ask you the following :
    I would like to implement the widget in my web but I would like to customize it by eliminating some elements like the ComboBoxes, the icons and the header that say A,B,C,D,… That is, I want just the GRID and the functions embedded (sum, edit cells…).
    I downloaded the ‘source file’ but my problem is that I don’t know what function call to display just the Grid. At least, I would like to know how to call ‘Spreadsheet.src.js’ to display the whole content (grid + comboboxes + icons) (I can edit the code afterwards and delete what I do not want). I am a beginner in programming. I tried to edit the file ‘dojo.js’ but all the text is together and it is impossible to edit. It is not possible to edit even with the text put in order, is it?

    Thank you.


  10. Hi,

    First, you can use this widget with the dojo toolkit, by downloading the latest revision. The dojo.js file is actually the result of concatenation & compression of all .js dojo files needed for this custom build.

    Second, the source file defines two widgets actually: Spreadsheet and SpreadsheetSheet (not a very intuitive name). The first is the manager that contains the toolbar (with buttons, comboboxes, etc) and the tab bar.

    You should use the second widget SpreadsheetSheet which is the actual grid (and nothing else). However, in order for you to be able to change cell formatting, use mathematical or string functions – you’d need some way of sending these commands to the SpreadsheetSheet widget.

    You should check how the second widget is used by looking on how the second widget is receiving commands from the first widget.

  11. Hi Marius,

    Thank u very much for your comment. It has been of a great help.
    I am gonna try to identify both widgets. I suppose that if I create an instance of the main widget(Spreadsheet), it will create automatically SpreadSheetSheet, don’t it?
    Anyway, would there be any possibility that you could send me the ‘dojo.js’ file without concatenating nor compressing? When you say that I need the dojo toolkit is because I need it to concatenate and compress it?

    Thank you very much.


  12. Hi,

    Nice work.
    I need to do some more customization on it, I need to have dropdown inside the cells.
    If you can help with some code snippet will really be appreciable.


  13. Is there a way to make it so the data in the spreadsheet can be a posted variable in PHP, then put that post into a database and make it retreivable with the same interface?

  14. Very nice work and thanks for publishing the source code. We are trying to use your spreadsheet and persist the data in xml database with given filename. Can you please advice me how to approach this situation.

  15. I got it. Just we need place sour coe( all js files) in tomcat webapps folderand give the correct file path of dojo.js.
    Use bleow notation to create an object to SpreadSheet widget.

  16. Currently there’s no way to do this. I’m planning for a new release in the next month or so. If you wish, you could populate your items after loading is finished, using javascript code.

  17. Thanks Marius. Can you please provide sample code snippet for below example.

    Example: Suppose I have employee salary in JSP and I need to display individula salary and Sum of salary in spread sheet cells.

  18. HI

    Anybody please provide how to create the instance of widget spreadsheet in jsp and pass some data to display in cells while creating itself the widgetspread.

    I tried to implement like this

    Click here to view the source

    accessing the spread in script like this

    document.write(“spread sheet instance “+document.getElementById(“spreadsheetX”).value);

    document.write(“spread sheet instance”+document.getElementById(“debugDiv”).value);

    Thanx in advance……

  19. awesome work!

    I wonder do you plan to port it to the new generation of dojo – dijit ?

    There is one minor problem worth to mention, the row label pane and column label pane should be freeze when scrolling .

  20. Amazing work Marius !

    Congratulations !
    I ‘ll tracking your blog’s rss
    but please, help us to be informed of the evolution of your dev.
    by example, open a mailing-list dedicated for your fans :-)

  21. You may want to add this to your widget css…

    .sheet .sheetRow1stCell{

    This will fix a bug I’m seeing after resizing the height of a row. The resizer gets list because the div inside the cell is centered and 20px height.

  22. Hi there. I am trying to incoporate your spreadsheet app into my application, but I am using dojo 0.4.3 and it doesnt seem to work. It displays okay, but you can’t seem to select any cells or anything.

    Will this be made compatible with this version, or will you be jumping straight to 0.9

    Thanks in advance

  23. My coder is trying to persuade me to move to .net from PHP. I have always disliked the idea because of the expenses. But he’s tryiong none the less. I’ve been using Movable-type on numerous websites for about a year and am concerned about switching to another platform. I have heard great things about blogengine.net. Is there a way I can import all my wordpress posts into it? Any kind of help would be really appreciated! Kaffeevollautomaten

Leave a Comment:

Your email address will not be published. Required fields are marked *