I have a problem with sorting data with jqGrid.
I use datatype: "local".
Everything is fine when I reload the page, sorted ascending. However, if I click header layer to sort (desc or asc) jqGrid sort 1,10,2,3... not 1,2,3,4...10 (asc) and 9,8,7...3,2,10,1 (desc)
How do I solve this?
Here is my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My First Grid</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/jquery-ui-1.10.1.custom.min.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />
<style type="text/css">
html, body {
margin: 0;
padding: 0;
font-size: 75%;
}
</style>
<script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="js/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("#list").jqGrid({
datatype: "local",
height: 300,
colNames:['ID','Inv Date','Name', 'Note','Amount','Tax','Total'],
colModel :[
{name:'id', index:'id',width:20},
{name:'invdate', index:'invdate', width:55},
{name:'name', index:'name', width:90},
{name:'note', index:'note', width:80, align:'right'},
{name:'amount', index:'amount', width:80, align:'right'},
{name:'tax', index:'tax', width:80, align:'right'},
{name:'total', index:'total', width:150, sortable:true}
],
sortname: "id",
multiselect: true,
caption: "Manipulating Array Data"
});
var mydata = [
/**
* do this with PHP, for sampling usage i just want it generated automatically.
*/
<?php
$data=array();
for ($i=1; $i <= 10; $i++) {
# code...
$data[]='{id:'.$i.',invdate:"'.$i.'",name:"'.$i.'",note:"'.$i.'",amount:"'.$i.'",tax:"'.$i.'",total:"'.$i.'"}';
}
$data=implode(",",$data);
echo $data;
?>
];
for(var i=0;i<=mydata.length;i++)
jQuery("#list").jqGrid('addRowData',i+1,mydata[i]);
});
</script>
</head>
<body>
<!--this is it, jqGrid-->
<table id="list"><tr><td/></tr></table>
<div id="pager"></div>
<!--end of jqGrid-->
</body>
</html>
You should include sorttype: "integer" property in the definition of the corresponding column of colModel if you want that jqGrid sort the data in the column as integers.
Related
I'm using free jqgrid 4-15-3 with guiStyle set to bootstrap. The problem is that the Add dialog launched from navGrid "+" button is a Model dialog by default. I have set the "model: fasle" in addParms but has no effect. Also failed in making changes in afterShowForm by setting jquery ui dialog "option" with "model", false. Below is the code snippet. What are the possible solutions?
$("#mygrid").jqGrid("navGrid", "#mygrid_nav", {add:true,...},{},
{ model:false,
afterShowForm: function(form){
$(form).closest(".ui-jqdialog").dialog("option", "model", false);
}
}
Update: Created a simple test as below, same result:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/Content/jquery-ui.min.css" rel="stylesheet"/>
<link href="/Content/ui.jqgrid.css" rel="stylesheet"/>
<script src="/Scripts/jquery-1.10.2.js"></script>
<script src="/Scripts/jquery-ui.min.js"></script>
<script src="/Scripts/jquery.jqgrid.src.js"></script>
<script src="/Scripts/grid.locale-en.js"></script>
</head>
<body>
<div>
<div>
<div>
<table id="tbl_test"></table>
<div id="div_test_pager"></div>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$("#tbl_test").jqGrid({
datatype: "local",
colNames: ['Col 1', 'Col 2'],
colModel: [
{ name: 'col1', index: 'col1', editable: true, width: 200 },
{ name: 'col2', editable: true, width: 100 }
],
pager: "#div_test_pager",
height: 200,
caption: "Test"
});
$("#tbl_test").jqGrid("navGrid", "#div_test_pager",
{ edit: false, add: true, del: false, search: false, refresh: false }
/*no difference*/
//,{}, {modal: false}
);
});
</script>
</body>
</html>
Appreciate any help!
(Can Oleg or someone knows give a hint? Thanks a lot.)
The word model you use is not correct - replace it with the word modal in the settings and in the calling of the dialog function
I wanna create a focus on a particular cell value after clicking the alert box in jqgrid please any one suggest a solution thanks in advance
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/redmond/jquery-ui.css"/>
<link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.5.4/css/ui.jqgrid.css" />
<style type="text/css">
html, body { font-size: 75%; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.5.4/js/i18n/grid.locale-en.js"></script>
<script type="text/javascript">
//$.jgrid.no_legacy_api = true;
$.jgrid.useJSON = true;
</script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.5.4/js/jquery.jqGrid.src.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.blockUI.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
var lastsel2;
var myGrid = $('#rowed5');
var selRowId = myGrid.jqGrid ('getGridParam', 'selrow');
var celValue = myGrid.jqGrid ('getCell', selRowId, 'columnName');
jQuery("#rowed5").jqGrid({
datatype: "local",
height: 250,
colNames:['ID Number','Name', 'Stock', 'Ship via','Notes'],
colModel:[
{name:'id',index:'id', width:90, sorttype:"int", editable: true},
{name:'name',index:'name', width:150,editable: true, editoptions:{size:"20",maxlength:"30"}},
{name:'stock',index:'stock', width:60, editable: true, edittype:"checkbox",editoptions: {value:"Yes:No"}},
{name:'ship',index:'ship', width:90, editable: true, edittype:"select",formatter:'select',
editoptions:{value:"FE:FedEx;IN:InTime;TN:TNT;AR:ARAMEX"}},
{name:'note',index:'note', width:200, sortable:false,editable: true,edittype:"textarea",
editoptions:{rows:"2",cols:"10"}}
],
onSelectRow: function(id){
if(id && id!==lastsel2){
jQuery('#rowed5').editRow(id,true);
alert("hi");
//---here i missed alert after clicking this i want to focus on the cell that the user had already clicked--
setTimeout(function(){celValue.focus();},1);
//--here i get the particular cell value and i try to focus after clicking the alert box----
//-- i also try with $(this).focus as setTimeout(function(){$(this).focus();},1); but i did not get any possible output----
}
},
caption: "Input Types"
});
var mydata2 = [
{id:"12345",name:"Desktop Computer",note:"note",stock:"Yes",ship:"FE"},
{id:"23456",name:"Laptop",note:"Long text ",stock:"Yes",ship:"IN"},
{id:"34567",name:"LCD Monitor",note:"note3",stock:"Yes",ship:"TN"},
{id:"45678",name:"Speakers",note:"note",stock:"No",ship:"AR"},
{id:"56789",name:"Laser Printer",note:"note2",stock:"Yes",ship:"FE"},
{id:"67890",name:"Play Station",note:"note3",stock:"No", ship:"FE"},
{id:"76543",name:"Mobile Telephone",note:"note",stock:"Yes",ship:"AR"},
{id:"87654",name:"Server",note:"note2",stock:"Yes",ship:"TN"},
{id:"98765",name:"Matrix Printer",note:"note3",stock:"No", ship:"FE"}
];
for(var i=0;i<mydata2.length;i++)
jQuery("#rowed5").addRowData(mydata2[i].id,mydata2[i]);
});
</script>
</head>
<body>
<table id="rowed5" class="scroll"></table>
</body>
</html>
You get the most simple solution if you would use the latest source of free jqGrid which you can download from GitHub (free jqGrid is the fork of jqGrid which I develop). It allows you to implement onSelectRow as below
onSelectRow: function (rowid, status, e) {
var $self = $(this), savedRow = $self.jqGrid("getGridParam", "savedRow");
if (savedRow.length > 0 && savedRow[0].id !== rowid) {
//$self.jqGrid("restoreRow", savedRow[0].id);
$self.jqGrid("saveRow", savedRow[0].id);
}
$self.jqGrid("editRow", rowid, { focusField: e.target });
}
See the demo. The target property of 3-d parameter of onSelectRow is the clicked element. One can use focusField: e.target option of editRow to set the focus on the input/select in the clicked cell.
If you need to use alert but you don't want to change the focus then you can save the current focus in a variable then call alert and set the focus on the element which had focus before calling alert:
var $focused = $(":focus"); // get focus
alert("hi");
$focused.focus();
See the corresponding demo here.
Moreover I recommend you compare the modified code from my demo with your original code. For example it's very bad to fill the grid using addRowData. Instead of that one should use data: mydata2 parameter of jqGrid.
I have an issue with using JQgrid wiith rails. In the following code i get 3 errors. I am not even able to hit the url.
The errors are
Uncaught ReferenceError: jQuery is not defined -> grid.locale-en.js
Uncaught ReferenceError: jQuery is not defined -> jquery.jqgrid.min.js
Uncaught ReferenceError: $ is not defined -> at '$(function () {'
from the following code.
Any help would be appreciated. I think i have missed something small here.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>My First Grid</title>
<link rel="stylesheet" type="text/css" media="screen" href="/assets/jquery-ui-1.9.2.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="/assets/ui.jqgrid.css" />
<script type="/assets/javascript" src="js/jquery-1.8.3.js"></script>
<script type="/assets/javascript" src="js/jquery-ui-1.9.2.custom.js"></script>
<script src="/assets/grid.locale-en.js" type="text/javascript"></script>
<script src="/assets/jquery.jqGrid.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#list").jqGrid({
url:'/users/jq',
datatype: "json",
colNames:['ID','NAME','DISPLAY NAME'],
colModel:[{name:'id', index:'id',resizable:false,width:35},
{name:'USERNAME' , index:'USERNAME',edittype:'text',editable:true},
{name:'FIRST_NAME', index:'FIRST_NAME',edittype:'text',editable:true},
{name:'LAST_NAME' , index:'LAST_NAME',edittype:'text',editable:true}
],
mtype: "GET",
pager: "#pager",
rowNum: 5,
rownumbers: true,
rowList: [5, 10, 15],
height: 'auto',
width: '500',
loadonce: true,
caption: "My first grid"
});
});
</script>
</head>
<body>
<table id="list"><tr><td></td></tr></table>
<div id="pager"></div>
</body>
</html>
Are you sure that jQuery is really included on the page? You use
<script type="/assets/javascript" src="js/jquery-1.8.3.js"></script>
<script type="/assets/javascript" src="js/jquery-ui-1.9.2.custom.js"></script>
instead of
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.9.2.custom.js"></script>
(the value of type attribute is definitively wrong for jQuery and jQuery UI).
Good day.
I try to use jqGrid in my web project.
everything is good but one moment.
I want to enable filterToolbar but I can't.
I used lot of documentation and examples without good result.
data in grid is good
sorting is good
PROBLEM: filterPanel is invisible
Version: jqGrid 4.3.1 - jQuery Grid
Browser: Chrome and Internet Explorer
Please have a look on my code.
Thanks a lot.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" type="text/css" media="screen" href="css/redmond/jquery-ui-1.8.18.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
</head>
<body>
<table id="listU05"></table>
<div id="pager"></div>
<script type="text/javascript">
$(document).ready(function(){
$("#listU05").jqGrid({
url:'u05json.json',
datatype: 'json',
mtype: 'POST',
colNames:[
'thema'
],
colModel :[
{name:'Thema', index:'Thema', width:55}
],
pager: '#pager',
rowNum:10,
rowList:[10,20,30],
sortname: 'Thema',
sortorder: 'asc',
viewrecords: true,
gridview: true,
caption: 'My first grid11',
width:200
});
});
jQuery("#listU05").jqGrid('filterToolbar',{stringResult: true,searchOnEnter : false, defaultSearch : "cn"});
</script>
</body>
I think the problem is that you placed call of filterToolbar outside of the $(document).ready event handler $(document).ready(function(){...});. As the result the filterToolbar will be called before the grid created. Moving the call of filterToolbar at the end of $(document).ready event handler should solve the problem.
Moreover you should include !DOCTYPE declaration before <html>. For example it can be <!DOCTYPE html> or <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">.
hello i trying for two weeks that my jqgrid works without success. i dont know much about this lenguaje. i make that the grid bring me the data from de database but every time that i edit or add a new row the change is no applie to the database only change in the screen. then i refresh the page the chage desappears. help!!!!
this is the datos.js
jQuery("#grid_id").jqGrid({
url:'conec.php',
datatype: "json",
colNames:['id','name', 'record_id', 'created_at','updated_at','deleted_at'],
colModel:[
{name:'id',index:'id', width:55,editable:false,editoptions:{readonly:true,size:10}},
{name:'name',index:'name', width:80,editable:true,editoptions:{size:10}},
{name:'record_id',index:'record_id', width:90,editable:true,editoptions:{size:25}},
{name:'created_at',index:'created_at', width:60, align:"right",editable:true,editoptions:{size:10}},
{name:'updated_at',index:'updated_at', width:60, align:"right",editable:true,editoptions:{size:10}},
{name:'deleted_at',index:'deleted_at', width:60,align:"right",editable:true,editoptions:{size:10}},
],
rowNum:10,
rowList:[10,20,30],
pager: '#gridpager',
sortname: 'id',
viewrecords: true,
sortorder: "desc",
caption:"Navigator Example",
editurl:"editurl.php",
height:210});
jQuery("#grid_id").jqGrid('navGrid','#gridpager',
{}, //options
{height:280,reloadAfterSubmit:false}, // edit options
{height:280,reloadAfterSubmit:false}, // add options
{reloadAfterSubmit:false}, // del options
{} // search options
);
this is the index.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My First Grid</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/ui-lightness/jquery-ui- 1.8.6.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />
<style type="text">
html, body {
margin: 0; /* Remove body margin/padding */
padding: 0;
overflow: hidden; /* Remove scroll bars on browser window */
font-size: 75%;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin tÃtulo</title>
</head>
<body>
<table id="grid_id"></table>
<div id="gridpager"></div>
</body>
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="datos.js" type="text/javascript"></script>
</html>
this is the conec.php (the conection)
<?php
include_once 'lib.php';
$conexion= mysql_connect('localhost', 'root', '');
mysql_select_db("taskmaker", $conexion);
$result = mysql_query("SELECT id, name, record_id, created_at, updated_at, deleted_at FROM Team", $conexion);
$i=0;
while($row = mysql_fetch_array($result,MYSQL_ASSOC)) {
$responce->rows[$i]['id']=$row[id];
$responce->rows[$i] ['cell']=array($row[id],$row[name],$row[record_id],$row[created_at],$row[updated_at],$row[d eleted_at]);
$i++;
}
echo json_encode($responce);
?>
this is the lib.php
<?php
$dbhost = "localhost";
$dbuser = "root";
$dbpassword = "";
$database = "taskmaker";
?>
thats all.
jqGrid supports different ways to edit the contain of the grids: cell editing, inline editing, form editing. Your current code use form editing. You can see the editing live in the demo. Choose on the left tree part the item "Live Data Manipulation" and then "Navigator". See also "Row Editing" / "Input types" to understand how inline editing can look like.
After the user finish the row editing and press "Submit" button the information about the row added/changed/deleted will be posted to the URL defined by the editurl parameter of the jqGrid (editurl.php in your case). Together with the row data, as the additional parameter, will be posted oper which will be "add", "edit" or "del" string and the id which can be "_empty" in case of adding a new row. In case of adding of the new row your server code have to return the id of the new added row. It is very helpful to use Fiddler or Firebug to see what will be send to and returned from the server during the row editing.
So the implementation of the editurl.php is what you miss in your server code.