disable input check scroll BUG

spizzi77 commented 7 years ago

Hy all, i have a code, i notified that it's the same behaviour for 1.4.3 version or 1.5 version, the logic is this: if there are more that 100 records after the grid became fixedBody = true instead if there are less that 100 records the grid became fixed body = false, and on the refresh event in on complete if the server for each records answers ableEdit = 'NO' the input checkbox for that record must be ALSO disabled otherwise the input checkbox is enable and clickable...Ok now the problem is this: If the grid has a fixed body the disabled input checkbox stop at record number 51 instead if the grid has fixed body = false the behaviour is correct so all input checkbox are disabled. I have a grid that returns 1500 records and all this records must be input checkbox disabled, instead at record 51 became checkbox enable and if i scroll the grid all records became enable, if i insert fixedBody = false the behaviour is correct and all the 1500 records are disabled..under the code, i notified that if i put fixedBody : false , it works but it's more slow the render of the grid(they are 1500 results in this case):

    //un css di default
    $('#gridDeleghe').css({ margin: '0px', padding: '0%', width: '100%' }).animate({ height: '600px' }, 100);
    $('#gridDeleghe').w2grid({
        name: 'gridDeleghe',
        header : '<div class=""><b>Deleghe</b></div>',
        multiSelect : false,
        fixedBody : true,
        msgNotJSON: '<div style="text-align:center"><b>Non ci sono validi risultati</b></div>',
        show: {
            header       : true,
            toolbar      : true,
            footer       : true,
            lineNumbers  : false,
            selectColumn : true,
            expandColumn : false,
            searchColumn : false,
            toolbarSearch : true,
            toolbarReload : false,
            toolbarColumns : false,
        },
       //Creazione della toolbar e dei bottoni aggiungi ed elimina settore   
        toolbar : {items:[
                  { type: 'button',  id: 'itemDelDelega',  caption: 'Elimina Delega', icon: 'glyphicon glyphicon-remove', hint: 'Elimina Delega' },      
            ],
            onClick: function (event) {
                //console.log(this);
                //console.log(event);
                if (event.target=='itemDelDelega'){
                    variazione_delega(ndgDelegante,'C',server,'',servizio,' ',filiale,rapporto,tipoDelega,ndgDeleghe);
                }
            },              
        },  
        columns: [                
            { field: 'servizio', caption: '<div style="text-align: center;">Servizio<div>', sortable:true,size:'5%',attr: 'align=center'},
            { field: 'filiale', caption: '<div style="text-align: center;">Filiale<div>',sortable:true,size:'5%',attr: 'align=center'},
            { field: 'rapporto', caption: '<div style="text-align: center;">Rapporto <div>',sortable:true,size:'10%',attr: 'align=center'},
            { field: 'tipoDelega', caption: '<div style="text-align: center;">Tipo Delega<div>',sortable:true,size:'15%'},
            { field: 'ndgDelegante', caption: '<div style="text-align: center;">Ndg Delegante<div>',sortable:true,size:'10%',attr: 'align=center'},
            { field: 'intestazione', caption: '<div style="text-align: center;">Intestazione<div>',sortable:true,size:'30%'},
            { field: 'inizio', caption: '<div style="text-align: center;">Inizio<div>',sortable:true,size:'10%',attr: 'align=center'},

        ],
        searches: [
            { type: 'text', field: 'servizio', caption: 'Servizio',operator:'contains' },
            { type: 'text', field: 'filiale', caption: 'Filiale',operator:'contains' },
            { type: 'text', field: 'rapporto', caption: 'Rapporto ',operator:'contains' },
            { type: 'text', field: 'tipoDelega', caption: 'Tipo Delega',operator:'contains' },
        ],
        onSelect : function (event){
            console.log(event);
            target = event.target;
            //recupero dei valori
            var record = this.get(event.recid); 
            recid = record.recid;
            abilitaEliminazioneDelega = record.abilitaEliminazioneDelega;
            ndgDelegante = record.ndgDelegantePulito;
            server = record.server;
            servizio = record.servizio;
            filiale = record.filiale;
            rapporto = record.rapporto;
            tipoDelega = record.tipo_delega;
            //Regole di abiliazione o disabilita dei bottoni in base all'array
            if (abilitaEliminazioneDelega == 'SI'){
                w2ui['gridDeleghe'].toolbar.enable('itemDelDelega');
            }
            else{
                w2ui['gridDeleghe'].toolbar.disable('itemDelDelega');
            }

        },
        onUnselect : function(event){
            //disabilitiamo i bottoni sull'unselect
            w2ui['gridDeleghe'].toolbar.disable('itemDelDelega');
        },
        onRefresh:function(event){//THE PROBLEM IS HERE
            event.onComplete= function(event){
                //eliminiamo il footer-left del tempo che ci mette a recuperare i dati ma lasciamo il footer right del numero righe
                $('.w2ui-footer-left').hide();
                profiloUtente = this.profiloUtente;
                totaleRisultati = this.totaleRisultati;
                //Fino a 100 risultati mettiamo un fixedBody false cioè dinamicamente il div prende
                //la grandezza dei records oltre i 100 mettiamo il fixed a true perchè altrimenti
                //con ie11 vedendo tutti i record la libreria è meno veloce nel display e nella ricerca
                if (typeof(w2ui['gridDeleghe']) !== 'undefined'){
                    if (totaleRisultati > 100){
                        w2ui['gridDeleghe'].fixedBody = true;
                    }
                    else{
                        w2ui['gridDeleghe'].fixedBody = false;          
                    } 
                }
                records = this.records;
                //Recupero valori da passare alle funzioni dei bottoni
                    $(records).each(function(event){
                        abilitaEliminazioneDelega = this.abilitaEliminazioneDelega;
                        //console.log(abilitaEliminazioneDelega);
                        //console.log(this.recid);
                        if ($.trim(abilitaEliminazioneDelega) == 'NO'){
                            //Version 1.4.3
                            $('#grid_gridDeleghe_rec_'+this.recid+' '+' input').attr('disabled',true);
                            //Version 1.5
                            //$('#grid_gridDeleghe_cell_'+this.recid+'_select' +' input').attr('disabled',true);
                        }
                        else{
                            //Version 1.4.3
                            $('#grid_gridDeleghe_rec_'+this.recid+' '+' input').attr('disabled',false);
                            //Version 1.5
                            //$('#grid_gridDeleghe_cell_'+this.recid+'_select' +' input').attr('disabled',false);
                        }
                    }); 
            };
        },
        onLoad :function(event){

            if (dataEstinzioneDeleghe != ''){
                w2ui['gridDeleghe'].show.toolbar = false;
                w2ui['gridDeleghe'].show.selectColumn = false;
            }

            var response = [];
            var responseText = (event.xhr.responseText);
            //console.log(responseText);
            response = responseText.match(/{.*(.*)\}/);

            //Questo sotto è un esempio di ciclo che scorre tutti i recods sull'onload e recupera i valori
            var finale = response[0];
            var arrayFinale = JSON.parse(finale);
            var profiloUtente = arrayFinale.profiloUtente;

            //console.log(profiloUtente);
            if(profiloUtente != 'amministratore' && profiloUtente !='operatore'){
                //hide toolbar e hide checkbox nelle rows
                w2ui['gridDeleghe'].show.toolbar = false;
                w2ui['gridDeleghe'].show.selectColumn = false;
            } 
        },
        onClick : function(event){
            //console.log(this);
            event.preventDefault();
        },
        onDblClick:function(event){
            //al doppio click del record sempre un prevent Default 
            //non deve succedere nulla sul doppio click del record
            event.preventDefault();
        },
        onError:function(event){
            //console.log(event);
            //On error gestisce il caso in cui lo status dal json/php sia valorizzato come error
            //se vogliamo personalizzare diversi codici per diversi errori dobbiamo gestirli
            //qui con return message
            event.preventDefault();
            //w2alert('Nessun Collegamento presente','Attenzione');
            div = $('<div class="info">').html('Nessuna Delega presente<br><br>');
            $('#containerDeleghe').append(div);
        },
    });

    params = $.param({
        cliente : cliente
    });

    w2ui['gridDeleghe'].load('/anagrafe/indice.php?azione=recuperoFolderD&'+params);
    w2ui['gridDeleghe'].resize();
    w2ui['gridDeleghe'].toolbar.disable('itemDelDelega');

