jQuery UI Widgets Forums Grid Edit jqxGrid

This topic contains 7 replies, has 2 voices, and was last updated by  Hristo 7 years, 1 month ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Edit jqxGrid Posts
  • Edit jqxGrid #92102

    softica
    Participant

    Hi everyone!

    I’m new in this forum and i have some little doubt about the jqxGrid.
    I’m creating a software that needs sorting (on cell clicking) and data filtering (on key press into the grid, like the ‘locate’ property on the Delphi DBGrid). It’s possible to implement this two things in jqxGrid? If it is, how can i do this?
    Another question, in some screens, i will have to show so many rows in the grid (like 2k, 3k), recovering by MySQL. It’s possible to work with large database set without paging? If it is, how can i do?

    Obs: My Server-Side language is PHP.
    Thank you!

    Edit jqxGrid #92133

    Hristo
    Participant

    Hello softica,

    I would like to suggest you review our demos with the Grid, there you could find a lot of useful examples.
    About the “sorting” when clicking on the cell – you could use cellclick event of the Grid.
    If you want to “filtering” the Grid when it is pressed some specific key I would suggest you look at this handlekeyboardnavigation property.

    I would suggest you look at our PHP section and please, take a look at this demo, could be useful.

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com

    • This reply was modified 7 years, 1 month ago by  Hristo.
    Edit jqxGrid #92136

    softica
    Participant

    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!

    Edit jqxGrid #92147

    Hristo
    Participant

    Hello softica,

    You should implement sort callback in the source.

    sort: function () {
    	// update the grid and send a request to the server.
    	$("#jqxgrid").jqxGrid('updatebounddata', 'sort');
    }

    Please, take a look at this article.
    Also, If your data is not so big (just 2000 records) you could try solution without “virtualmode”, we have demos with 30k records and more, created on that way.

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com

    Edit jqxGrid #92154

    softica
    Participant

    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!

    Edit jqxGrid #92194

    Hristo
    Participant

    Hello softica,

    Please, take a look at this demo:
    http://www.jqwidgets.com/jquery-widgets-demo/demos/php/serversorting.htm?light

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com

    Edit jqxGrid #92208

    softica
    Participant

    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();
    				});  
    Edit jqxGrid #92222

    Hristo
    Participant

    Hello softica,

    You could use the ensurerowvisible method again when you try to select a cell the event arguments has field event.args.rowindex.
    I would like to suggest you bind to different events separately thus way will be more easy to check and to work with the code.

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com

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

You must be logged in to reply to this topic.