search

olifolkerd / tabulator

Interactive Tables and Data Grids for JavaScript
http://tabulator.info
MIT License
6.71k stars 818 forks source link

Movable Rows Between Tables on MOBILE #1937

Open verdonfly opened 5 years ago

verdonfly commented 5 years ago

Describe the bug When I use Movable Rows Between Tables from mobile, the dragged line is not added to the receiving table.

Tabulator Info

table = new Tabulator("#example-table", { height:"311px", layout:"fitColumns", data:[], pagination:"remote",

        // ajaxURL:"http://172.16.3.13:8087/clayapi/restservices/getArticles",
        // ajaxURL:"/vtigercrm711/modules/Inventory/Service.php",           
        // ajaxParams:{key1:x, key2:"value2"}, //ajax parameters
        //  ajaxProgressiveLoad:"scroll", 
        paginationSize:5000,
        movableRows:true,
        movableRowsConnectedTables:"#example-table-receiver",
        movableRowsReceiver: "insert",
        movableRowsSender: "false",
        placeholder:"Cerca articoli",
        columns:[
                    {title:"Codice (Cod Forn)", field:"codArticolo", sorter:"codArticolo",align:"left",headerFilter:"input"},
                    {title:"Codice Interno", field:"codInterno", sorter:"codInterno", align:"left",headerFilter:"input",visible:false},
                    {title:"Descrizione articolo", field:"desArticolo", align:"left",headerFilter:"input",headerFilter:true, headerFilterPlaceholder:"Filtra Descrizione articolo"},
                    {title:"Stato articolo", field:"staArticolo", align:"left"},
                    {title:"Descrizione Fornitore", field:"descrizioneFornitore", align:"left",headerFilter:"input",headerFilter:true, headerFilterPlaceholder:"Filtra Descrizione fornitore"},
                    {title:"Confezione", field:"qtaConfezione", align:"left"},
                ],
                rowDblClick:function(e, row){

                    var codint=row.getData().codInterno;  // prendo il valore codInterno della riga selezionata
                    var ArticoloSelezionato=row.getData().codArticolo;
                    var DescrizioneSelezionato=row.getData().desArticolo;
                    ArticoloSelezionato = ArticoloSelezionato+" - "+DescrizioneSelezionato;

                    tableGiac.setData("/vtigercrm711/modules/Inventory/Service2.php",  {codint:codint});
                    $("#ArticoloSelezionato").text("Articolo selezionato: "+ArticoloSelezionato);
                    $('#exampleModal').modal('show');
                },

        }); // fine table1

