Spreadsheet dojo widget
September 25th, 2006 by 
Marius Hanganu
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:
- 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:dojo, spreadsheet, widget, javascript
Posted in HTML, Javascript | 
September 26th, 2006 at 10:56 am
nice, cannot ewait for your final version,
September 26th, 2006 at 4:12 pm
very nice work!
September 26th, 2006 at 4:12 pm
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!!!
September 26th, 2006 at 4:20 pm
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?
September 26th, 2006 at 5:21 pm
[...] Marius Hanganu has created a Spreadsheet widget for Dojo with the features: [...]
September 26th, 2006 at 9:10 pm
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 :)
September 26th, 2006 at 9:12 pm
Good suggestion. I’ll investigate ways to support this.
As for charting :-), it still needs lot of work before getting there :-)
September 26th, 2006 at 9:25 pm
This widget is simply awesome.
September 27th, 2006 at 7:10 am
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.
September 27th, 2006 at 8:26 am
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?
September 27th, 2006 at 9:54 am
[...] Qui c’è la pagina dello sviluppatore e qui una demo. [...]
September 27th, 2006 at 11:05 am
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
September 27th, 2006 at 11:08 am
Thanks for the suggestion. I will improve the initial building of the widget.
September 27th, 2006 at 7:28 pm
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.
September 27th, 2006 at 7:33 pm
:-) 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.
September 27th, 2006 at 8:20 pm
Wow! This is sweet!!! I love Dojo and this is a killer widget.
September 28th, 2006 at 5:25 pm
[...] [...]
September 28th, 2006 at 11:37 pm
[...] Marius Hanganu ha creado un widget de hoja de cálculo para Dojo con las siguientes características: [...]
September 28th, 2006 at 11:47 pm
This is excellent. I certainly hope you contribute this as a widget in Dojo 0.4.
September 29th, 2006 at 12:19 pm
Excellent work…slow with IE but abs fast with FireFox..i like it. I guess you going to add more functions to it.
September 30th, 2006 at 1:42 pm
[...] I am a big of Dojo and Mochikit and a new spreadsheet widget for dojo is beig created. See more here [...]
October 3rd, 2006 at 1:18 am
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.
October 3rd, 2006 at 10:41 am
Yeap, good point. I’ll take a look at it.
October 10th, 2006 at 3:04 pm
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
October 10th, 2006 at 3:15 pm
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.
October 10th, 2006 at 4:42 pm
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
October 10th, 2006 at 4:52 pm
You can download the spreadsheet sources along with dojo sources from http://64.201.107.34/tremend/spreadsheet/1/test_spreadsheet.htm.
October 18th, 2006 at 11:49 am
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.
October 19th, 2006 at 12:47 am
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?
October 19th, 2006 at 10:10 am
Currently there’s no way. This is however a crucial feature. It’s going to get into 1.0 release.
October 27th, 2006 at 5:54 am
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.
October 30th, 2006 at 9:01 pm
Awesome!!
March 6th, 2007 at 4:30 pm
Niceee!
I’m a web widget freak!
March 21st, 2007 at 8:34 am
Hi,
Nice Work. I need to use spread sheet widget in my web based project so can u please provide any configuration document.
March 22nd, 2007 at 2:17 pm
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.
March 22nd, 2007 at 2:18 pm
How to populate JSP data into Spreadsheet widget and vice-versa ???????????????????
March 22nd, 2007 at 2:20 pm
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.
March 22nd, 2007 at 3:20 pm
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
March 22nd, 2007 at 3:21 pm
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
March 22nd, 2007 at 3:35 pm
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
March 22nd, 2007 at 4:07 pm
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……
April 19th, 2007 at 12:19 am
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 .
April 19th, 2007 at 9:04 am
I do intend to revisit the code for this component as soon as the 0.9 release of dojo stabilizes.
April 19th, 2007 at 10:58 am
Naga, please check the createSpreadsheetCells function. You can insert your custom code in there to set values for the spreadsheet cells.
April 25th, 2007 at 12:22 am
Thanks Marius. Keep up the good work.
May 17th, 2007 at 2:23 pm
Cool!
May 17th, 2007 at 7:02 pm
Cool!
May 24th, 2007 at 7:35 pm
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 :-)
May 29th, 2007 at 8:29 pm
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.
June 18th, 2007 at 10:22 am
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