mrg2001 commented 7 years ago

Please post JSON response that this URL returns

w2ui['gridDeleghe'].load('/anagrafe/indice.php?azione=recuperoFolderD&'+params);

spizzi77 commented 7 years ago

The json is this and i disable the input checkbox if the abilitaEliminazioneDelega = 'NO'

{"status":"success","records":[{"recid":1,"tipo_delega":"23","des_delega":"fdfd","tipoDelega" :"dfvfddvdfvf","filiale":"042","servizio":"1","rapporto":"1234456788946","ndgDelegante":"123456789<\/a>","ndgDelegantePulito":"123456789","intestazione" :"abcdefghijkl","abilitaEliminazioneDelega":"NO","server":"MIOSERVER" ,"inizio":"09-04-2015","fine":""}, {"recid":2,"tipo_delega":"23","des_delega":"fdfd","tipoDelega" :"dfvfddvdfvf","filiale":"042","servizio":"1","rapporto":"1234456788946","ndgDelegante":"123456789<\/a>","ndgDelegantePulito":"123456789","intestazione" :"abcdefghijkl","abilitaEliminazioneDelega":"NO","server":"MIOSERVER" ,"inizio":"09-04-2015","fine":""},ETC records....ETC records....],"profiloUtente":"operatore","totaleRisultati":975}

