Combine inline editor and custom display controller

Combine inline editor and custom display controller

weyard01weyard01 Posts: 1Questions: 1Answers: 0

Hello,
I'm playing around with datatables and the inline editor and I wanted to have the possibility to create new data within an empty line at the bottom of the table. I searched a lot and it came out it is currently not possible.
So I've taken the path of custom display controller to achieve this but now I'm stuck because when I activate inline editor on my table, the creation form just disapear and I need to refresh the page.

The idea is to combine both so I have a datatable I can inline edit and a permanent form "row"a t the bottom of the table to add new data.

Do you have any ideas or suggestions ?

Thank you very much

Answers

  • kthorngrenkthorngren Posts: 20,294Questions: 26Answers: 4,768

    I wanted the same just to create a new row then inline edit. I created a button and use the Editor API's to create a new row in the DB which is then displayed. Here is an example of what I'm using:

                {
                    text: 'Create New',
                    action: function ( e, dt, node, config ) {
                        
                        runner_editor
                            .create(false)
                            .set("name", "Change Me")
                            .set("tr_id", '')
                            .set("fk_tests_list", 0)
                            .set("stopped", 1)
                            .set("started", 0)
                            .set("running", 0)
                            .set("enabled", 0)
                            .submit(
                                function () {
                                    runner_table
                                        .rows( function ( idx, data, node ) {
                                            return data.name === 'Change Me' ?
                                                true : false;
                                        } )
                                        .select();
                                }
                            );
                    }
                        
                },
    
    

    I just set default values for each Editor field then submit. Placing a row at the end of the table is difficult depending on how you have your sorting setup. I just use "Change Me" for the name field then select that row using the Select Extension.

    Currently my table fits on one page so not sure what will happen if the new row lands on another page. You can force it to the top via sorting or maybe use the row().show() plugin to jump to the page with the new row.

    Kevin

This discussion has been closed.