table1 = new Tabulator("#example-table-receiver", { data:[], height:500, tooltips:true, selectable:true, selectableCheck:function(row){ //row - row component return row.getData().checkprezzonetto == 0; //posso selezionare solo le righe che non hanno un prezzo netto }, movableRows: true, layout:"fitColumns", placeholder:"Corpo del preventivo", footerElement:"



", columns:[ {title:"Codice", field:"codArticolo", sorter:"codArticolo", sortable:false,visible:true}, {title:"Codice Interno", field:"codInterno", sorter:"codInterno", align:"center",headerSort:false,visible:false}, {title:"Descrizione articolo", field:"desArticolo", align:"center",headerSort:false,editor:"input",editable:editDescri}, {title:"Prezzo", field:"prezzo", align:"right",width:120,formatter:"money",headerSort:false,editor:"input",editable:editCheckPrezzo,validator:"numeric",formatterParams:{symbol: "€", symbolAfter:"p",decimal:",", thousand:".",}}, {title:"Qt", field:"quantita", align:"right",headerSort:false,editor:"input",validator:"numeric",width:30}, {title:"Sconto1", field:"sconto1", width:120,align:"right",headerSort:false,editor:"input",editable:editCheck,validator:["min:0", "max:50", "numeric"]}, {title:"Sconto2", field:"sconto2", align:"right",headerSort:false,editor:"input",editable:editCheck,validator:["min:0", "max:10", "numeric"]}, {title:"Sconto3", field:"sconto3", align:"right",headerSort:false,editor:"input",editable:editCheck,validator:["min:0", "max:5", "numeric"]}, {title:"Descrizione Fornitore", field:"descrizioneFornitore", align:"center",visible:true,headerFilter:"input"}, {title:"Prezzo Netto", field:"checkprezzonetto", align:"center",formatter:"tickCross",editor:true,editable:editCheckPrezzo,sorter:"boolean", width:90,cellEdited : function (cell ) {

                           var cellValue = cell.getValue();
                           var row = cell.getRow();
                           if(cellValue = 'true'){
                                // è un prezzo netto quindi azzerro gli sconti della riga
                                row.update({"sconto1":0});
                                row.update({"sconto2":0});
                                row.update({"sconto3":0});
                           }

                        }},
                    {title:"Totale", field:"totale", align:"right",formatter:"money",headerSort:false,formatterParams:{symbol: "€", symbolAfter:"p",decimal:",",
                    thousand:".",},bottomCalc:"sum",bottomCalcParams:{
                        precision:2,
                        symbol: "€", symbolAfter:"p",decimal:",",
                    thousand:".",
                    }},
                    {title:"Iva", field:"iva", align:"center",visible:false},
                    {title:"ScontoExtra", field:"ScontoExtra", align:"center",visible:false},
                    {formatter:"buttonCross", width:30, align:"center",headerSort:false, cellClick : function ( e , cell ) 
                        {
                            cell.getRow().delete();
                            var totalepreventivo = $("#totalepreventivo");
                            var spesetrasporto = $("#spesetrasporto");
                            var scontoextra = $("#scontoextra");
                            var results = table1.getCalcResults();

                            if(valorepercentuale.val()==1){
                                var spese = parseFloat(results.bottom.totale)*(percentualeTrasporto.val()/100);

                             if(spese <= 25.00){
                                    spesetrasporto.val(25.00.toFixed(2));
                                }else{
                                    spesetrasporto.val(spese.toFixed(2));
                                                   }
                            }
                            scontoextra.val(((parseFloat(results.bottom.totale/100)*percentualeScontoExtra.val())).toFixed(2));                  
                            totalepreventivo.val((parseFloat(results.bottom.totale)+parseFloat(spesetrasporto.val())-parseFloat(scontoextra.val())).toFixed(2));
                        }},
                    {title:"staArticolo", field:"staArticolo", align:"center",visible:false},
                    {title:"codiceFornitore", field:"codiceFornitore", align:"center",visible:false},
                    {title:"chiaveRiga", field:"chiaveRiga", align:"center",visible:true}, //SERDOC
                    {title:"seq_articolo", field:"seq_articolo", align:"center",visible:false}, 
                    {title:"siglaCostruttore", field:"siglaCostruttore", align:"center",visible:false},
                    {title:"siglaGruppo", field:"siglaGruppo", align:"center",visible:false}, 
                    {title:"siglaSottoGruppo", field:"siglaSottoGruppo", align:"center",visible:false}, 
                    {title:"unitaMisura", field:"unitaMisura", align:"center",visible:false},
                ],

                rowAdded:function(row)
                {

                        // aggiorno dopo che ho spostato la riga
                        var accountid = $("input[name=account_id]").val();
                        var codint=row.getData().codInterno;

                        var coarfo=row.getData().codArticolo;
                        var scontoextra = $("#scontoextra");

                        jQuery.ajax({

                                    url: "/vtigercrm711/modules/Inventory/InventoryAjax.php",
                                    type: "POST",
                                    cache: false,
                                    data: "actionLS=CalcolaPrezzi&codint=" + codint+"&accountid=" + accountid+"&coarfo=" + coarfo,

                                    success: function (esito3) {  

                                        var json_articolo = esito3;
                                        //alert(json_articolo);
                                        var articolo = JSON.parse(json_articolo);

                                        //alert(articolo.codiceCliente);

                                        var totalepreventivo = $("#totalepreventivo");
                                        var spesetrasporto = $("#spesetrasporto");
                                        var scontoextra = $("#scontoextra");
                                        var sconti = articolo.sconto.split(",");

                                        if(articolo.flsconto =='Y'){
                                            // è un prezzo netto,blocco gli sconti della riga

                                            row.update({"checkprezzonetto":"1"});

                                        }else{
                                            row.update({"checkprezzonetto":"0"});
                                        }

                                        var totale2;

                                        row.update({"quantita":1});
                                        row.update({"sconto1":sconti[0]});
                                        row.update({"sconto2":sconti[1]});
                                        row.update({"sconto3":sconti[2]});

                                        row.update({"prezzo":articolo.prezzo});
                                        row.update({"iva":articolo.ivaArticolo});
                                        row.update({"siglaCostruttore":articolo.siglaCostruttore}); //controllare questo per la gestione degli sconti
                                        row.update({"siglaGruppo":articolo.siglaGruppo});
                                        row.update({"siglaSottoGruppo":articolo.siglaSottoGruppo});
                                         row.update({"unitaMisura":articolo.unitaMisura});

                                        // calcolo il totale          

                                        var prezzo  = row.getData().prezzo;
                                        var quantita = row.getData().quantita;
                                        var sconto1 = row.getData().sconto1;
                                        var sconto2 = row.getData().sconto2;
                                        var sconto3 =row.getData().sconto3;

                                        var totale = ((prezzo*quantita)*((1-sconto1/100))*((1-sconto2/100))*((1-sconto3/100)));
                                        row.update({"totale":totale}); 

                                        table1.setData(table1.getData());
                                            var results = table1.getCalcResults();

                                         if(valorepercentuale.val()==1){
                                            var spese = parseFloat(results.bottom.totale)*(percentualeTrasporto.val()/100);

                                            if(spese <= 25.00){

                                                spesetrasporto.val(25.00.toFixed(2));

                                           }else{

                                            spesetrasporto.val(spese.toFixed(2));
                                           }
                                         }  

                                         scontoextra.val(((parseFloat(results.bottom.totale/100)*percentualeScontoExtra.val())).toFixed(2));
                                           totalepreventivo.val((parseFloat(results.bottom.totale)+parseFloat(spesetrasporto.val())-parseFloat(scontoextra.val())).toFixed(2));

                                    },
                                    error: function () {

                                    }
                                    }); // fine jQuery

                }, // fine rowAdded

                //MODIFICA CELLA

                cellEdited  : function ( cell ) { 

                        var totalepreventivo = $("#totalepreventivo");
                        var scontoextra = $("#scontoextra");
                        var spesetrasporto = $("#spesetrasporto");
                        var row = cell.getRow (); // con questo prendo la riga della cella selezionata
                        var prezzo =cell.getData().prezzo;
                        var quantita =cell.getData().quantita;
                        var sconto1 =cell.getData().sconto1;
                        var sconto2 =cell.getData().sconto2;
                        var sconto3 =cell.getData().sconto3;

                        var totale = ((prezzo*(1-sconto1/100))*((1-sconto2/100))*((1-sconto3/100)))*quantita;
                        row.update({"totale":totale});
                        table1.setData(table1.getData()); //aggiorno la tabella
                        var results = table1.getCalcResults();
                         if(valorepercentuale.val()==1){
                        var spese = parseFloat(results.bottom.totale)*(percentualeTrasporto.val()/100);

                            if(spese <= 25.00){

                            spesetrasporto.val(25.00.toFixed(2));

                            }else{

                            spesetrasporto.val(spese.toFixed(2));
                             }

                        }
                         scontoextra.val(((parseFloat(results.bottom.totale/100)*percentualeScontoExtra.val())).toFixed(2));                   
                        totalepreventivo.val((parseFloat(results.bottom.totale)+parseFloat(spesetrasporto.val())-parseFloat(scontoextra.val())).toFixed(2));
                }, // fine cellEdit

                });
