1. #1
    Sencha User
    Join Date
    Feb 2012
    Posts
    19
    Vote Rating
    0
    kappiil is on a distinguished road

      0  

    Default Import CSV file to Data Grid

    Import CSV file to Data Grid


    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

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    8,998
    Vote Rating
    456
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    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.

  3. #3
    Sencha User
    Join Date
    Jan 2008
    Location
    Levittown, PA
    Posts
    316
    Vote Rating
    2
    mjhaston is on a distinguished road

      0  

    Default


    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?

  4. #4
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    8,998
    Vote Rating
    456
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    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.

  5. #5
    Sencha User
    Join Date
    Jan 2008
    Location
    Levittown, PA
    Posts
    316
    Vote Rating
    2
    mjhaston is on a distinguished road

      0  

    Default


    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!

  6. #6
    Sencha User
    Join Date
    Jan 2008
    Location
    Levittown, PA
    Posts
    316
    Vote Rating
    2
    mjhaston is on a distinguished road

      0  

    Default


    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.

  7. #7
    Sencha User
    Join Date
    Jan 2008
    Location
    Levittown, PA
    Posts
    316
    Vote Rating
    2
    mjhaston is on a distinguished road

      0  

    Default


    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:
    Code:
    {
        "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.


    Code:
    		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'
    Code:
    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';
    				}
    			}
    		}

  8. #8
    Sencha User
    Join Date
    Jan 2008
    Location
    Levittown, PA
    Posts
    316
    Vote Rating
    2
    mjhaston is on a distinguished road

      0  

    Default


    Figured it out. Doh!

    Code:
    		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....

  9. #9
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    8,998
    Vote Rating
    456
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    Good news .. glad to hear ...

    Scott.

  10. #10
    Sencha User
    Join Date
    Jan 2008
    Location
    Levittown, PA
    Posts
    316
    Vote Rating
    2
    mjhaston is on a distinguished road

      0  

    Default


    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?

    Code:
    					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();

Thread Participants: 2