If abilitaEliminazioneDelega == 'NO' the input checkbox must be disabled but with fixed body(600px)is disabled only the first 51 rows, and also if i scroll the grid untill the end and return to the first records all the checkbox are enable....it seems that ON SCROLL it must refresh the input in fixed body = true, instead in fixed body false all input are disabled....I really don't know how to resolve. For sure at selection the button is disabled so it isn't so important, but it's a strange behaviour

mrg2001 commented 7 years ago

If I understand correctly, there are two problems.

You want grid's container to grow dynamically until it is 600px then not to grow further.
There is some issue about input checkboxes.

As for #1, I will think how to deal with it. As for #2 I do not see any input checkboxes in the code you provide. There is no editable records, there is nothing on toolbar. Please explain.

spizzi77 commented 7 years ago

Hy mrg, Maybe i don't understand but the checkbox are defined here:

        show: {
            header       : true,
            toolbar      : true,
            footer       : true,
            lineNumbers  : false,
            selectColumn : true, //<-- THIS DEFINED CHECKBOX
            expandColumn : false,
            searchColumn : false,
            toolbarSearch : true,
            toolbarReload : false,
            toolbarColumns : false,
        },

And are managed onSelect event and onRefresh event..OnSelect you can see this:

            if (abilitaEliminazioneDelega == 'SI'){
                w2ui['gridDeleghe'].toolbar.enable('itemDelDelega');
            }
            else{
                w2ui['gridDeleghe'].toolbar.disable('itemDelDelega');
            }

