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