[softicaParticipant]

Hi Hristo,

Thank you for the server sorting demo, it have worked!
Now i must to sort the grid by column, but i’m working with cells, not rows. The logic is that when i select one cell of the first column, it sorts by the first column (customer ID), and when i select one cell of the second column it sorts by the second column (customer name). But when i sort by the customer ID, for example, the grid sorts normally. But i have so many rows on the grid, and it focus off the cell that i selected. To fix it, i’ve thinked on the ensurerowvisible property, but it doesn’t works by cells, only for rows. What can i do to focus the cell that was sorted on the grid?

Here is the code:

data.php

//Prepara os dados
	            var source = {
	                datatype: "json",
	                datafields: [ { name: 'CLIENTE', type: 'string' },
	                    		  { name: 'NOME_FANTASIA', type: 'string' }
	                ],
	                data: parametros,
					id: 'CLIENTE',
	                url: 'grid_clientes.php',
					root: 'Rows'
	            };
	            var dataAdapter = new $.jqx.dataAdapter(source);
				$("#jqxgrid_clientes").jqxGrid({
					width: 500,
					height: 115,
					selectionmode: 'singlecell',
	                source: dataAdapter,
	                theme: theme,
// 	                sortable: true,
	                showsortmenuitems: false,
	                keyboardnavigation: false,
	                columns: [ { text: 'Cod. Cliente', datafield: 'CLIENTE', width: 90},
	                  		   { text: 'Identificador do Cliente', datafield: 'NOME_FANTASIA', width: 390 }
	                ]
	            }).on('cellclick cellselect', function (event) { //Navegação das células pelas setas ou clique na grid 
					var id_cliente = $(this).jqxGrid('getrowdata', event.args.rowindex)['CLIENTE']; //ID do registro selecionado
			    	$("#id_cliente").val(id_cliente);
			    	desabilitarCampos();
			    	$("#btn_novo").attr("disabled", false);
					$("#btn_alterar").attr("disabled", false);
					$("#btn_excluir").attr("disabled", false);
					$("#btn_filtro").attr("disabled", false);
					$("#btn_salvar_como").attr("disabled", false);
					$("#btn_salvar").attr("disabled", true);
					$("#btn_cancelar").attr("disabled", true);
					verificaVinculadosConfig(id_cliente); 
					populaCamposCliente(id_cliente);
					atualizaGridContatos(id_cliente);
					if($(this).jqxGrid('getsortinformation').sortcolumn != event.args.datafield) { //Ordena a coluna que ainda não estiver sendo ordenada
			    		$(this).jqxGrid('sortby', event.args.datafield, 'asc');
			        }
// 					recriaGrids();
			    }).on('bindingcomplete', function(event) {
			    	$(this).jqxGrid({ keyboardnavigation: true });
			    	$(this).jqxGrid('sortby', 'NOME_FANTASIA', 'asc');
			    	$(this).jqxGrid('selectrow', 941);
			    	$(this).jqxGrid('focus');
				}).on('columnclick', function(event) {
					limpaTudo();
					if(event.args.datafield == 'CLIENTE') {
						$("#consultar").val('cod_cliente');
						$(this).jqxGrid('selectrow', 0);
					}
					if(event.args.datafield == 'NOME_FANTASIA') {
						$("#consultar").val('identificador');
						$(this).jqxGrid('selectrow', 941);
					}
					$("#pesquisar").focus();
				});  

[softicaParticipant]

Hi Hristo,

I’ve added this sort callback in the source but doesn’t worked. Works only if i add paging on the grid, but i prefer don’t want to. About the virtualmode, it’s possible to show 2000 records on the grid using MySQL without virtualmode and rendergridrows? I’ve already tried this but with no success.
Thank you!

[softicaParticipant]

Hi Hristo,

I’m following the examples and i found how to sort by cell clicking/selecting, and filtering by key pressing (i’ve change the filtering method to the jqxGrid usual), but now i’ve found a problem with the number of rows. I have a MySQL table with 2000 rows of customers, so i must render this table and load the new rows everytime (on rendergridrows property). But, when the grid use rendergridrows property, the filtering and the sorting by cell clicking/selecting doesn’t work. How can i do?

data.php

