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.
Related
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 am using jqGrid 4.6.0.
Implemented Column chooser feature using the below code.
I am using
jquery-ui-1.11.1.js
jquery.multi-select.js
jquery-ui.css
multi-select.css
$.extend($.ui.multiselect, {
locale: {
addAll: 'Make all visible',
removeAll: 'Hidde All',
itemsCount: 'Avlialble Columns'
}
});
$.extend(true, $.jgrid.col, {
width: 500,
msel_opts: { dividerLocation: 0.5 }
});
$grid.jqGrid('navButtonAdd', "#p" + $grid.attr("id"), {
caption: "",
buttonicon: "ui-icon-calculator",
title: "Choose columns",
onClickButton: function () {
$(this).jqGrid('columnChooser',
{
width: 260,
height: 280,
classname: "column-chooser",
msel_opts: { //multiselect options
autoOpen: true,
header: true,
height: "auto",
classes: "column-chooser",
beforeclose: function () { return false; } //keep multiselect drop down open
}
});
}
});
The column chooser popup is showing up without available columns and make all columns visible options..
It just has one option available i.e., select columns..
Can somebody help..
thanks in advance...
It's very suspected where you get jquery.multi-select.js and multi-select.css. I suppose that you get wrong files. jqGrid which you downloads from trirand contains plugins subdirectory with ui.multiselect.js and ui.multiselect.css. So the typical contain of <head> of the page where you use jqGrid with columnChooser could be the following
<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.11.1/themes/redmond/jquery-ui.css"/>
<link rel="stylesheet" type="text/css"
href="http://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/css/ui.jqgrid.css"/>
<link rel="stylesheet" type="text/css"
href="http://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/plugins/ui.multiselect.css" />
<style type="text/css">
html, body { font-size: 75%; }
</style>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
<script type="text/javascript"
src="http://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/plugins/ui.multiselect.js"></script>
<script type="text/javascript"
src="http://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/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://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/jquery.jqGrid.min.js"></script>
I posted the bug report recently where I described some small steps to make "Remove all" and "Add all" working in case of usage the last versions of jQuery and jQuery UI. The modified versions of ui.multiselect.js and jquery.jqGrid.src.js you can download from here and here.
The demo can be used as prototype for the usage of columnChooser.
I was using a different Multiselect js and css files..
I downloaded the JQGRID 4.6.0 package.. it gave me the ui.multiselect.css and ui.multiselect.js files.. i added them in my project..
now the column chooser popup is showing up with available columns and make all columns visible options.. thank you Oleg.
I use kendoui window to create a dialog
in first time that i click on some button the kendo window open end of my page
in other time it's work good
my window div is below the body tag
plz help
$('#myModal').html(response);
var accessWindow = $("#myModal").kendoWindow({
actions: ["Maximize", "Close"], /*from Vlad's answer*/
draggable: false,
resizable: false,
title: "ویرایش سوال",
width: "90%",
visible: true
}).data("kendoWindow").center().open();
Your example seems to work fine to me (http://jsfiddle.net/OnaBai/uspmW/) and it should not happened that your window ends placed outside body tag since you are explicitly saying where it should be.
Your full HTML should be something like:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<link href="/styles/kendo.common.min.css" rel="stylesheet" type="text/css"/>
<link href="/styles/kendo.default.min.css" rel="stylesheet" type="text/css"/>
<script src="/js/jquery.min.js" type="text/javascript"></script>
<script src="/js/kendo.all.min.js" type="text/javascript"></script>
</head>
<body>
Type the text to add as response here : <input type="text" id="response" class="k-widget k-textbox"/></br>
<button id="button" class="k-button">Show response</button>
<div id="myModal"></div>
<script>
$("#button").on("click", function () {
var response = $("#response").val();
$('#myModal').html(response);
var accessWindow = $("#myModal").kendoWindow({
actions : ["Maximize", "Close"], /*from Vlad's answer*/
draggable: false,
resizable: false,
title : "ویرایش سوال",
width : "90%",
visible : true
}).data("kendoWindow").center().open();
});
</script>
</body>
</html>
As a recommendation, try not creating a new window each time you want to display it. Consider creating it at the beginning or the first time that you need it and then open it each time that you need it.
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.
I cannot get my data to show in jqgrid. I am using exactly the same code from this working example:
jqgrid won't load json data
My data is different, but not substantially so:
{"records":95,"page":1,"total":1,"rows":[{"Report":"f_cn_08","File":"F_CONTR.PBL"},{"Report":"f_cn_08","File":"F_CONTR.PBL"},{"Report":"f_cn_08","File":"F_CONTR.PBL"},{"Report":"f_cn_08","File":"F_CONTR.PBL"},{"Report":"f_cn_08","File":"F_CONTR.PBL"},{"Report":"f_cn_08","File":"F_CONTR.PBL"},{"Report":"f_cn_08","File":"F_CONTR.PBL"},{"Report":"f_cn_08","File":"F_CONTR.PBL"},{"Report":"f_cn_08","File":"F_CONTR.PBL"},{"Report":"f_cn_08","File":"F_CONTR.PBL"}]}
I hate to re-open the same issue, but this is very frustrating to me.
EDIT: 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 lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>InfoMaker Monitor</title>
<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.8.18/themes/redmond/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.3.1/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.7.1/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.3.1/js/i18n/grid.locale-en.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.3.1/js/jquery.jqGrid.src.js"></script>
<script type="text/javascript">
//<!CDATA[
jQuery(function () {
'use strict';
jQuery("#jsonmap").jqGrid({
url: 'http://localhost:8888/nancy/readasjson'
,datatype: 'json'
,ajaxGridOptions: { contentType: 'application/json; charset=utf-8' }
// see http://www.trirand.com/jqgridwiki/doku.php?id=wiki:retrieving_data
,jsonReader : {
page: "page"
, total: "total"
, records: "records"
, rows: "rows"
,cell: "cell"
,id: "id",
}
,colNames: ['Report','File']
,colModel :[
{name:'Report' ,index:'Report', width:55}
,{name:'File',index:'File', width:55}
]
,rowNum:10
,rowList:[10,20,30]
,viewrecords: true
,loadComplete: function() {
console.log("Load Complete");
//console.log("URI: " + jQuery("#jsonmap").jqGrid.datatype );
}
,loadError: function(xhr,st,err) {
console.log(xhr.statusText);
//$("#jsonmapMessage").html("Type: "+st+"; Response: "+ xhr.status + " "+xhr.statusText);
}
,width: '900'
,height: 'auto'//'300'
,caption: 'My first grid'
});
jQuery("#jsonmap").jqGrid('navGrid','#pjmap',{edit:true,add:false,del:false});
});
//]]>
</script>
</head>
<body>
<table id="jsonmap"><tr><td></td></tr></table>
<div id="pjmap"></div>
</body>
</html>
And here is how the data looks now:
{"records":10,"page":1,"total":1,"rows":[{"id":61,"cell":{"Report":"f_cn_08","File":"F_CONTR.PBL"}},{"id":62,"cell":{"Report":"f_cn_08","File":"F_CONTR.PBL"}},{"id":63,"cell":{"Report":"f_cn_08","File":"F_CONTR.PBL"}},{"id":64,"cell":{"Report":"f_cn_08","File":"F_CONTR.PBL"}},{"id":65,"cell":{"Report":"f_cn_08","File":"F_CONTR.PBL"}},{"id":68,"cell":{"Report":"f_cn_08","File":"F_CONTR.PBL"}},{"id":77,"cell":{"Report":"f_cn_08","File":"F_CONTR.PBL"}},{"id":79,"cell":{"Report":"f_cn_08","File":"F_CONTR.PBL"}},{"id":80,"cell":{"Report":"f_cn_08","File":"F_CONTR.PBL"}},{"id":81,"cell":{"Report":"f_cn_08","File":"F_CONTR.PBL"}}]}
I am tempted to fork the jqgrid source and add some console.log messages to it! Because failing mysteriously with no message is a great barrier to adoption.
The JSON data which you use has another format as in the referenced question, so jqGrid is, of cause, not able to read your data. jsonReader option describes the format of input data for jqGrig. If rows array contains object with named properties one should use jsonReader: {repeatitems: false}. In the case the colModel parameter should have columns with name: "Report" and name: "File".
The next problem of your JSON data - it has no id information for items of the rows. In the case jqGrid will use integer values 1, 2, 3... as rowids. Such automatical generation of ids will work good only for one grid per page. The second grid will have id duplicates. So it's recommended to include additional property id in every item of the array rows of the JSON input.