Tabulator: Focus on current cell after update row

[crushcafeteria]

This tables plugin is just great!

I am building a wide data grid whose best user experience depends on cell navigation with the TAB key. The cells are editable. When a cell is blurred, its contents are send to the server via AJAX. The response of this AJAX request contains an updated row object which is used to update the row on the grid. My problem is when you press Tab from a cell, it focuses the next cell briefly and as soon as the AJAX request is complete, the row is updated and the focused cell goes away.

Any advise here?

[olifolkerd]

Hey,

Thanks for your kind words :)

If you call an update row function the row is redrawn which is why it is loosing focus, are you returning any new data as a result of the request? does the row actually need to be updated or could you just send the data to the server without updating the row?

Cheers

Oli

[sean-magin]

I don’t know the answer, but that live demo tool is awesome~! how are you doing that?

On 15/06/2017, at 9:39 AM, Nelson Ameyo [e-mail] wrote:

This tables plugin is just great!

I am building a wide data grid whose best user experience depends on cell navigation with the TAB key. The cells are editable. When a cell is blurred, its contents are send to the server via AJAX. The response of this AJAX request contains an updated row object which is used to update the row on the grid. My problem is when you press Tab from a cell, it focuses the next cell briefly and as soon as the AJAX request is complete, the row is updated and the focused cell goes away.

Any advise here?
https://user-images.githubusercontent.com/1842480/27155795-ffebb56c-5162-11e7-984c-705238d5881c.gif
—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub https://github.com/olifolkerd/tabulator/issues/367, or mute the thread https://github.com/notifications/unsubscribe-auth/ANjTDvoAJYgPJ1mG5R7XfUCkgLkPA9lEks5sEFMDgaJpZM4N6eZJ.

[crushcafeteria]

@Sm00g15 Glad you like it. I am using Peek which you can find here: https://github.com/phw/peek. Running on Ubuntu but im sure you can compile for your OS if required. I also throttled the network on Chrome developer to GPRS so the request can be slow enough to do the demo. You can throttle on the network tab.

[crushcafeteria]

@olifolkerd Yes, absolutely. I have to redraw the cell because its total value gets updated when a few (not all) values are summed up and the total has to be updated immediately. I tried to do it in JS but gave up because I was writing spaghetti. So I just let the server backend do all that heavy lifting since it already knows the fields that need summing.
Is there a way to update just one cell or update the row then return focus to the active cell before the update?

[olifolkerd]

I will have a look into it this weekend. Thinking about it there is no need to redraw the whole row, it could just iterate through and update the values without changing the elements.

I should have a solution in for you this weekend.

Cheers

Oli

[crushcafeteria]

Looking forward to it, man. I have been working with grids for a few years
and even SlickGrid is working very hard to catch up with this. Tabulator is
officially the king of this shit!

On Jun 15, 2017 9:39 AM, "Oli Folkerd" [e-mail] wrote:

I will have a look into it this weekend. Thinking about it there is no
need to redraw the whole row, it could just iterate through and update the
values without changing the elements.

I should have a solution in for you this weekend.

Cheers

Oli

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/olifolkerd/tabulator/issues/367#issuecomment-308643042,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABwdMHNBVu5WeHP7dGW43x8g-Er00kGXks5sENGwgaJpZM4N6eZJ
.

[olifolkerd]

Hey,

Thanks for your kind words! Its great to hear that Tabulator is appreciated :)

I have just committed an update to the 3.1 branch that should fix the issue for you, there should be an official release of 3.1 by the end of Sunday.

Cheers

Oli

[crushcafeteria]

Hey Oli,
This update is works good. However, it still reverts focus to the previous cell after saving even after Tabbing onto the next one. See result below:-

I need it to act just like a spreadsheet because it will be used to enter large amounts of info. See this spreadsheet example below:-

Is there any way I can retain the focused cell after the update?

[olifolkerd]

can you send over your tabulator constructor object so i can try and replicate your issue, as that doesn't seem to happen my end.

Cheers

Oli

[crushcafeteria]

Here is my constructor:-

