Import CSV file to Data Grid

[kappiil]

I would like to import the data of CSV file into Data grid. Is there any Plugin for the same in ExtJS 4? Please let me know how could I achieve it quickly with/without plugin.

Thanks
Kapil

[scottmartin]

You can use split to convert the data to a record, or use a CSV->JSON converter. There are numerous converters/tutorials available online.

Scott.

[mjhaston]

Sorry to revive this thread, but I have the same question. I already have a textareafield where I can type or paste csv data into ... click a button ... and have that data parsed and loaded into a grid below.

The real option I'd like to give the user is a browse for file / upload of a .csv file and then do the same ... show the data in the grid.

Is a "local" upload possible so I can review and validate the file and structure before uploading to the server?

[scottmartin]

Local files are mostly off limits for security reasons .. there are a few exceptions with ActiveX and HTML5 options, but I have not tried them.

Why not upload to server the perform the actions from the server.

Scott.

[mjhaston]

I'm wondering the same. I'm just not sure what "grief" the server is going to give me when uploading and/or how to go about validating it. Thinking along your lines though I could upload file and then try and load a grid along with error messages for each cell.

Maybe my bigger problem is how to validate the .csv file? There could be so many varieties of issues!

[mjhaston]

Thanks Scott. I think I might try and tackle this on the server side and then see what I can feed back to a grid for editing.

[mjhaston]

Okay, I'm lost. All help is greatly appreciated.

I'm returning my "error checked" CSV data to a grid via JSON. I'm trying to flag cells that need additional work. I need to go cell by cell down a row and mark the errors.

My JSON looks like this:

{
    "success": true,
    "data": [
        {
            "id": "1",
            "first": "John",
            "e01": "",
            "last": "Doe",
            "e02": "",
            "addr1": "123 Main Street",
            "e03": "",
            "addr2": "APT B",
            "e04": "",

My thought is to return error codes with each field. I came across getRowClass which I did get to change some cells, but I couldn't control it the way I need.

		columns : [{
			text : 'first',
			dataIndex : 'first',
			xtype : 'gridcolumn',
			tdCls : 'x-change-cell'
		}, {
			text : 'last',
			dataIndex : 'last',
			xtype : 'gridcolumn',
			tdCls : 'x-change-cell'
		}, {
			text : 'addr1',
			dataIndex : 'addr1',
			xtype : 'gridcolumn',
			tdCls : 'x-change-cell'

viewConfig : {
			stripeRows : true,
			enableTextSelection : true,
			getRowClass : function(record, index) {
				//console.log(record, index)
				var e01 = record.get('e01');
				console.log(e01)
				if (e01 !== "") {
					return 'is-error';
				} else {
					return 'is-okay';
				}
			}
		}

[mjhaston]

Figured it out. Doh!

		columns : [{
			text : 'first',
			dataIndex : 'first',
			xtype : 'gridcolumn',
			renderer : function(value, metaData, record) {
				if (record.data.e01 !== "") {
					metaData.tdAttr = 'data-qtip="' + record.data.e01 + '"';
					metaData.style = 'color:#D10000;font-weight:bold;background:#F7E4E4;'
					return value;
				} else {
					return value;
				}
			}
		}, {
			text : 'last',
			dataIndex : 'last',
			xtype : 'gridcolumn',
			renderer : function(value, metaData, record) {
				console.log(value)
				if (record.data.e02 !== "") {
					metaData.tdAttr = 'data-qtip="' + record.data.e02 + '"';
					metaData.style = 'color:#D10000;font-weight:bold;background:#F7E4E4;'
					return value;
				} else {
					return value;
				}
			}
		}, {

Etc....

[scottmartin]

Good news .. glad to hear ...

Scott.

[mjhaston]

Believe it or not I'm making progress!

New question. I have rowData and can grab each record like I'm doing below. What I need to do is separate each field with a comma and then slap a CR or NL at the end of it.

Is there any type of encode function to help me at least put commas between fields?

					grid.getSelectionModel().selectAll();
					var sm = grid.getSelectionModel().getSelection();
					var rowData;

					// grab everything from the columns grid
					for ( i = 0; i <= sm.length - 1; i++) {
						rowData = sm[i].get('first') + ',' + sm[i].get('last');
					}
					grid.getSelectionModel().deselectAll();