Spreadsheet dojo widget

September 25th, 2006 by Marius Hanganu in Javascript

Update3: We’re back to our own hosting.

Update2: Razvan Dragomirescu was kind enough to mirror the spreadsheet widget. Click here to access the demo. Thanks Razvan!

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:

Features

  • 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)

Status


  • 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:, , ,

DZoneGoogle ReaderYahoo MessengerRedditEmailDelicious

You might also like

Spreadsheet dojo widget with custom dojo build After getting a lot of requests on high load time of the spreadsheet widget, I decided to create a custom...
Dojo vs Ext.js – How Dojo lost in front of other UI frameworks like Ext js I've been meaning to write these thoughts for a long time. I have been using Dojo from version 0.2.x...
Dojo DND – how to cancel drag and drop in dojo How can one cancel the drag and drop operation in dojo, based on conditions specific to the application?...
Firefox overflow hidden prohibits event firing on other elements It seems that for Firefox, the style overflow hidden stops firing onmousemove or onmouseover events....
.

51 Responses

  1. francisco Says:

    nice, cannot ewait for your final version,

  2. ivanstalyn Says:

    very nice work!

  3. Frederik Krautwald Says:

    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!!!

  4. Marius Hanganu Says:

    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?

  5. Ajaxian » Dojo Spreadsheet Widget Says:

    […] Marius Hanganu has created a Spreadsheet widget for Dojo with the features: […]

  6. Angsuman Chakraborty Says:

    It is a wonderful beginning. Nice of you to make it publicly available. I like the formula support. I wish I can drag a cell to fill subsequent cells as in Excel. And then there is charting :)

  7. Marius Hanganu Says:

    Good suggestion. I’ll investigate ways to support this.
    As for charting :-), it still needs lot of work before getting there :-)

  8. Alexander Werner Says:

    This widget is simply awesome.

  9. ziggy Says:

    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.

  10. an10ae Says:

    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?

  11. Spreadsheet dojo widget | Sergio Gandrus - Consulente Informatico Says:

    […] Qui c’è la pagina dello sviluppatore e qui una demo. […]

  12. Jeroen van Wilgenburg Says:

    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

  13. Marius Hanganu Says:

    Thanks for the suggestion. I will improve the initial building of the widget.

  14. Perry Dillard Says:

    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.

  15. Marius Hanganu Says:

    :-) 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.

  16. chris Says:

    Wow! This is sweet!!! I love Dojo and this is a killer widget.

  17. Dojo Spreadsheet Widget > Archives > Web 2.0 Stores Says:

    […] […]

  18. Celi Online » Dojo Spreadsheet Widget Says:

    […] Marius Hanganu ha creado un widget de hoja de cálculo para Dojo con las siguientes características: […]

  19. Dan Says:

    This is excellent. I certainly hope you contribute this as a widget in Dojo 0.4.

  20. Ritesh Jariwala Says:

    Excellent work…slow with IE but abs fast with FireFox..i like it. I guess you going to add more functions to it.

  21. Dojo Spread Sheet Widget « Technology Evangelisms Says:

    […] I am a big of Dojo and Mochikit and a new spreadsheet widget for dojo is beig created. See more here […]

  22. Scott Hickey Says:

    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.

  23. Marius Hanganu Says:

    Yeap, good point. I’ll take a look at it.

  24. Javier Says:

    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.

    Javi

  25. Marius Hanganu Says:

    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.

  26. Javier Says:

    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.

    Javi

  27. Marius Hanganu Says:

    You can download the spreadsheet sources along with dojo sources from http://64.201.107.34/tremend/spreadsheet/1/test_spreadsheet.htm.

  28. dundun Says:

    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.

    Thanks.

  29. Tim Says:

    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?

  30. Marius Hanganu Says:

    Currently there’s no way. This is however a crucial feature. It’s going to get into 1.0 release.

  31. teqlo Says:

    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.

  32. Rafafá Says:

    Awesome!!

  33. widget fetish Says:

    Niceee!
    I’m a web widget freak!

  34. srinu Says:

    Hi,
    Nice Work. I need to use spread sheet widget in my web based project so can u please provide any configuration document.

  35. srinu Says:

    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.

  36. srinu Says:

    How to populate JSP data into Spreadsheet widget and vice-versa ???????????????????

  37. Marius Hanganu Says:

    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.

  38. Naga Raja Says:

    Hi

    Anybody can help me how to pass enternal data into dojo spreadsheet. I mean i want to pass some data from jsp to dojo spreadsheet.

    Thanks

  39. Naga Raja Says:

    Hi

    Anybody can help me how to pass external data into dojo spreadsheet. I mean i want to pass some data from jsp to dojo spreadsheet.

    Thanks

  40. srinu Says:

    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.
    Sal
    —-
    10
    20
    40
    —–
    Sum=70

  41. Naga Raja Says:

    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);

    or
    document.write(“spread sheet instance”+document.getElementById(“debugDiv”).value);
    /script>

    Thanx in advance……

  42. CG Says:

    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 .

  43. Marius Hanganu Says:

    I do intend to revisit the code for this component as soon as the 0.9 release of dojo stabilizes.

  44. Marius Hanganu Says:

    Naga, please check the createSpreadsheetCells function. You can insert your custom code in there to set values for the spreadsheet cells.

  45. James Says:

    Thanks Marius. Keep up the good work.

  46. Yiorgos Says:

    Cool!

  47. Ivan Says:

    Cool!

  48. Laurent J.V. Dubois Says:

    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 :-)

  49. Gino Says:

    You may want to add this to your widget css…

    .sheet .sheetRow1stCell{
    vertical-align:top;
    }

    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.

  50. James Hall Says:

    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

  51. Kaffeevollautomaten Says:

    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

Please note: Comment moderation is enabled and may delay your comment. There is no need to resubmit your comment.