$('.grid').tabulator({
    fitColumns: true,
    placeholder: 'Loading marksheet...',
    selectable: true,
    movableRows: true,
    pagination: 'remote',
    ajaxURL: 'http://example.com/marksheet/1/49/datapoint',
    paginator: function (url, pageNo, pageSize, ajaxParams) {
        return 'http://example.com/marksheet/1/49/datapoint?page=' + pageNo;
    },
    columns: [
        {
            title: 'ADM',
            field: 'admission_no',
            align: 'center',
        },
        {
            title: 'Student Names',
            field: 'names',
            align: 'left',
            width: 200,
        },
                            {
                title: 'MAT',
                field: '1',
                headerSort: false,
                align: 'center',
                editor: 'input',
                tooltipHeader: 'Mathematics',
                editable: editCheck
            },
                            {
                title: 'ENG',
                field: '2',
                headerSort: false,
                align: 'center',
                editor: 'input',
                tooltipHeader: 'English',
                editable: editCheck
            },
                            {
                title: 'KIS',
                field: '3',
                headerSort: false,
                align: 'center',
                editor: 'input',
                tooltipHeader: 'Kiswahili',
                editable: editCheck
            },
                            {
                title: 'BIO',
                field: '4',
                headerSort: false,
                align: 'center',
                editor: 'input',
                tooltipHeader: 'Biology',
                editable: editCheck
            },
                            {
                title: 'CHE',
                field: '5',
                headerSort: false,
                align: 'center',
                editor: 'input',
                tooltipHeader: 'Chemistry',
                editable: editCheck
            },
                            {
                title: 'PHY',
                field: '6',
                headerSort: false,
                align: 'center',
                editor: 'input',
                tooltipHeader: 'Physics',
                editable: editCheck
            },
                            {
                title: 'GEO',
                field: '7',
                headerSort: false,
                align: 'center',
                editor: 'input',
                tooltipHeader: 'Geography',
                editable: editCheck
            },
                            {
                title: 'D/D',
                field: '9',
                headerSort: false,
                align: 'center',
                editor: 'input',
                tooltipHeader: 'Drawing & Design',
                editable: editCheck
            },
                            {
                title: 'B/C',
                field: '10',
                headerSort: false,
                align: 'center',
                editor: 'input',
                tooltipHeader: 'Building & Construction',
                editable: editCheck
            },
                            {
                title: 'A/D',
                field: '11',
                headerSort: false,
                align: 'center',
                editor: 'input',
                tooltipHeader: 'Art & Design',
                editable: editCheck
            },
                            {
                title: 'HIS',
                field: '12',
                headerSort: false,
                align: 'center',
                editor: 'input',
                tooltipHeader: 'History & Government',
                editable: editCheck
            },
                            {
                title: 'AGR',
                field: '13',
                headerSort: false,
                align: 'center',
                editor: 'input',
                tooltipHeader: 'Agriculture',
                editable: editCheck
            },
                            {
                title: 'CRE',
                field: '14',
                headerSort: false,
                align: 'center',
                editor: 'input',
                tooltipHeader: 'Christian Religious Education',
                editable: editCheck
            },
                            {
                title: 'FRE',
                field: '15',
                headerSort: false,
                align: 'center',
                editor: 'input',
                tooltipHeader: 'French',
                editable: editCheck
            },
                            {
                title: 'B/S',
                field: '16',
                headerSort: false,
                align: 'center',
                editor: 'input',
                tooltipHeader: 'Business Studies',
                editable: editCheck
            },
                        {
            title: 'Total',
            field: 'total',
            align: 'center',
            headerSort: false,
            tooltipHeader: 'Total Marks'
        },
    ],
    cellEdited: function (cell) {
        // Persist changes
        $.post(
            'http://example.com/marksheet/save',
            {
                payload: btoa(JSON.stringify(cell.getRow().getData())),
                assessmentID: '49',
                classID: '1'
            }, function (res) {
                // Update total marks
                $('.grid').tabulator("updateData", res.payload);


                cell.getElement().focus()

            }
        )
    },

    rowContext:function(e, row){
        // prevent the browsers default context menu form appearing.
        e.preventDefault();
    },
    rowClick:function(e, row){
        console.log('Primary Key ==> ' + row.getData().id)
    },
})

// Filter table data
$('.txtFilter').keyup(function () {

    // Rid all data filters
    $('.grid').tabulator('clearFilter');

    var filter = $(this).val()
    if (filter.length) {
        $('.grid').tabulator('addFilter', 'names', 'like', filter);
    }
})

var editCheck = function (cell) {
    var data = cell.getRow().getData()
    return data['editable_' + data.id]
}

[olifolkerd]

Hey,

Looking at the code, the reason it is reverting back to the previous cell is because after you ajax function returns you are calling cell.getElement().focus() on the cell that you just finished editing, which is setting focus on it again.

If you remove that line you should be good :)

[crushcafeteria]

My bad... I'll pay much more attention to reviewing my code in the future.
Thanks alot man!