Update Field on Excel Export while dynamicly populating select options

schwaluck

Hello all,

I have a table in which I load a dropdown field "Ort" dynamically, based on a field "Plz". For this I use editor.dependent as described in the docs.

editor.dependent( 'Von', '/api/getOrt');

The loading of the dropdown works fine, but now I have the following problem:

I want to set the value "exportiert" for each exported row in the column "Exportiert". However, my code only works if I have already carried out an update before clicking on the Excel button, because otherwise I always get the error that the "Ort" field is empty. I have already found out that the API call for dynamically loading the location options always happens after the editing of the rows through the "buttons-processing" event, but I don't know how to solve this problem.

My code:

    table.on( 'buttons-processing', function ( e, indicator, buttonApi ) {
        if ( indicator && buttonApi.text() == "Excel") {
            editor
            .edit(
                table.rows( { selected: true } ).indexes(),
                false
                )
            .set( 'Exportiert', 'exportiert' )
            .submit();      
    } );

Does anyone have an idea how I could solve this problem or where my fault is?

Best regards
schwaluck

schwaluck

I tried several things but didn't come up with a solution so far, but here are a few more details which I found out:

1. I use editor dependent, which works like a charm. Events for it are keyup and change. However, when the table is loaded for the first time, the values (for the field "Ort") are not in the editor at first (since the options of the select are empty and are loaded as soon as you try to edit the "plz" value).
   Note: I use a php validator which doesn't allow empty/null values for the field "Ort".

2. Now I wanted to set a value into one field after someone uses the excel export. This sadly always gives me the error, that the values for "Ort" are null, since they are not loaded beforehand the way I coded it so far.
   Checking the ajax request the following happens:
   At first the edit is fired, directy followed by my editor dependent call (
   editor.dependent( 'Von', '/api/getOrt');)

I just need a way to get the editor.dependent fire for all selected rows before the post of the edit is fired.

Is there someway I can achieve this?

I am very thankful for any help!

Kind regards,
Schwaluck

allan

Hi Schwaluck,

The dependent() method is only relevant for when editing - but it sounds like you are interested here in the export action (which is not editing).

To modify the data on export you want to use the exportOptions parameter of the buttons - see this example for how to do that.

Regards,
Allan

schwaluck

Hi Allan,

thanks for the reply.
I think I didn't quite explain my intention right, however I changed something to my code and need help with a related problem:

For now I want the option to have a custom button, which opens a second editor instance to edit some values (this works great so far with no issues!).
After the user submits the changes in this field, I want to call the action function of the excel export. However, I can't get this working.

I have tried those two approaches:

Code of my custom button (which works fine):

                    {
                        text: 'Rechnugsexport',
                        action: function ( e, dt, node, config ) {
                            //Show edit dialogue and hide the export buttons options
                            $('.dt-button-collection').hide();
                            $('.dt-button-background').hide();                          
                            $('.DTE_Action_Edit').css('zIndex', 65000);
                            
                            //open new instance of second editor, to submit some changes before exporting
                            editor2
                                .edit()
                                .title('Daten-Export vorbereiten')
                                .buttons('Exportieren')
                                //.field('Exportiert').set('exportiert')
                                .open();
                        }
                    }

Now I want to wait, until the user does a successful submit event. This was my first approach:

    editor2.on('submitSuccess', function() {
        $.fn.dataTable.ext.buttons.excelHtml5.action.call(this, e, dt, node, config);       
    });

However, this gives me the following error:
Uncaught ReferenceError: e is not defined

My second approach was to call the action function for the excel export in my custom button as well. However, this causes the issue that the excel export is opened before the user submits data.

Can someone help me with this issue?

Thanks a lot!

allan

Uncaught ReferenceError: e is not defined

Yes, because there is no e variable defined there. However, if you have an Excel button, then what you could do is trigger it (button().trigger()):

table.button(0).trigger();

If you didn't want to have the Excel export button visible, then make it hidden using CSS.

Allan

schwaluck

Hi Allan,

thanks for the quick response!
That was exactly the function I was looking for (but didn't find!).

It now works like a charm!

Have a nice weekend