DataDrop – Drag Grid Data in From a Spreadsheet
I was stewing about an example that Andrea Giammarchi came up with, it was so cool - very cool - but totally useless in the form it was in (from a UX standpoint). It was a proof of concept, so I wasn't expecting it to be useful right away, in fact all I was expecting is that it give me an idea - and it did.
The Concept
If we could drag our tabular data into grids from other programs we could circumvent the need to upload a data file to a web server to be read and parsed, then spit back out to our browser in a readable format. Anyone who has ever had to parse Excel files on the server side knows how much of a pain it is, we might be lucky if we get a CSV file or some other simple format, but in the real world the end user running their spreadsheet program has no clue what simple tabular data is.
Using the same concept from Andrea's example page, we can create a zone within the grid which will accept dragged data from a spreadsheet. The behavior that we are taking advantage of is the way in which an html textarea will accept dragged data from a spreadsheet and format it as tab delimited data.
The Plugin
My first version of the plugin is rough around the edges, but works in all browsers (minus Opera) very reliably. Being a plugin, the usage is straight forward, there are no configuration values that need to be defined at this time.
Check out the screencast below to see it in action - I am dragging rows of data from OpenOffice Calc directly to an ExtJS Grid.
The Code
As always, I have setup a Google code site for this. Please browse the source to get the plugin code. I don't have an example page, but the documentation is online
Trackbacks & Pingbacks
- Tweets that mention DataDrop - Drag Grid Data in From a Spreadsheet | VinylFox -- Topsy.com
- AMB Album » ExtJS Grid Accepts Data Dragged from Spreadsheet
- ExtJS Grid Accepts Data Dragged from Spreadsheet - Iconlandia
- ExtJS Grid Accepts Data Dragged from Spreadsheet | trackteq.com
- Grillas mejoradas con ExtJS | Utilidad Web - Un recurso diario para tu web.
- ExtJS Grid Accepts Data Dragged from Spreadsheet | MisrIT Reader (Beta)
- Ext Js bits « roundcrisis.Find<Solution>()
That’s very cool! Didn’t know you could do that…
Shea, just another example of why you’re one of the leaders in this space. Kick ass dude!
That’s awesome !
I did some tests and it appears that a mouseover event is triggered when you drop some text in a textarea.
Using that instead of checking every 250 ms could improve performances or am I wrong ?
I tested only Firefox 3.5.
I tested deeper the mouseover event and :
– when the dragged text comes from the browser (page, firebug, url bar…), everything is ok.
– when the dragged text comes from another application, the mouseover event may be triggered before the text is pasted into the textarea by the browser. Sometimes it’s triggered after.
So a little .defer(a few ms) and it should work.
Might be interessant if you have many drop zones in the same page.
I have implemented your suggestions in the latest version, thank you very much for suggesting it – was a great idea.
Mate, as you pointed out that was just a proof of concept but unfortunately my cheap host cannot support too many connection.
I had to change the page so please edit your post and redirect my name to my blog, thanks a lot.
P.S. I would change the cursor via CSS maybe putting a custom one to underline that area is a drop target? My proof of concept had a clear image: drop here!
Another thing, you do not necessary need to drag and drop, you can just copy and paste in the drop area
Regards
Changed the links. Sorry about that.
I actually did change the cursor in a more recent version. Users know that when your working with spreadsheets, that data can be dragged into them, so im not convinced that a visual indicator is needed – though it might give it a nice feel.
The whole paste concept I like, but im trying to figure out how the user will visually know that the grid is focused, and that a paste is possible – Ill see what I can come up with.
P.S.2 … would be nice to have some credits in the source, at least for the idea, since that trick/proof o concept, was kinda brand new, I mean the masked textarea as drop target, wasn’t it?
Credit added in the most recent commit.
I have never seen it before I saw your demo, and the fact that Excel and Calc drop data as tab delimited – who would have expected that – very cool side effect.
thanks, and yes, talking about Ext JS, one with best look and feel, maybe a dedicated cursor would be nice
Just my opinion, good stuff in any case
Sorry, I forgot, you can copy a table in an HTML page and past them as well … let’s say it’s a clipboard feature, I guess, so it is re-usable for lot of stuff!
Great work. Animal made a plugin which could export from a grid to Excel – nice to know we can do it the other way round too
ok thats really hot!
i think a lot of people will love this!!!
Interesting to note that the data is actually removed from the OOCalc worksheet when it’s dragged into the grid (at least with OOCalc 2.3 on Windows XP)
Absolutely fantastic !!!
it has an issue however.
on empty cells, it will shift the columns left. and they will not corespond any more.
how cant that be fixed? ( imean i need empty cells in xls to be ported in that array grid)
i find this a very useful plugin. nice job.
Hmmm…in FireFox 3 (Mac) and Safari 4 (Mac) it doesn’t register the mouse over until you re-focus the browser window, so it doesn’t quite work in the way your video shows it. You have to drag the rows into the grid, then click to focus the window. (This is using r12 of your plugin)
Interestingly enough it works on FireFox and Safari on the PC (Vista)!
Nice.