olifolkerd commented 5 years ago

Hey @verdonfly

which mobile browser are you using at?

Cheers

Oli

verdonfly commented 5 years ago

Safari and Chrome

— Andrea Verdolini

From: Oli Folkerd notifications@github.com Sent: Wednesday, April 3, 2019 8:19:57 PM To: olifolkerd/tabulator Cc: verdonfly; Mention Subject: Re: [olifolkerd/tabulator] Movable Rows Between Tables on MOBILE (#1937)

Hey @verdonflyhttps://github.com/verdonfly

which mobile browser are you using at?

Cheers

Oli

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHubhttps://github.com/olifolkerd/tabulator/issues/1937#issuecomment-479602948, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AuyfxzAHxp07lfPcRqW-3aek5gTro7zOks5vdPDNgaJpZM4cSB6K.

olifolkerd commented 5 years ago

@verdonfly sorry, i confused myself there.

The drag and drop functionality between tables currently dosn't work on touch devices due to limitations of the way touchend events are fired that prevent you knowing directly onto what element the touch ended.

I am looking into solutions to this for the 4.3 release.

Cheers

Oli :)

rhagstrand commented 3 years ago

Hi, and thanks for your fantastic job with tabulator!

I was wondering if there is any update on this issue, since Im also facing the same problem (movable rows between tables not working on mobile device). Im using version 4.9.3

MetallianFR68 commented 2 years ago

I confirm that the issue is still open on V.5.3.1 The demo on the official webpage doesn't work on mobile

olifolkerd commented 2 years ago

@MetallianFR68 the issue is still open. It would be closed if the issue had been resolved. But thanks for your confirmation