CSV import with simpler flow

Blue Compass

Hello! I am following the CSV import example, but would like to remove the second popup where you can overwrite the data in columns (https://editor.datatables.net/examples/extensions/import.html). However, the ways I have tried don't prompt errors but also don't add the data to the table. I assume I'm not using the field.multiSet() function correctly but I'd appreciate any insight/help I could get.

allan

Perhaps you could show me what you've got so far? You could just call submit() on the second Editor immediately.

Allan

Blue Compass

// Display an Editor form that allows the user to pick 
        // the CSV data to apply to each column
        function selectColumns(editor, csv, header) {
            var selectEditor = new $.fn.dataTable.Editor();
            var fields = editor.order();

            for (var i = 0; i < fields.length; i++) {
                var field = editor.field(fields[i]);

                var lbl = field.label();
                console.log('a',lbl);

                selectEditor.add({
                    label: lbl,
                    name: field.name(),
                    type: 'select',
                    options: header,
                    def: header[i]
                });
            }

            selectEditor.create({
                title: 'Select CSV columns',
                buttons: 'Import ' + csv.length + ' records',
                message: 'Select the CSV column you want to use the data from for each field.'
            });

            selectEditor.submit();
            //selectEditor.on('submitComplete', function (e, json, data, action) {
            //    // Use the host Editor instance to show a multi-row create form allowing the user to submit the data.
            //    editor.create(csv.length, {
            //        title: 'Confirm import',
            //        buttons: 'Submit',
            //        message: 'Click the <i>Submit</i> button to confirm the import of ' + csv.length + ' rows of data. Optionally, override the value for a field to set a common value by clicking on the field below.'
            //    });

            //    for (var i = 0; i < fields.length; i++) {
            //        var field = editor.field(fields[i]);
            //        var mapped = data[field.name()];

            //        for (var j = 0; j < csv.length; j++) {
            //            field.multiSet(j, csv[j][mapped]);
            //        }
            //    }
            //});
        }

Blue Compass

I have the parse function below that as indicated in the sample

 var uploadEditor = new $.fn.dataTable.Editor({
            fields: [{
                label: 'CSV file:',
                name: 'csv',
                type: 'upload',
                ajax: function (files)
                {
                    // Ajax override of the upload so we can handle the file locally. Here we use Papa
                    // to parse the CSV.
                    Papa.parse(files[0],
                    {
                        header: true,
                        skipEmptyLines: true,
                        complete: function (results) {
                            if (results.errors.length) {
                                console.log(results);
                                uploadEditor.field('csv')
                                    .error('CSV parsing error: '
                                    + results.errors[0].message);
                            }
                            else {
                                uploadEditor.close();
                                selectColumns(
                                    editor,
                                    results.data,
                                    results.meta.fields
                                );
                            }
                        }
                   });
                }
            }]
        });

Blue Compass

This also doesn't work:

function selectColumns(editor, csv, header) {
            var selectEditor = new $.fn.dataTable.Editor();
            var fields = editor.order();

            for (var i = 0; i < fields.length; i++) {
                var field = editor.field(fields[i]);

                var lbl = field.label();
                console.log('a',lbl);

                selectEditor.add({
                    label: lbl,
                    name: field.name(),
                    type: 'select',
                    options: header,
                    def: header[i]
                });
            }

            selectEditor.create({
                title: 'Select CSV columns',
                buttons: 'Import ' + csv.length + ' records',
                message: 'Select the CSV column you want to use the data from for each field.'
            });

            //selectEditor.submit();
            selectEditor.on('submitComplete', function (e, json, data, action) {
                // Use the host Editor instance to show a multi-row create form allowing the user to submit the data.
                editor.create(false).submit();

                for (var i = 0; i < fields.length; i++) {
                    var field = editor.field(fields[i]);
                    var mapped = data[field.name()];

                    for (var j = 0; j < csv.length; j++) {
                        field.multiSet(j, csv[j][mapped]);
                    }
                }
            });
        }

Blue Compass

This only imports 1 row of data:

function selectColumns(editor, csv, header) {
            var selectEditor = new $.fn.dataTable.Editor();
            var fields = editor.order();

            for (var i = 0; i < fields.length; i++) {
                var field = editor.field(fields[i]);

                var lbl = field.label();
                console.log('a',lbl);

                selectEditor.add({
                    label: lbl,
                    name: field.name(),
                    type: 'select',
                    options: header,
                    def: header[i]
                });
            }

            selectEditor.create({
                title: 'Select CSV columns',
                buttons: 'Import ' + csv.length + ' records',
                message: 'Select the CSV column you want to use the data from for each field.'
            });

            //selectEditor.submit();
            selectEditor.on('submitComplete', function (e, json, data, action) {
                // Use the host Editor instance to show a multi-row create form allowing the user to submit the data.
                editor.create(false);

                for (var i = 0; i < fields.length; i++) {
                    var field = editor.field(fields[i]);
                    var mapped = data[field.name()];

                    for (var j = 0; j < csv.length; j++) {
                        field.multiSet(j, csv[j][mapped]);
                    }
                }

                editor.submit();
            });
        }

allan

Hi,

Did that selectEditor.submit(); not do it? Could you give me a link to your page please?

Thanks,
Allan

Blue Compass

I sent you a message with the URL.

Also, my enter key has stopped submitting data to the form, and the tab between cells no longer updates.

bremg

How about posting the answer?

Nothing seems to work with the bloated example

kthorngren

@bremg

Please see my answers in the other thread you posted in.

Kevin