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>()
- Importing an Excel Spreadsheet into an ExtJS DataGrid using DataDrop Grid Plugin | Loiane Groner
- Como Importar Arquivo Excel para um ExtJS DataGrid usando DataDrop Grid Plugin | Loiane Groner
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.
Adi,
I fixed this with my own custom splitter. Replace row[i].split(sepRe)
with splitRow(row[i]) where splitRow is:
function splitRow(arow) {
var running = “”;
var parts = new Array();
for(var k =0; k < arow.length; k++) {
if(arow[k] == "\t") {
parts.push(running);
running = "";
}
else{
running = running + arow[k];
}
}
parts.push(running);
return parts;
}
Great!Exactly the hack I was needing!
Works perfectly!
Thanks!
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.
Any way to get cut and paste to work as well — i.e. a user cuts a selection in a spreadsheet and uses the brower’s context menu to paste into the ext grid?
Hello All,
I am developing a GWT+EXT grid in Eclispe(Java). How do I implement this feature in my app?
I can’t figure out why the DataDrop does not work in Linux, both in Firefox and Chromium. I tried the same code under Windows IE and it works.
In Linux Chromium I have “paste” option in the right-click menu, but cannot paste or drag&drop the text from OpenOffice Calc.
In Firefox I even don’t have “paste” (or other textarea options) in the right-click menu.
Do you have any suggestions where should I look for the solution in the code?
Hello,
I’m trying to use the datadrop plugin which seems to work fine in Firefox (not sure of the version right now), but I’m getting an ‘unspecified error’ in IE 7. I’ve been unable to find what actually causes the error, but it seems to happen when I type into a grid cell and then click out of the cell. The result seems to be that I can’t click back into any cells on the grid. Has anyone else seen this type of behavior or error.
Thanks in advance for any suggestions/help.
Bill
This is great!
I have one problem though. My contextmenu is not showing/working once I added the plugin. Any ideas on that?
Other than that, this is great!
Thanks!
Interesting…I thought it would work with contextmenu, but havent tested it. Can you post an example of how you setup your contextmenu?
This is my setup. I’m not sure why but when I remove the plugin, the contextmenu shows up.
//—————–CONTEXTMENU——————//
this.mycontextmenu = new Ext.menu.Menu({
items: [{
text: 'Copy',
scope: this,
handler: function()
{
//do something
}
}, {
text: 'Paste',
disabled: true,
scope: this,
handler: function()
{
//do something
}
}, {
text: 'Insert Copied Record(s)...',
disabled: true,
scope: this,
handler: function()
{
//do something
}
}, '-', {
text: 'Insert Row Above',
id: 7,
scope: this,
handler: onItemClick1
}, {
text: 'Insert Row Below',
id: 8,
scope: this,
handler: onItemClick1
}]
});
//—————–EDITORGRID——————//
this.myGrid = new Ext.grid.EditorGridPanel({
store: myStore,
autoHeight: true,
animCollapse: true,
cm: myCm,
clicksToEdit:1,
ddGroup : ‘embGrid-dd’+ FormData.RequestId,
ddText : ‘Transfer this row.’,
enableColumnHide: false,
enableColumnMove: false,
enableColumnResize: true,
enableHdMenu: false,
enableDragDrop : true,
frame: true,
loadMask: true,
plugins: [Ext.ux.grid.DataDrop],
stripeRows: true,
viewConfig:{forceFit:true},
width: 690,
listeners: {
cellcontextmenu: {
scope: this,
fn: function(grid, row, col, event)
{
grid.getSelectionModel().selectRow(row);
x = event.browserEvent.clientX;
y = event.browserEvent.clientY;
if (this.myCopiedRecord != null)
{
this.mycontextmenu.items.items[1].enable();
}
this.mycontextmenu.showAt([x,y]);
}
},
afterEdit: {
scope: this,
fn: function(e) {
//do something
}
}
}
});
I am new to using 3rd party “plug-ins” and the ability to drag/drop tabulated data from Excel to an ASP.NET GridView is something I need to implement as a matter of urgency.
I have looked at the source for this excellent concept but do not know how to implement it!!!!
Does anyone have a some simple example source code that they can show me that uses this drag/drop functionality with an GridView????
Regards,
Guy
You should check out the examples folder, there is a simple example of using this plugin in a grid.
https://github.com/VinylFox/ExtJS.ux.DataDrop/tree/master/examples/grid
Hi Shea, can this one used for extjs 4.* versions ?
It can be used with Ext4, but some modifications are needed. It’s all open source, so feel free to fork it on Github and make the changes.
Has anyone tried successfully with ExtJS 4? Please let me know if anyone has done.
Thanks
Kapil
Hi, thas plugin is awesome !!!!…
but i get a ask for you…
Can i use it in Extjs 4.0???
i need urgent !!!
It’s all open source, feel free to fork it on Github and make the needed changes yourself.
Luis, have you done it?
Thanks
Kapil
All i gotta say is….
EPIC
Great demonstration! thanks for the video.