And this managed the button ELIMINA on the toolbar, but to manipulad DOM so the disabled checkbox must be done in onRefresh...So onRefresh i do this....for each records:

        onRefresh:function(event){//THE PROBLEM IS HERE
            event.onComplete= function(event){
                //eliminiamo il footer-left del tempo che ci mette a recuperare i dati ma lasciamo il footer right del numero righe
                $('.w2ui-footer-left').hide();
                profiloUtente = this.profiloUtente;
                totaleRisultati = this.totaleRisultati;
                //Fino a 100 risultati mettiamo un fixedBody false cioè dinamicamente il div prende
                //la grandezza dei records oltre i 100 mettiamo il fixed a true perchè altrimenti
                //con ie11 vedendo tutti i record la libreria è meno veloce nel display e nella ricerca
                if (typeof(w2ui['gridDeleghe']) !== 'undefined'){
                    if (totaleRisultati > 100){
                        w2ui['gridDeleghe'].fixedBody = true;
                    }
                    else{
                        w2ui['gridDeleghe'].fixedBody = false;          
                    } 
                }
                records = this.records;
                //Recupero valori da passare alle funzioni dei bottoni
                    $(records).each(function(event){
                        abilitaEliminazioneDelega = this.abilitaEliminazioneDelega;
                        //console.log(abilitaEliminazioneDelega);
                        //console.log(this.recid);
//THIS DISABLED CHECKBOX 
                        if ($.trim(abilitaEliminazioneDelega) == 'NO'){
                            //Version 1.4.3
                            $('#grid_gridDeleghe_rec_'+this.recid+' '+' input').attr('disabled',true);
                            //Version 1.5
                            //$('#grid_gridDeleghe_cell_'+this.recid+'_select' +' input').attr('disabled',true);
                        }
                        else{
                            //Version 1.4.3
                            $('#grid_gridDeleghe_rec_'+this.recid+' '+' input').attr('disabled',false);
                            //Version 1.5
                            //$('#grid_gridDeleghe_cell_'+this.recid+'_select' +' input').attr('disabled',false);
                        }
                    }); 
            };
        },

The dinamic fixed body true o false is working both in firefox chrome that IE11, the problem is that if records are > 100 for sure it do fixedBody true, defined in css height : 600px otherwise fixedBody false, and this is done always on Refresh and this work... What doens't work is that if the grid has a fixedBody on Refresh to TRUE after the checkbox are disabled only the first 50 records but all the 975 records must be disabled for profiloUtente = operatore , the json is correct.... When i do a scroll the checkbox form records 52 and over is always enabled but the json answer always abilitaEliminazioneDelega == 'NO', both 1.4.3 that 1.5 work in the same way. Instead if i delete fixedBody true and i use always fixedBody false all the checkbox records are disabled.I hope to explain me. Seems that w2ui load in the first time 50 records and for these 50 records onRefresh it works in fixedBody true but after scrolling and loading in buffering the dom manipulation doesn't work. I can't use fixedBody false because 1000 records in IE11 is not responsive and it's more slow to load instead with fixedBody is quick with all browser so i use fixedBody false for 100 records but over 100 fixedBody true. Hope you understand the problem, if you can help welcome. I don't use onEdit, but i use on select A record, i takes values onSelect and after i call a function in the toolbar button with that valuses i don't need to Edit records.

This values

        toolbar : {items:[
                  { type: 'button',  id: 'itemDelDelega',  caption: 'Elimina Delega', icon: 'glyphicon glyphicon-remove', hint: 'Elimina Delega' },      
            ],
            onClick: function (event) {
                //console.log(this);
                //console.log(event);
                if (event.target=='itemDelDelega'){
                    variazione_delega(ndgDelegante,'C',server,'',servizio,' ',filiale,rapporto,tipoDelega,ndgDeleghe); //<<<--------------THIS VALUES 
                }
            },              
        },

Are takes onSelect event and passed to the function....

spizzi77 commented 7 years ago

WELL, i redone the behaviour, in the example on my page ALL CITIES NAMED "Milano" has checkbox disabled you see in document ready that all records with citta='Milano' are checkbox disabled, but now scroll untill the end, you will see the records like 600 with citta="Milano" input checkbox are enabled after if you scroll again in the first record you will see that the first record is enabled. This is the problem, seems that with A LOT OF RECORDS i can't manipulate the dom, i see that the server give 300 records is OK but with a lot of records became the problem. see the example on my page.

https://fractalcosmo.com/MvcWebLog/paginaDefault.php

If you want i put the javascript but you can see it with firebug, it's the same of the example above.....if citta=="Milano" disabled checkbox...attr disabled true.But at certain point became enabled also if citta=="Milano"... Instead if i put fixedBody false you will see the checkbox ALWAYS DISABLED with citta=="Milano" also in record 1000. This is a bug, can someone help me?

vitmalina / w2ui

disable input check scroll BUG #1367