Gird and pagechanged fails

[benitocas88Member]

hi again! Well i have the next problem:

I work jqxgrid and checkbox column and my data comes a function mysl json_encode.
i want to do somthing that: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/index.htm#demos/jqxgrid/defaultfunctionality.htm
but bot works!!

When my data are drawed on the grid if i check one checkbox when the on click to the next page not take a real value, this “remains” checked, this change only when other check is clicked and now yes, show it real value, false if i click the next page, again the column check show checked two checkbox, page 1 and page 2. this my code:

$('#ver').on('click', function () {
var source = {
datatype:'json',	
datafields: 
[
{name: 'num_reg', type:'int'},	
{name: 'escuela'},
{name: 'turno'},
{name: 'zona_escolar'},
{name: 'cct'},
{name: 'chk', type: 'bool'}
],	
url: 'cnn.php',
type:'POST',	
data:{
opt:'cct_turno',
niv_escolar:'E',
idperfil: 1,
unidad_regional: 1,
modalidad: '',
zona_escolar: ''
},
};	
var dataAdapter_tunos = new $.jqx.dataAdapter(source,{
downloadcomplete: function(data, status, xhr){
},
loadcomplete:function(data){	
return data;
}	
});
$('#grid-cct-turno').jqxGrid({
width: 753, source: dataAdapter_tunos, theme: 'ui-lightness', autoheight: true, 
editable: true, selectionmode: 'multiplecellsadvanced', sortable: true, pageable: true,altrows: true, 
rendered:function(){
var length = dataAdapter_tunos.records.length;
for(var x=0; x<length; x++)
{
//	$("#grid-cct-turno").jqxGrid('setcellvalue', x, 'chk', false, false);
var value_cct_grid = $('#grid-cct-turno').jqxGrid('getcellvalue',x,'cct');
$.each(array_cct, function(index,valueArray){
if(value_cct_grid == valueArray) 
$("#grid-cct-turno").jqxGrid('setcellvalue',x, 'chk', true, false); 
}); 
} 
}, 
ready: function(){
var localizationobj = {};
localizationobj.pagergotopagestring = 'Página';
localizationobj.pagershowrowsstring = 'Mostrar las primeras:';
localizationobj.pagerrangestring = ' de ';
$('#grid-cct-turno').jqxGrid('localizestrings', localizationobj);
}, 
columns:
[ 
{text:'No.', datafield:'num_reg', width:30, editable:false, cellsalign:'center'},
{text:'Escuela', datafield: 'escuela', width:433, editable: false},
{text: 'Turno', datafield:'turno', width:130, editable: false},
{text:'Zona Escolar', datafield:'zona_escolar', width: 80, editable: false},
{text:'CCT', datafield:'cct', width:110, editable: false, hidden:true},
{text:'Seleccionar', columntype: 'checkbox', datafield:'chk', width:80 }
]
});//Finaliza el grid-cct-turno y todas sus configuraciones
});

[Peter StoevKeymaster]

Hi benitocas88,

Would you provide some some data to test with?
Would you also provide the missing HTML part?

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[benitocas88Member]

Of course, this is that js code:
(using jqx 2.7, works the last jquery and jquery ui, the modal show with jquery modal dialog, not jqxwindow)
same function “toolbar” not works!, and if the page change not take the real value jqxcheckbox, only when clicked…

var source = {
datatype:'json',
datafields: 
[
	{name: 'num_reg', type:'int'},
	{name: 'escuela'},
	{name: 'turno'},
	{name: 'zona_escolar'},
						{name: 'cct'},
						{name: 'chk', type: 'bool'}
					],		
					url: 'cnn.php',
					type:'POST',					
					data:{
						opt:'cct_turno',
						niv_escolar:nivel_escolar,
						idperfil: id_perfil,
						unidad_regional: unidad_regional,
						modalidad: modalidad,
						zona_escolar: zona_escolar
					}
				};
				var dataAdapter_tunos = new  $.jqx.dataAdapter(source,{
					loadcomplete:function(records){						
if (records != null)
return records;
},
					loadError: function (xhr, status, error){
	alert('Ocurrió un error al intentar recuperar la información.\nActualice la página e intente de nuevo.');
					},					
					formatData: function(data){
	data.name_startsWith = $('#searchfield').val();
	//alert(data.name_startsWith);
 return data;
					}	
	});
var columnCheckBox = null;
  	var updatingCheckState = false;		
$('#grid-cct-turno').jqxGrid({
		width: 753, source: dataAdapter_tunos, theme: 'ui-lightness', autoheight: true, 
  editable: true, selectionmode: 'singlerow', sortable: false, pageable: true, altrows:true,   
  rendered:function(){
    					var length = dataAdapter_tunos.records.length;
		for(var x=0; x<length; x++)
 		{
              			//	$("#grid-cct-turno").jqxGrid('setcellvalue', x, 'chk', false, false);
  	var value_cct_grid = $('#grid-cct-turno').jqxGrid('getcellvalue',x,'cct');
          					$.each(array_cct, function(index,valueArray){
              				if(value_cct_grid == valueArray)                  			
       $("#grid-cct-turno").jqxGrid('setcellvalue',x, 'chk', true, false);                      		                 			                  			            				                     
     });   
        } 
        			}, 				
        			ready: function(){
            			var localizationobj = {};
						localizationobj.pagergotopagestring = 'Página';
						localizationobj.pagershowrowsstring = 'Agrupar en:';
						localizationobj.pagerrangestring = ' de ';
						$('#grid-cct-turno').jqxGrid('localizestrings', localizationobj);
            		},   
    				columns:
        			[        		 	
        		 		{text:'No.', datafield:'num_reg', width:30, editable:false, cellsalign:'center'},
        		 		{text:'Escuela', datafield: 'escuela', width:433, editable: false},
        		 		{text: 'Turno', datafield:'turno', width:130, editable: false},
        		 		{text:'Zona Escolar', datafield:'zona_escolar', width: 80, editable: false},
        		 		{text:'CCT', datafield:'cct', width:110, editable: false, hidden:true},
        		 		{text:'Seleccionar', datafield:'chk', width:80, columntype: 'checkbox', editable:true }
          			], 
          			showtoolbar: true,
          			rendertoolbar: function (toolbar){
    					var me = this;
    					var container = $("<div style='margin: 5px;'></div>");
    					var span = $("<span style:'float:left; margin-top:5px; margin-right: 4px;'>Buscar por escuela o CCT:</span>");
    					var input = $("<input class='jqx-input' jqx-widget-content jqx-rc-all' id='searchfield' type='text' style='height: 23px; float:left; width:223px' />");
    					toolbar.append(container);
    					container.append(span);
    					container.append(input);
    					input.addClass('jqx-widget-content-ui-lightness');
    					input.addClass('jqx-rc-all-ui-lightness');
    					
    					input.on('keydown', function (event){
    						if (input.val().length >= 2) {
    							if (me.timer) clearTimeout(me.timer);
    							me.timer = setTimeout(function () {
    								dataAdapter_tunos.dataBind();
    							}, 300);
    						}
    					});
    				}
    				 	   	
				});//Finaliza el grid-cct-turno y todas sus configuraciones
				$("#grid-cct-turno").on("pagechanged", function (event) {
					//code here? 
        		});

that is the html code:

<div id="modal-cct-turno" title="Usted está en el módulo CCT y Turno">
	<div id="grid-cct-turno"></div>
</div>

and that is the php code:

public function f_select_cct_turno($unidad_regional, $nivel_escolar, $modalidad, $zona_escolar, $idperfil)
	{		
		$query = "CALL pa_selecciona_criterios_escuelas($unidad_regional,'$nivel_escolar','$modalidad','$zona_escolar',$idperfil);";
		$result = mysqli_query($this->connected, $query);
		mysqli_next_result($this->connected);
		$no_reg = 1;
		
		if(mysqli_num_rows($result)>0)
		{
			while($rows = mysqli_fetch_object($result))
			{
				$dts[] = array(
						'num_reg' => $no_reg,
						'escuela' => $rows->escuela,
						'turno' => $rows -> d_turno,
						'zona_escolar' => $rows -> zonaescola,
						'cct' => $rows -> cct,
						'chk' => false);					
				$no_reg++;
			}			
			echo json_encode($dts);
		}		
		$this->closeConexion();		
	}

[Peter StoevKeymaster]

Hi benitocas88,

There is a known issue in the latest version of jQuery when jQuery UI is included. The issue is regarding the “removeClass” method which we use in jQWidgets. As a temporary solution, use jQuery 1.8.3. I believe the jQuery Team will fix it soon.

Best Wishes,
Peter SToev

jQWidgets Team
http://www.jqwidgets.com

[benitocas88Member]

amazing, jquery 1.8.3 fix my problem on the whole and on the grouping, the only thing that I solved was the “search toolbar” but it does not matter much but I would like to work.
Thank you very much!

[Author]

Posts