Tabulator: like cell.edit() , how to programtically save/discard cell edits

[mohanen]

Hi oli,

We love your tabulator , i use it many places , because of its robustness .

I have a table where it can be edited by clicking an edit icon (separate column) in the row , clicking edit opens all editors in that row .

Once all editors are triggered the edit icon becomes Save / Cancel Icons . By clicking save, all cell elements in that should be saved.

//editor for the edit button
var editSaveCancel = function(cell, onRendered, success, cancel){
            var save = "<i id='' class='fa fa-check-circle m-r-xs saveEdits' style='font-size:1.2rem'></i>";
            var cancel = "<i  id='' class='fa fa-times-circle cancelEdits' style='font-size:1.2rem'></i>";

            var editor = $(
                "<div>" +
                save + 
                cancel +
                "</div>"
            );

            var cells = cell.getRow().getCells();
            var i = 0;
            while (cells[i]) {
                cells[i++].edit();
            }

            editor.css({

            });

            editor.find('saveEdits').click(

            );

            onRendered(function(){
                editor.focus();
            });

            var user = cell.getRow().getData();

            editor.on("change blur", function(e){
                //need to cancel all changes
            });

                editor.find('.saveEdits').click(function (e) {
                $.post('/users/ajax/updateData',{
                    id : user.id,
                    //include all changed values here in json
                },function (data) {
                    if(data === "ok") {
                        success();
                    }

                })

            });

            editor.find('.cancelEdits').click(function (e) {
                console.log('.cancelEdits');
                e.stopPropagation();
                //need to cancel all changes
            });

            //return the editor element
            return editor;
        };

[olifolkerd]

Hey,

Thanks for your kind words, it is greet to hear people are enjoying using Tabulator.

That is an interesting idea you have there. if you are trying to trigger the change of multiple cells at the same time i would avoid using the *success function, as editors are only really designed to be used one at a time,

There are two approaches you could try instead, you could call the cell.setValue() function passing in the value of the cell.

or you could use the row.update() function and pass in an object with the values of all of your updated cells, this may be the best option as it will run the update for all the changed cells at once and reformat the row.

Cheers

Oli

[mohanen]

Ok but How do i get the all the (current editor values of that cell) cell edits that are made in that row

[olifolkerd]

I would suggest create a variable outside of the table, lets call it rowDataUpdated, every time someone clicks your edit button you set this equal to {}

You then want to create a custom editor for your cells that is pretty much the same as the standard input editor, but replace the success function with:

rowDataUpdated[cell.getField()] = editor.val();

This will prevent the cells from closing their editor and will pass the result of the edit to the rowDataUpdated object.

you will probably also need to comment out the cancel() function if it is used in the editor anywhere

you can then cal row.update(rowDataUpdated) when the user clicks save.

Cheers

Oli