jQuery UI Widgets Forums Grid Boolean filter type and auto load state

This topic contains 3 replies, has 2 voices, and was last updated by  Hristo 4 years, 8 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • Boolean filter type and auto load state #81706

    dadiduekappa
    Participant

    Hi, in my grid I have a boolean filter type with checkbox and other filters. It works very well, combined filter also works.
    The problem appear when I filter a boolean value and after i re-enter the page and load info saved with autoload state.
    The filter crash, see the attached image.

    Error on load state with boolean filter

    Another problem appear when, after filtered a boolean value, the numeric filter in my grid wants to put a default value like 0 and not a empty string.
    Can you check this problem, please?
    Thanks

    • This topic was modified 4 years, 8 months ago by  dadiduekappa.
    Boolean filter type and auto load state #81717

    Hristo
    Participant

    Hello dadiduekappa,

    Please provide to us the code for better analyze.
    (if possible in https://www.jseditor.io/)

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com

    Boolean filter type and auto load state #81725

    dadiduekappa
    Participant

    Thank’s for reply.
    I cannot recreate the page in jseditor because my javascript it’s highly parametrized.
    But I can write my code so you can see it:

    
    
    <div id="jqxgridEvasioneSchedaFamiglia" style="margin: auto;"></div>
    
    <script>
    var sourceGrid;
    var idGrid = '#jqxgridEvasioneSchedaFamiglia';
    var nameExport = 'EvasioneSchedeFamiglia';
    var urlGrid = '${path_session}cxf/texploraRestServices/getEvasioneSchedaFamigliaListGrid';
    var pathForm = '${path_session}web/texplora/personaFisica/form/';
    var pathExport = '${path_session}web/texplora/evasioneSchedaFamiglia/export/evasione_schede_famiglia/xlsx';
    var showfilterrow = true;
    var widthAzioni = 50;
    
    $(document).ready(function ()
    {
    	   var datafieldsGrid = [
      		{name:'dati__anno_ruolo', type:'number'},	
      		{name:'dati__valido_dal_imm', type:'date'},
    		{name:'dati__valido_al_imm', type:'date'},
      		{name:'dati__identificativo_immobile', type:'string'},
      		{name:'codice_comune', type:'string'},
      		{name:'dati__nome__dati__cognome__dati__codice_fiscale', type:'string'},
    		{name:'dati__codice', type:'string'},
    		{name:'dati__occ_skf', type:'number'},
    		{name:'dati__sup_tares', type:'number'},
    		{name:'dati__numero_occupanti', type:'number'},
    		{name:'dati__superficie', type:'number'},
    		{name:'val_calc', type:'number'},
    		{name:'dati__in_accertamento', type:'bool'},
    		{name:'dati__verificato', type:'bool'},
    		{name:'dati__id_sogg', type:'number'},
    		{name:'dati__delta_sup', type:'number'},
    		{name:'dati__id_tipo_soggetto', type:'number'},
    		{name:'dati__id_immobile', type:'number'},
    		{name:'dati__sup_imm', type:'number'},
    		{name:'dati__tipo_immobile', type:'number'}
    	];	
    	      	
    	var columnsGrid = [       
    		{text:'<spring:message code="label.codice_scheda_famiglia"/>', align:'center', dataField:'dati__codice', cellsalign:'left'},
     		{text:'<spring:message code="label.anno"/>', align:'center', dataField:'dati__anno_ruolo', cellsalign:'center', filtertype: 'number'},
     		{text:'<spring:message code="label.denunciante"/>', align:'center', dataField:'dati__nome__dati__cognome__dati__codice_fiscale', cellsalign:'left', cellsrenderer:soggettoRenderer},
     		{text:'<spring:message code="label.identificativo_immobile"/>', align:'center', dataField:'dati__identificativo_immobile', cellsalign:'center', cellsrenderer:immobileRenderer},
     		{text:'<spring:message code="label.valido_dal"/>', align:'center', dataField:'dati__valido_dal_imm', cellsalign:'center', cellsformat : 'dd/MM/yyyy', filtertype: 'range'},
     		{text:'<spring:message code="label.valido_al"/>', align:'center', dataField:'dati__valido_al_imm', cellsalign:'center', cellsformat : 'dd/MM/yyyy', filtertype: 'range'},
    		{text:'<spring:message code="label.numero_componenti_sf"/>', align:'center', cellsalign:'center', dataField:'dati__occ_skf', cellsformat : 'n', filtertype: 'number'},
    		{text:'<spring:message code="label.numero_componenti_de"/>', align:'center', cellsalign:'center', dataField:'dati__numero_occupanti', cellsformat : 'n', filtertype: 'number'},
    		{text:'<spring:message code="label.superficie_misurata"/>', align:'center', dataField:'dati__sup_imm', cellsalign:'right',cellsformat : 'f2',filterable:false},
    		{text:'<spring:message code="label.superficie_tares"/>', align:'center', dataField:'dati__sup_tares',cellsformat : 'f2', cellsalign:'right',filterable:false},
    		{text:'<spring:message code="label.superficie_denuncia"/>', align:'center', dataField:'dati__superficie', cellsformat : 'f2', cellsalign:'right',filterable:false},
    		{text:'<spring:message code="label.delta"/>', align:'center', cellsalign:'center', dataField:'dati__delta_sup', cellsformat : 'f2', filtertype: 'number'},
    		{text:'<spring:message code="label.valore_riscuotibile"/>', align:'center', cellsalign:'center', dataField:'val_calc', cellsformat: 'f2', filterable:false},
    		{text:'<spring:message code="label.in_accertamento"/>', align:'center', cellsalign:'center', dataField:'dati__in_accertamento', cellsrenderer:flagRendererAccertamento,  filtertype : 'bool'},
    		{text:'<spring:message code="label.verificato"/>', align:'center', cellsalign:'center', dataField:'dati__verificato', cellsrenderer:flagRendererVerificato,  filtertype : 'bool'}
    
    	];
    
        sourceGrid = {
    		datatype : "json",
    		url : urlGrid,
    		datafields: datafieldsGrid,
    		cache : false,
    		root : 'Rows',
    		filter : function(data) {
    			// update the grid and send a request to the server.
    			showLoadingJqx();
    			$(idGrid).jqxGrid('updatebounddata','filter');
    		},
    		sort : function() {
    			// update the grid and send a request to the server.
    			showLoadingJqx();
    			$(idGrid).jqxGrid('updatebounddata', 'sort');
    		},
    		beforeprocessing : function(data) {
    			if (data != null) {
    				sourceGrid.totalrecords = data[0].totalRecord;
    			}
    
    			numberOfRows = data[0].totalRecord;
    			sourceGrid.pagesizeoptions = [ 25, 35, 50, 75 ];
    			if (numberOfRows < gridPageSize)
    				sourceGrid.pageSize = numberOfRows;
    
    		}
    	};
        
        var dataAdapter = new $.jqx.dataAdapter(sourceGrid,{
        	loadComplete: function () { hideLoadingJqx(); },
        	formatData: function(data) {
                $.extend(data, {
                	//SPECIFICARE I TIPI DIVERSI DA STRING
    				field_dati__occ_skf:'number',
    				field_dati__anno_ruolo:'number',
    				field_dati__sup_tares:'number',
    				field_dati__numero_occupanti:'number',
    				field_dati__superficie:'number',
    				field_dati__sup_imm:'number',
    				field_val_calc:'number',
    				field_dati__in_accertamento:'boolean',
    				field_dati__verificato:'boolean',
    				field_dati__delta_sup:'number',
    				field_dati__valido_al_imm : 'date',
    				field_dati__valido_dal_imm : 'date'
                });
                return data;
            }
        });
        
         $(idGrid).jqxGrid({    
        	showemptyrow : false,
       		showfilterrow : showfilterrow,
    		localization: jqxGridLocalization,
    		width : '100%',
    		selectionmode : 'singlerow',
    		autoshowloadelement : false,
    		enablebrowserselection: true,
    		columnsresize : true,
    		columnsreorder : true,			
    		autoshowfiltericon : true,
    		filterable : true,
    		sortable : true,
    		enabletooltips: true,
    		autosavestate : true,
    		pageSize : gridPageSize,
    		pagesizeoptions : [ 25, 35, 50, 75 ],
    		pageable : true,
    		virtualmode : true,
    		rendergridrows : function(obj) {
    			return obj.data;
    		},
    		altrows : true,
    		autoHeight : true,
    		columns:columnsGrid,
    		ready : function() {
    			var initialState = $(idGrid).jqxGrid('getstate');
    			$("#azzeraFiltro").click(function() {
    				$(idGrid).css("visibility","hidden");
    				if($('#jqxTreeIndicatore').length) {
    					sourceGrid.url = urlGrid;
    					$('#jqxTreeIndicatore').jqxTree('selectItem', null);
    				}
    				$(idGrid).jqxGrid('clearfilters');
    			});
    			$("#azzeraFiltroLayout").click(function() {
    				showLoadingJqx();
    				$(idGrid).css("visibility","hidden");
    				if($('#jqxTreeIndicatore').length) {
    					sourceGrid.url = urlGrid;
    					$('#jqxTreeIndicatore').jqxTree('selectItem', null);
    				}
    				$(idGrid).jqxGrid('loadstate',initialState);
    			});
    			$("#excelExport").click(function() {
    				location.href=pathExport;
    			});	
    			$(idGrid).jqxGrid('loadstate');
    			$(idGrid).jqxGrid({source:dataAdapter});
    		}
    	}); 
    	
    });
    
    var statoRenderer = function(row, columnfield, value,
    		defaulthtml, columnproperties, rowdata) {
    	var stato = loadPermessiStato(rowdata.id, rowdata.statoRecord);
    	return stato;
    }
    
    var azioniRenderer = function(row, columnfield, value, defaulthtml, columnproperties, rowdata) {
    	var azioni = loadPermessiAzioni(rowdata.pers__id,true,false,false,false,false);
    	return azioni;
    }
    
    var flagRendererAccertamento = function(row, columnfield, value, defaulthtml, columnproperties, rowdata) {
    	var azioni = '<div style="text-align: center; padding-left: 4px;margin-top: 1px;cursor:pointer">';
    	if(rowdata.dati__in_accertamento != null) {
    		if(rowdata.dati__in_accertamento == true)
    			azioni += '<img src="${path_img}24/checkmark.png" id="style="cursor:pointer" '+
    			'name = "name_'+rowdata.dati__codice+'_'+rowdata.dati__identificativo_immobile+'_'+rowdata.codice_comune+'_'+rowdata.dati__anno_ruolo+'" onclick="changeAccertamento(false,'+
    					'\''+rowdata.dati__codice+'\',\''+rowdata.dati__identificativo_immobile+'\', \''+rowdata.codice_comune+'\', \''+rowdata.dati__tipo_immobile+'\', \''+rowdata.dati__anno_ruolo+'\')">';
    		else
    			azioni += '<img src="${path_img}24/close.png" style="cursor:pointer" '+
    			'name = "name_'+rowdata.dati__codice+'_'+rowdata.dati__identificativo_immobile+'_'+rowdata.codice_comune+'_'+rowdata.dati__anno_ruolo+'" onclick="changeAccertamento(true,'+
    			'\''+rowdata.dati__codice+'\',\''+rowdata.dati__identificativo_immobile+'\', \''+rowdata.codice_comune+'\', \''+rowdata.dati__tipo_immobile+'\', \''+rowdata.dati__anno_ruolo+'\')">';
    	}
    	azioni += "</div>";
    	return azioni;
    }
    
    var flagRendererVerificato = function(row, columnfield, value, defaulthtml, columnproperties, rowdata) {
    	var azioni = '<div style="text-align: center; padding-left: 4px;margin-top: 1px;cursor:pointer">';
    	if(rowdata.dati__verificato != null) {
    		if(rowdata.dati__verificato == true)
    			azioni += '<img src="${path_img}24/checkmark.png" id="style="cursor:pointer" '+
    			'name = "name_verificato_'+rowdata.dati__codice+'_'+rowdata.dati__identificativo_immobile+'_'+rowdata.codice_comune+'_'+rowdata.dati__anno_ruolo+'" onclick="changeVerificato(false,'+
    					'\''+rowdata.dati__codice+'\',\''+rowdata.dati__identificativo_immobile+'\', \''+rowdata.codice_comune+'\', \''+rowdata.dati__tipo_immobile+'\', \''+rowdata.dati__anno_ruolo+'\')">';
    		else
    			azioni += '<img src="${path_img}24/close.png" style="cursor:pointer" '+
    			'name = "name_verificato_'+rowdata.dati__codice+'_'+rowdata.dati__identificativo_immobile+'_'+rowdata.codice_comune+'_'+rowdata.dati__anno_ruolo+'" onclick="changeVerificato(true,'+
    			'\''+rowdata.dati__codice+'\',\''+rowdata.dati__identificativo_immobile+'\', \''+rowdata.codice_comune+'\', \''+rowdata.dati__tipo_immobile+'\', \''+rowdata.dati__anno_ruolo+'\')">';
    	}
    	azioni += "</div>";
    	return azioni;
    }
    
    </script>
    
    • This reply was modified 4 years, 8 months ago by  dadiduekappa.
    Boolean filter type and auto load state #81761

    Hristo
    Participant

    Hello dadiduekappa,

    The exported code is little messy and difficult to follow.
    You could try to create each part one by one and see where appear the error.
    Also on second investigation on shared picture look like somewhere in Your code you do not select element in jqxDropDownList.
    And for this reason show this message.
    Uncought TypeError: Cannot read property ‘label’ of null

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.