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.

 {
	xtype: 'grid',
	...,
	plugins: [Ext.ux.grid.DataDrop],
	...
}  

Check out the screencast below to see it in action – I am dragging rows of data from OpenOffice Calc directly to an ExtJS Grid.

Demo: http://www.vinylfox.com/docs/?class=Ext.ux.grid.DataDrop
Download: http://code.google.com/p/ext-ux-datadrop/source/browse/trunk/src/Ext.ux.DataDrop.js
Source: http://www.vinylfox.com/datadrop-drag-grid-data-from-spreadsheet/

Related Listings:

1. jQuery Grid Script At end 3.0 (rc) version of jqGrid is out. This...
2. Drag Drop Tree – EXTJs This script shows basic drag and drop node moving in...
3. Grid Column Sizing This plugin, applied to a number of HTML tables, provides...
4. Web-based Spreadsheet using Jquery jQuery.sheet gives you all sorts of possibilities when it comes...
5. Jquery.grid.rowSizing # This plugin, applied to n-tables of an HTML page,...

Do you like this post?

Email: