0

I am using tabulator 4.7 and I have an annoying issue when I interact with tabulator objects in my page: if I perform whatever operation in a tabulator object on my page my, the page is scrolled to the top.

This occurs when I add a row, when I try to sort a column when I redo a step.

Do you have an idea on how I can avoid this scroll?

This is code of tabulator:

articleTable = new Tabulator("#SalesArticlesContainer", {
        layout: "fitColumns", //fit columns to width of table (optional)
        responsiveLayout: "collapse",
        height:"100%",
        selectable: "1",
        pagination: "local",
        paginationSize: 20,
        groupBy:"cv_article_code",
        placeholder:"Nessun articolo trovato",
        addRowPos: "top",
        ajaxConfig: {
            method: "POST",
            mode:"cors", //set request mode to cors
            credentials: "same-origin", //send cookies with the request from the matching origin
            headers: {
                "Accept": "application/json", //tell the server we need JSON back
                "X-Requested-With": "XMLHttpRequest", //fix to help some frameworks respond correctly to request
                "Content-type": 'application/json; charset=utf-8', //set the character encoding of the request
                "X-CSRF-Token": $("meta[name='_csrf']").attr("content"),
            },
        }, //ajax HTTP request type
        ajaxContentType:"json",
        addRowPos: "top",
        tooltips:true,            //show tool tips on cells
        history:true,
        columns: [
            {formatter:"rowSelection", hozAlign:"center", width:20, headerSort:false, cellClick: function(e, cell) {
                cell.getRow().toggleSelect();
            }},
            {title: "id", field: "id", headerFilter: "input", visible:false},
            {title: "Articolo", field: "cv_article_code", headerFilter: "input", formatter: 'plaintext', width:250, validator:"required", editor:"autocomplete", editorParams:{allowEmpty:true, showListOnEmpty:true, values:true}},
            {title: "Seriale", field: "nr_serial", headerFilter: "input", formatter: 'plaintext', width:120, editor:"autocomplete", editorParams:{allowEmpty:true, showListOnEmpty:true, values:true}, validato: "integer"},
            {title: "Data arrivo", field: "dt_arrival", headerFilter: "input", sorter: "date", sorterParams: {format: "YYYY-MM-DD"}, align:"center", width:130, editor:dateEditor},
            {title: "Data Controllo", field: "dt_control", headerFilter: "input", sorter: "date", sorterParams: {format: "YYYY-MM-DD"}, hozAlign:"center", width:130},
            {title: "Presa pren.", field: "fg_pickup", formatter: 'tickCross', hozAlign:"center", width:30, headerVertical:true},
            {title: "Data presa", field: "dt_pickup", headerFilter: "input", sorter: "date", sorterParams: {format: "YYYY-MM-DD"}, hozAlign:"center", width:130},
            {title: "Spedito", field: "fg_delivered", formatter: 'tickCross', hozAlign:"center", width:30, headerVertical:true},
            {title: "Data spedizione", field: "dt_shipping", headerFilter: "input", sorter: "date", sorterParams: {format: "YYYY-MM-DD"}, hozAlign:"center", width:130},
            {title: "Fatt acquisto", field: "tx_purchase_invoice", headerFilter: "input", formatter: 'plaintext', width: 200, editor:"autocomplete", editorParams:{allowEmpty:true, showListOnEmpty:true, values:true, freetext:true}},
            {title: "Fatt vendita", field: "tx_sales_invoice", headerFilter: "input", formatter: 'plaintext', width: 200, editor:"autocomplete", editorParams:{allowEmpty:true, showListOnEmpty:true, values:true, freetext:true}},
            {title: "Note", field: "tx_note", headerFilter: "input", formatter: 'plaintext'},
            {title: "Nuova", field: "fg_new", formatter: 'tickCross', hozAlign:"center", visible:false},
            {formatter: trashIcon, width:25, hozAlign:"center", cellClick: function(e, cell){alert("Printing row data for: " + cell.getRow().getData().name)}},
            {formatter: closeIcon, width:25, hozAlign:"center", cellClick: function(e, cell){alert("Printing row data for: " + cell.getRow().getData().name)}},
        ],
        cellEdited:function(cell) {
            var rowIndex = cell.getRow().getIndex();
            var edited = articleEditedCells.get(rowIndex);
            if(edited === undefined) edited = 0;
            edited++;
            articleEditedCells.set(rowIndex, edited);
            $('#btnSaveArticles').prop("disabled", false);
            $('#btnUndoArticle').prop("disabled", false);
        },
        historyUndo:function(action, component, data) {
            if(action === 'cellEdit') {
                var rowIndex = component.getRow().getIndex();
                var edited = articleEditedCells.get(rowIndex);
                edited--;

                if (edited ===0 ) articleEditedCells.delete(rowIndex);
                else articleEditedCells.set(rowIndex, edited);
            }
        },
        rowDeselected: function (row) {
            var selectedRows = articleTable.getSelectedRows();

            if (selectedRows.length === 0) {
                hideArticleAdminControls();
                hideArticleControls();
            }
        },
        rowSelected: function (row) {
            $('#txtArticle').val(row.getData().cv_article_code);
            $('#txtSerialNumber').val(row.getData().nr_serial);
            $('#txtNote').val(row.getData().tx_note);
            controlWarehouseButtons(row);
            showArticleAdminControls();
            showArticleControls();
        },
        ajaxResponse:function(url, params, response) {
            $.unblockUI();
            //url - the URL of the request
            //params - the parameters passed with the request
            //response - the JSON object returned in the body of the response.
            if (response.length === 0) return;
            else if (response.length === undefined) return;
            return response; //return the tableData property of a response json object
        }
    });

Thank you very much.

Alessio

1 Answer 1

1

I detected the problem: it was the variable height: I switched to fixed height from variable one, now scroll does no longer occur.

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.