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.

{<br /> xtype: ‘grid’,<br /> …,<br /> plugins: [Ext.ux.grid.DataDrop],<br /> …<br /> }

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

Ext.ux.DataDrop.js