Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Movable Rows Between Tables on MOBILE #1937

Open
verdonfly opened this issue Mar 29, 2019 · 6 comments
Open

Movable Rows Between Tables on MOBILE #1937

verdonfly opened this issue Mar 29, 2019 · 6 comments
Assignees
@olifolkerd
Labels
Enhancement Possible small update to an existing feature

Comments

@verdonfly
Copy link

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

Tabulator Info

  • Which version of Tabulator are you using? 4.2

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:"Spese di trasporto <input type='text' value='0.00' id='spesetrasporto'style='width: 100px;display: inline;margin-right: 30px;margin-left: 130px;text-align: right;' class='form-control' readonly aria-label='Spese di trasporto' aria-describedby='basic-addon'>

Sconto Extra (0 %)<input id='scontoextra'type='text' style='width: 100px;display: inline;margin-right: 30px;margin-left: 130px;text-align: right;' class='form-control' readonly value='0.00' aria-label='Sconto Extra' aria-describedby='basic-addon'>

Totale ",
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 olifolkerd self-assigned this Apr 3, 2019
@olifolkerd olifolkerd added the Question - Ask On Stack Overflow Questions must be asked on Stack Overflow label Apr 3, 2019
@olifolkerd
Copy link
Owner

Hey @verdonfly

which mobile browser are you using at?

Cheers

Oli

@verdonfly
Copy link
Author

verdonfly commented Apr 8, 2019 via email

@olifolkerd
Copy link
Owner

@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 :)

@olifolkerd olifolkerd added Enhancement Possible small update to an existing feature and removed Question - Ask On Stack Overflow Questions must be asked on Stack Overflow labels Jul 21, 2019
@rhagstrand
Copy link

rhagstrand commented Sep 7, 2021 •
edited
Loading

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
Copy link

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
Copy link
Owner

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@olifolkerd olifolkerd

Labels
Enhancement Possible small update to an existing feature
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@MetallianFR68 @olifolkerd @verdonfly @rhagstrand