Automatic selection of an added row

Automatic selection of an added row

GargiucnGargiucn Posts: 104Questions: 29Answers: 0

I am a satisfied Editor user in serverside mode and bootstrap4 with pagination.
I use tabs for parent / child editing and pagination (see image).

I would like a new row added in "Anagrafica" to be automatically selected in order to enable the "Riferimenti" and "Diario" tabs for inserting new data without looking for the row in the pages in alphabetical order.
The selected page should become the one where the row is located and it should be highlighted.
Is it possible to do such a thing?
Thank you,
Giuseppe

This question has accepted answers - jump to:

Answers

  • GargiucnGargiucn Posts: 104Questions: 29Answers: 0

    Clarification: I use:

    responsive: true,
    processing: true,
    serverSide: true,
    deferRender: true,
    
  • GargiucnGargiucn Posts: 104Questions: 29Answers: 0

    I tried with:

        cliEditor.on( 'submitComplete', function ( e, json, data, action ) {
            if ( action === 'create' ) {
                cliTable
                    .one( 'draw', function () {
                    cliTable
                        .row( function ( idx, data, node ) {
                            return data.clienti.cli_ragsoc == 'Paperino';
                        } )
                        .select();
                    } )
                    .row( function ( idx, data, node ) {
                        return data.clienti.cli_ragsoc == 'Paperino';
                    } )
                    .scrollTo();
            }
        } );
    

    but it only works if:

    paging: false,
    
  • colincolin Posts: 15,115Questions: 1Answers: 2,583

    This thread should help, it's asking the same thing.

    Cheers,

    Colin

  • GargiucnGargiucn Posts: 104Questions: 29Answers: 0

    It seems to me not because he uses scrollTo() and not pagination...

    Thanks anyway,

    Giuseppe

  • GargiucnGargiucn Posts: 104Questions: 29Answers: 0

    I tried with the plugin
    page.jumpToData ().js
    but without results...

    cliEditor.on( 'submitComplete', function ( e, json, data, action ) {
        if ( action === 'create' ) {
        cliTable.one( 'draw', function () {
             cliTable.row( "#row_" + data.clienti.cli_id ).select();
        } );
        cliTable.page.jumpToData( data.clienti.cli_ragsoc, 0 );
            // field Denominazione
        }
    } );
    
  • GargiucnGargiucn Posts: 104Questions: 29Answers: 0

    The value of pos in jumpToData plugin:

        var pos = this.column(column, {order:'current'}).data().indexOf( data );
    

    always returns -1

  • colincolin Posts: 15,115Questions: 1Answers: 2,583

    Yep, sorry, that thread was for no paging, my apologies. You can use another plugin for that row().show() - this takes you to the page - within postCreate that was discussed on the thread I mentioned. See example here.

    Colin

  • GargiucnGargiucn Posts: 104Questions: 29Answers: 0

    I tried using the row (). show () plugin as in your example.
    console.log:

    page_info {page: 0, pages: 11, start: 0, end: 10, length: 10, …}
    page: 0
    pages: 11
    start: 0
    end: 10
    length: 10
    recordsTotal: 106
    recordsDisplay: 106
    serverSide: true
    clienti.js:48 new_row_index undefined
    clienti.js:53 row_position -1
    clienti.js:56 stay on page
    

    always returns:
    new_row_index undefined
    row_position -1

  • GargiucnGargiucn Posts: 104Questions: 29Answers: 0

    I have tried both ways:

        cliEditor.on('postCreate', function(e, json, data, id) {
            cliTable.row( "#row_" + data.clienti.cli_id ).show().select().draw(false);
        } );
    

    and

        cliEditor.on( 'submitComplete', function ( e, json, data, action ) {
            if ( action === 'create' ) {
                cliTable.row( "#row_" + data.clienti.cli_id ).show().select().draw(false);
            }
        } );
    
  • GargiucnGargiucn Posts: 104Questions: 29Answers: 0

    I noticed that using

        cliEditor.on('postCreate', function(e, json, data, id) {
            cliTable.row(':eq(0)', { page: 'current' }).select();
        } );
    

    If I add a row that will become the first row of the table the select will take place on the next row (see image).
    This makes me think that the row ().show () function returns undefined because the row has not yet been loaded (sorry for my way of expressing myself)...

  • colincolin Posts: 15,115Questions: 1Answers: 2,583

    That's odd, as it's working in my example. Please can you update my example, or link to your page, so that we can see the problem.

    Cheers,

    Colin

  • GargiucnGargiucn Posts: 104Questions: 29Answers: 0

    Thanks for the answer, i can't update your example because i use mysql and i am wondering if this is not what causes the difference in behavior ...
    I noticed that your example correctly selects the new row but does not automatically select the page to view it.

    Giuseppe

  • colincolin Posts: 15,115Questions: 1Answers: 2,583

    Ooo it doesn't - it was yesterday, let me take a look - I'll report back in a tick.

  • colincolin Posts: 15,115Questions: 1Answers: 2,583

    Apologies about that, I'd made a tweak before pasting it that broke the example! Here it is, behaving as expected.

  • GargiucnGargiucn Posts: 104Questions: 29Answers: 0

    Now your example works perfectly and the value of new_row_index in the plugin is never "undefined" and row_position is never "-1" as in my case.
    Thank you very much for your patience...
    I hope to be able to solve this problem.

    Giuseppe

  • colincolin Posts: 15,115Questions: 1Answers: 2,583

    The key was the draw(), reply back if you have problems, happy to help.

    Colin

  • GargiucnGargiucn Posts: 104Questions: 29Answers: 0

    I think the fact that the plugin doesn't work for me can be related to the use of a database.
    Probably when postCreate is executed the informations for the new row to send to the plugin row().show() are not yet available ...
    But I can't understand if it really is.

    Giuseppe

  • colincolin Posts: 15,115Questions: 1Answers: 2,583

    That's possible. Try using submitSuccess instead, this is called later in the process after all the data has been processed and returned - something like this.

    Colin

  • GargiucnGargiucn Posts: 104Questions: 29Answers: 0

    I tried but in both cases I get the same result (new_row_index = undefined) both with pagination and by displaying all the rows.

        var LastId  
        cliEditor.on('postCreate', function(e, json, data, id) {
            LastId = id; /* value of LastId = row_26 */
        } );
    
        cliEditor.on( 'submitComplete', function ( e, json, data, action ) {
            if ( action === 'create' ) {
                1) cliTable.row( "#" + LastId ).show().select().draw(false);
                /* LastId = row_26 */
                2) cliTable.row( "#row_" + data.clienti.cli_id ).show().select().draw(false);       
                /* data.clienti.cli_id = 26 */
    
            }
        } );
    
    

    Do you think I correctly pass the value of the record to the plugin?

    Instead with the jumpToData plugin I checked that the pos value in the plugin is = -1 only when I use pagination and it returns a real value by displaying all the lines.

    cliTable.page.jumpToData( "John Holmes", 1 );
    

    This made me think if I am correctly passing the record value to the plugin row().show()

    Giuseppe

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    1) cliTable.row( "#" + LastId ).show().select().draw(false);

    This code snippet works here:
    http://live.datatables.net/dekodebi/1/edit

    Do you think I correctly pass the value of the record to the plugin?

    Its hard to say without actually seeing it. You have /* LastId = row_26 */. Have you confirmed this with using console.log statements or the debugger?

    Are you using rowId to set the row ID?

    Are you seeing errors in your browser's console?

    Kevin

  • GargiucnGargiucn Posts: 104Questions: 29Answers: 0

    LastId = row_26 confirmed using console.log like other parameters from plugin:

    page_info {page: 0, pages: 11, start: 0, end: 10, length: 10, …}
    page: 0
    pages: 11
    start: 0
    end: 10
    length: 10
    recordsTotal: 106
    recordsDisplay: 106
    serverSide: true
    clienti.js:48 new_row_index undefined
    clienti.js:53 row_position -1
    clienti.js:56 stay on page
    

    and in particular:

    new_row_index undefined
    
  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    Sorry missed the fact that you are using Server Side Processing (SSP). Plugins like row().show() work with the client side data. With SSP the client side data is the data shown on the page.

    I don't think there is a simple answer to jump to the page the Created data is on with SSP. The page info will need to come from the server based on the server knowing the page length and the data to search for.

    I don't have a specific answer for this. There may be answers on the forum. I would look at doing something like the following:

    Provide the page length in the Create Ajax request maybe using preSubmit.
    The server response will contain an additional data object with the page number, In submitComplete you can use page() to jump to the page.

    Kevin

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    Answer ✓

    I don't think there is a simple answer to jump to the page the Created data is on with SSP.

    Spot on as usual Kevin. The only way for this to be possible with server-side processing would be for the server to tell the client which page the row is on. Then the client can jump to that page.

    The client doesn't (and shouldn't in server-side processing) know anything about the data in the other rows, so there is no way for it to go searching through the other rows.

    Allan

  • GargiucnGargiucn Posts: 104Questions: 29Answers: 0

    I really thank you for the time and patience you have dedicated to me!

    Giuseppe

  • GargiucnGargiucn Posts: 104Questions: 29Answers: 0

    One thing comes to mind ...
    Would it be possible to force the new row once to position itself as the first row selected in the table, regardless of the sort order of the table?
    This would allow, using the tabs, to go directly to the compilation of the other information in the "referenze" and "diario" tabs.
    The following times the row must be searched according to the sorting settings.

  • colincolin Posts: 15,115Questions: 1Answers: 2,583
    Answer ✓

    Again, that is possible with the Absolute plugin, but that wouldn't work with serverSide for the same reasons as Kevin and Allan said above (sorry, I missed the fact that you were using server-side too!).

    Colin

This discussion has been closed.