Importing an Excel Spreadsheet into an ExtJS DataGrid using DataDrop Grid Plugin

March 8, 2010 | By

extjs datadrop excel grid plugin Importing an Excel Spreadsheet into an ExtJS DataGrid using DataDrop Grid Plugin

This tutorial will walk through how to import an Excel Spreadsheet into a DataGrid using DataDrop Plugin (by Shea Freaderick).

Last week I was looking for a plugin that would allow me to import data from an excel file.

I did not find any plugin on ExtJS forum that works like export excel from grid; I mean, a plugin I do not need any server side code – I could use file upload plugin and do the whole logic thing on server side, but that is not what I was looking for. However, I did find an interesting plugin. Actuality, this plugin I found is awesome! The coolest ExtJS grid plugin I have ever seen! It is really amazing!

So, what is this plugin I am talking a lot about it?

It is called DataDrop developed by Shea Frederick (a.k.a VinylFox) and you can drag data into an ExtJS Datagrid from a spreadsheet.

It is very helpful if you need to import some data from an Excel file. In my point of view, I think it is not good plugin if you need to import large amount of data, because it is not very practical to select a large amount of rows and columns from a spreadsheet. It works very well with any file size, though.

What do you need to use this plugin?

1 – Download plugin from author’s repository (Google code)

2 – Add javascript import to your html page (along with your other ExtJS imports)

	<script src="/extjs-grid-dragdrop-excel/js/datadrop-plugin/Override.js"></script>
	<script src="/extjs-grid-dragdrop-excel/js/datadrop-plugin/Ext.ux.DataDrop.js"></script>

3 – Add “Ext.ux.grid.DataDrop” to your datagrid plugins declaration

    // create grid
    var grid = new Ext.grid.GridPanel({
        store: store,
        columns: [
            {header: "NAME", width: 170, sortable: true, dataIndex: 'name'},
            {header: "PHONE #", width: 150, sortable: true, dataIndex: 'phone'},
            {header: "EMAIL", width: 150, sortable: true, dataIndex: 'email'},
            {header: "BIRTHDAY", width: 100, sortable: true, dataIndex: 'birthday',
            	renderer: Ext.util.Format.dateRenderer('m/d/Y')}
        ],
        plugins: [Ext.ux.grid.DataDrop],
        title: 'My Contacts',
        autoHeight:true,
        width:590,
		renderTo: document.body,
		frame:true
    });

You can download a working example from my Github repository: http://github.com/loiane/extjs-grid-dragdrop-excel

Other observations:

On VinylFox website, there is a video that demonstrates how to use the plugin with Open Office.

In my first attempt to run my example, I tried to select data from Microsoft Excel and drag and drop into datagrid, but I could not find how to do it (yes, I know, I’m totally M$ Excel newbie – just know how to do simple math – shame on me) – it is so easy to drag data from Open Office and Lotus Symphony – you can click on any place!

If you are newbie just like me, I recorded a video demonstrating how to do it:

Happy coding!

Filed in: ExtJS | Tags: , , , ,

Comments (12)

  1. It work´s in Excel at least Office 2010 too.
    Just need to point cursor to thed edge of selected cells. Than it will change pointer, click and drag to ExtJs.

  2. Hari

    Awesome tutorial…

    Thanks for this tutorial.

  3. Taguchi

    Hi Loaine,

    Great tutorial…

    BTW, which program would you recommend for video recording on the desktop and screen casts?

    Taguchi

  4. Diego Armando Vargas Salazar

    hi i saw your example and it works fine, but i need to export a grid with a JSonStore to excel file, and the examples i`ve seen works with a SimpleStore for the grid, but when i change it for a JSonStore, it only export the colomn names, but there are no records into… can you help me pleas !!

    • Loiane

      Hi Diego,

      I’ve never had this issue before. It is supposed to work with any store.
      Please reach the plugin author for further details about it.

  5. Taguchi

    Hi Loiane,

    Thanks for the tip on Camtasia. Will definitely check it out!

    Taguchi

  6. Tony

    Hi folk,
    I’m used the plugin with EditorGridPanel (version ExtJS 3.3) and iExplorer 7 or superior but I have a error in override.js file line 46 (“this.dom.fireEvent(e, evt);”), the error occurs when I click a cell, with propertie editable=true, and after click a other cell into grid. Any idea?
    Thanks in advance.

  7. kprk

    HI Loiane,

      I need this plugin for my import functionality, but I am using EXTJS 4, is this work for latest version ?