jQuery UI Widgets › Forums › Grid › Edit jqxGrid
Tagged: #jqwidgets-grid, grid, javascript grid, jquery grid, jqxgrid, json, mysql, php, sql
This topic contains 7 replies, has 2 voices, and was last updated by Hristo 7 years, 6 months ago.
-
AuthorEdit jqxGrid Posts
-
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!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 usecellclickevent 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 HristovjQWidgets team
http://www.jqwidgets.comHi 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!
Hello softica,
You should implement
sortcallback 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 HristovjQWidgets team
http://www.jqwidgets.comHi 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!Hello softica,
Please, take a look at this demo:
http://www.jqwidgets.com/jquery-widgets-demo/demos/php/serversorting.htm?lightBest Regards,
Hristo HristovjQWidgets team
http://www.jqwidgets.comHi 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(); });Hello softica,
You could use the
ensurerowvisiblemethod 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 HristovjQWidgets team
http://www.jqwidgets.com -
AuthorPosts
You must be logged in to reply to this topic.