<?php
$hostname = "localhost";
$database = "database_name";
$username = "root";
$password = "";
$connect = mysqli_connect($hostname, $username, $password)
or die('Could not connect: ' . mysqli_error($connect));
// ini_set('memory_limit', '512M');
mysqli_select_db($connect, $database);
$bool = mysqli_select_db($connect, $database);
if ($bool === False){
	print "can't find $database";
}
$firstvisiblerow = $_GET['recordstartindex'];
$lastvisiblerow = $_GET['recordendindex'];
error_log($firstvisiblerow . "- " . $lastvisiblerow . chr(13), 3, "my-errors.log");
$rowscount = $lastvisiblerow - $firstvisiblerow;
$query = "SELECT SQL_CALC_FOUND_ROWS CLIENTE, NOME_FANTASIA FROM clientes";
$query = $query . " LIMIT $firstvisiblerow, $rowscount";
// die("<pre>$query</pre>");
$result = mysqli_query($connect, $query) or die("SQL Error 1: " . mysqli_error($connect));
$sql = "SELECT FOUND_ROWS() AS found_rows;";
$rows = mysqli_query($connect, $sql);
$rows = mysqli_fetch_assoc($rows);
$total_rows = $rows['found_rows'];
while ($row = mysqli_fetch_array($result, MYSQLI_ASSOC)) {
	$orders[] = array('CLIENTE' => $row['CLIENTE'],
					  'NOME_FANTASIA' => $row['NOME_FANTASIA']);
}
$data[] = array(
		'TotalRows' => $total_rows,
		'Rows' => $orders
);
echo json_encode($data);
?>

example.php

<!DOCTYPE html>
<html lang="en">
	<head>
		<link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
		<link rel="stylesheet" href="jqwidgets/styles/jqx.classic.css" type="text/css" />
		<script type="text/javascript" src="scripts/jquery-1.11.1.min.js"></script>
		<script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
		<script type="text/javascript" src="jqwidgets/jqxbuttons.js"></script>
		<script type="text/javascript" src="jqwidgets/jqxscrollbar.js"></script>
		<script type="text/javascript" src="jqwidgets/jqxmenu.js"></script>
		<script type="text/javascript" src="jqwidgets/jqxdata.js"></script>
		<script type="text/javascript" src="jqwidgets/jqxgrid.js"></script>
		<script type="text/javascript" src="jqwidgets/jqxgrid.filter.js"></script>
		<script type="text/javascript" src="jqwidgets/jqxdropdownlist.js"></script>
		<script type="text/javascript" src="jqwidgets/jqxlistbox.js"></script>
		<script type="text/javascript" src="jqwidgets/jqxgrid.selection.js"></script>
		<script type="text/javascript" src="jqwidgets/jqxgrid.sort.js"></script>
		<script type="text/javascript">
			$(document).ready(function () {
				// prepare the data
				var source = {
					url: 'data1.php',
					dataType: 'json',
					cache: false,
					datafields: [ { name: 'CLIENTE' },
								  { name: 'NOME_FANTASIA' }
					],
					root: 'Rows',
					id: 'CLIENTE',
					beforeprocessing: function (data) {
						source.totalrecords = data[0].TotalRows;
					}
				};
				var dataAdapter = new $.jqx.dataAdapter(source);
				$("#jqxgrid").jqxGrid({
					source: source,
					filterable: true,
					showfilterrow: true,
					theme: 'classic',
					selectionmode: 'singlecell',
					width: 400,
					height: 400,
					virtualmode: true,
					rendergridrows: function(obj) {
						return obj.data;
					},
					columns: [ { text: 'CLIENTE', datafield: 'CLIENTE', width: 100 },
							   { text: 'NOME_FANTASIA', datafield: 'NOME_FANTASIA', width: 250 }
					]
				}).bind('cellselect', function (event) { //Navegação das células pelas setas na grid
			    	var rowData = $(this).jqxGrid('getrowid', event.args.rowindex); //ID do registro selecionado
			    	if($(this).jqxGrid('getsortinformation').sortcolumn != event.args.datafield) { //Ordena a coluna que ainda não estiver sendo ordenada
			    		$(this).jqxGrid('sortby', event.args.datafield, 'asc');
			        }
			    }).on('cellclick', function (event) { //Clique na célula da grid
			    	var rowData = $(this).jqxGrid('getrowid', event.args.rowindex); //ID do registro selecionado
			    	if($(this).jqxGrid('getsortinformation').sortcolumn != event.args.datafield) { //Ordena a coluna que ainda não estiver sendo ordenada
			    		$(this).jqxGrid('sortby', event.args.datafield, 'asc');
			        }
			    });
			});
		</script>
	</head>
	<body class='default'>
		<div id="jqxgrid"></div>
	</body>
</html>

Thank you!

[Author]

Posts