I try to work with the jqgrid and have now the problem that the function successfunc, aftersavefunc, errorfunc and afterrestorefunc not will be called.
My code:
$("#list-nxfeatures").jqGrid({
url:'lib/nxfeatures.php',
datatype: 'xml',
mtype: 'GET',
colNames:['Id','Name', 'Description','Default','Allow change','Nolimit'],
colModel :[
{name:'id', index:'id', width:55},
{name:'name', index:'datasetid', width:150, editable:true},
{name:'description', index:'featureid', width:200, editable:true},
{name:'defaultvalue', index:'defaultvalue', width:80, align:'center',editable:true, edittype:"checkbox", editoptions: {value:"1:0"}},
{name:'allowchange', index:'allowchange', width:100, align:'center',editable:true, edittype:"checkbox", editoptions: {value:"1:0"}},
{name:'nolimit', index:'nolimit', width:80, align:'center',sortable:false,editable:true, edittype:"checkbox", editoptions: {value:"1:0"}}
],
pager: '#pager-nxfeatures',
rowNum:10,
rowList:[10,20,30,100],
rownumbers: true,
sortname: 'id',
sortorder: 'desc',
viewrecords: true,
gridview: true,
caption: 'Features',
editurl: "lib/modifynxfeatures.php",
height: 220,
width: 800
});
jQuery("#list-nxfeatures").jqGrid('navGrid',"#pager-nxfeatures",{edit:false,add:false,del:true});
jQuery("#list-nxfeatures").jqGrid('inlineNav', "#pager-nxfeatures", { addParams: {
rowID: "neu3",
addRowParams: {
oneditfunc: function () {
alert("edited");
},
successfunc: function (response) {
alert("success");
return true;
},
aftersavefunc: function (response) {
alert("aftersave");
},
errorfunc: function (rowid, response) {
alert("errorfunc");
},
afterrestorefunc :function (rowid) {
alert("afterrestorefunc");
}
}
}
});
jQuery("#list-nxfeatures").jqGrid('filterToolbar',{stringResult: true,searchOnEnter : false});
What is wrong on my code?
The oneditfunc is work perfect.
Found your post as I had the same issue as yours. Found the solution. Posting it here for others reference.
addParams:{
addRowParams:{
oneditfunc:function(){
alert("edited");
}
}
},
editParams:{
successfunc:function(response){
alert("success");
return true;
}
}
Related
I have a grid like the following image:
Currently, I have add, edit, delete button in the footer. I need to have "edit" and "delete" button in each row. When I will click on edit button in each row, It will show edit form and when clicked on Submit, It will save data to the database.
My code looks the following:
$(document).ready(function () {
//jQuery.extend(jQuery.jgrid.defaults, { altRows:true });
$("#list_records").jqGrid({
url: 'ajaxELearningFetchTableData.php?table=GET_TRAINING_TYPE',
//url: 'server.php',
editurl: 'ajaxELearningSaveTrainingType.php',
datatype: "json",
colNames: ["TRAINING TYPE ID", "TRAINING TYPE NAME", "REMARKS"],
colModel: [
{
label: 'TRAINING TYPE ID',
name: 'TRAINING_TYPE_ID',
index: 'TRAINING_TYPE_ID',
editable: true,
sortable: true,
sorttype: "text",
editoptions: {readonly: "readonly"},
width: 40
},
{
label: 'TRAINING TYPE NAME',
name: 'TRAINING_TYPE_NAME',
index: 'TRAINING_TYPE_NAME',
width: 120,
editable: true, // must set editable to true if you want to make the field editable
editoptions: {size: 50, maxlength: 80},
editrules: {required: true, maxlength: 80},
sortable: true,
sorttype: "text",
// set options related to the layout of the Edit and Add Forms
formoptions: {
colpos: 1, // the position of the column
rowpos: 2, // the position of the row
label: "Training Type Name:", // the label to show for each input control
elmsuffix: "(*)"
}
},
{
label: 'REMARKS',
name: 'REMARKS',
width: 140,
editable: true,
edittype: 'textarea',
editoptions: {rows: 3, cols: 45},
formoptions: {
colpos: 1,
rowpos: 3
}
}
],
loadonce: true,
viewrecords: true,
altRows: true,
// width: auto,
// height: auto,
width: 1000,
height: 300,
rowNum: 10,
rowList: [10, 20, 30],
caption: "Training Type Information",
sortname: 'TRAINING_TYPE_ID',
sortorder: "asc",
emptyrecords: "No Records to Display.",
//footerrow: true,
pager: "#perpage"
});
$('#list_records').navGrid('#perpage',
// the buttons to appear on the toolbar of the grid
{edit: true, add: true, del: true, search: true, refresh: true, view: false, position: "left", cloneToTop: false},
// options for the Edit Dialog
{
height: 'auto',
width: 620,
editCaption: "Edit Training Type",
url: 'ajaxSaveTrainingType.php',
recreateForm: true,
closeAfterEdit: true,
afterComplete: function (response) {
alert(response.responseText);
},
// afterShowForm: function(form) {
// form.closest('div.ui-jqdialog').center();
// },
afterSubmit: function () {
$(this).jqGrid("setGridParam", {datatype: 'json'});
return [true];
//location.reload(true);
}
},
// options for the Add Dialog
{
height: 'auto',
width: 620,
addCaption: "Add Training Type",
url: 'ajaxSaveTrainingType.php',
closeAfterAdd: true,
recreateForm: true,
afterComplete: function (response) {
alert(response.responseText);
},
// afterShowForm: function(form) {
// form.closest('div.ui-jqdialog').center();
// },
//
afterSubmit: function () {
$(this).jqGrid("setGridParam", {datatype: 'json'});
return [true];
//location.reload(true);
}
},
// options for the Delete Dailog
{
height: 'auto',
width: 620,
addCaption: "Delete Training Type",
url: 'ajaxSaveTrainingType.php',
closeAfterAdd: true,
recreateForm: true,
//rp_ge, postdata
onclickSubmit: function () {
var sel_id = $('#list_records').jqGrid('getGridParam', 'selrow');
var trainingTypeId = $('#list_records').jqGrid('getCell', sel_id, 'TRAINING_TYPE_ID');
return {tTypeId: trainingTypeId};
},
afterComplete: function (response) {
alert(response.responseText);
},
// afterShowForm: function(form) {
// form.closest('div.ui-jqdialog').center();
// },
afterSubmit: function () {
$(this).jqGrid("setGridParam", {datatype: 'json'});
return [true];
//location.reload(true);
}
});
});
Any help will be welcomed.
Thanks.
You can add the column, which uses formatter: "actions" with formatoptions: { editformbutton: true } properties. If you use free jqGrid (it's the fork of jqGrid, which I develop), then you can use template: "actions":
{ name: "act", template: "actions", formatoptions: { editformbutton: true } }
See the demo as an example.
In case of usage old jqGrid (version <=4.7) you can add the column with the following properties for example:
{ name: "act", formatter: "actions", formatoptions: { editformbutton: true },
width: 54, align: "center", fixed: true, hidedlg: true, resizable: false,
sortable: false, search: false, editable: false, viewable: false }
I am a newbie to jqgrid and I am using jqgrid for displaying data along with codeigniter.
these are my grids:
grid 1
Student Table
<table id="list"></table>
<div id="pager"></div>
grid 2
Tutor Table
<table id="list1"></table>
<div id="pager1"></div>
I am loading a second grid when a user is double clicking on a row of the first grid.
My jqgrid code is:
<script type="text/javascript">
$(document).ready(function (){
var lastSel;
jQuery("#list").jqGrid({
url:'<?php echo $base_url.'index.php/demo/loadData'?>', //another controller function for generating data
mtype : "post", //Ajax request type. It also could be GET
datatype: "json", //supported formats XML, JSON or Arrray
colNames:['Name','Email','Passport','Phone','Fax','Address','Note'], //Grid column headings
colModel:[
{name:'name',index:'name', width:100, align:"left",editable:false},
{name:'email',index:'email', width:150, align:"left",editable:false},
{name:'passport',index:'passport', width:100, align:"right",editable:true},
{name:'phone',index:'phone', width:100, align:"right",editable:false},
{name:'fax',index:'fax', width:100, align:"right",editable:true},
{name:'address',index:'address', width:100, align:"right",editable:true},
{name:'note',index:'note',width:100,align:"right",editable:true},
],
rowNum:10,
width: 750,
//height: 300,
rowList:[10,20,30],
pager: '#pager',
sortname: 'id',
viewrecords: true,
rownumbers: true,
gridview: true,
caption:"List Of Students",
ondblClickRow:function(id){
if(id && id!==lastSel){
jQuery('this').restoreRow(lastSel);
lastSel=id;
}
// alert(id);
jQuery("#list1").jqGrid({
url:"<?php echo $base_url.'index.php/demo/load_tutor_data/'?>"+$('#'+id).children("td[aria-describedby='list_passport']").html(), //another controller function for generating data
mtype : "post", //Ajax request type. It also could be GET
datatype: "json", //supported formats XML, JSON or Arrray
colNames:['Name','Email','Passport','Phone','Fax','Address','Note','Assign',''], //Grid column headings
colModel:[
{name:'name',index:'name', width:100, align:"left",editable:false},
{name:'email',index:'email', width:150, align:"left",editable:false},
{name:'passport',index:'passport', width:100, align:"right",editable:true},
{name:'phone',index:'phone', width:100, align:"right",editable:false},
{name:'fax',index:'fax', width:100, align:"right",editable:true},
{name:'address',index:'address', width:100, align:"right",editable:true},
{name:'note',index:'note',width:100,align:"right",editable:true},
{name: 'checkbox', index: 'checkbox', align:"center",editable: true,
edittype: 'checkbox', editoptions: { value: "True:False" ,defaultvalue:"False" },
formatter: "checkbox", formatoptions: { disabled: false} },
{name: 'myac', width:80, fixed:true, sortable:false, resize:false, formatter:'actions',
formatoptions:{keys:true}},
],
rowNum:10,
width: 750,
//height: 300,
rowList:[10,20,30],
pager: '#pager1',
sortname: 'id',
viewrecords: true,
rownumbers: true,
gridview: true,
caption:"List Of Tutors",
onSelectRow:function(id){
alert("Assign Here");
},
onCellSelect:function(rowid, iCol, cellcontent, e){
if(iCol==8)
alert("make submit");
},
editurl:"<?php echo $base_url.'index.php/demo/load_tutor_data'?>"
}).navGrid('#pager1',{edit:false,add:false,del:false});
$("#admintask").show();
},
editurl:"<?php echo $base_url.'index.php/demo/loadData'?>"
}).navGrid('#pager',{edit:false,add:false,del:false});
$("tr").click(function(){
alert("test");
});
});
$("#bsdata").click(function(){
jQuery("#list").jqGrid('searchGrid',
{sopt:['cn','bw','eq','ne','lt','gt','ew']}
);
});
$("#bedata").click(function(){
var gr = jQuery("#list").jqGrid('getGridParam','selrow');
if( gr != null ) jQuery("#list").jqGrid('editGridRow',gr, {height:280,reloadAfterSubmit:false});
else alert("Please Select Row");
});
$("#list").hover(function(){
var gr = jQuery("#list").jqGrid('getGridParam','selrow');
});
$("#test1").click(function(){
$("#admintask").hide();
});
</script>
When I double click for the first time on a row in student table, it works fine. But when I double click on other row in the student table, it is showing the same data. I checked in the network of browser and it is not posting anything to the network as well.
Please let me know where am I making the mistake.
You have to unload the #list1 grid before loading, like below,
$("#list1 ").jqGrid('GridUnload');
jQuery("#list1").jqGrid({ ...............});
When I click in a row it is not selected, nothing happend....
This is my code, I think that scripts and CSS's are OK,
jquery-ui-1.8.16.custom.css
ui.jqgrid.css
jquery.min.js
jquery-ui.min.js
grid.locale-es.js
jquery.jqGrid.min.js
jQuery().ready(function (){
jQuery("#resTables").jqGrid({
url: "categorias.php?q=1",
datatype: "xml",
colNames: ["ID", "Categorias Es", "Categorias En", "Categorias Ru"],
colModel: [
{ name: "idCategoria", index:"idCategoria", key: true,width: 55 },
{ name: "nomCategoriaEs", index:"nomCategoriaEs", width: 250 },
{ name: "nomCategoriaEn", index:"nomCategoriaEn", width: 250, align: "right" },
{ name: "nomCategoriaRu", index:"nomCategoriaRu", width: 250, align: "right" },
],
pager: jQuery("#paginacion"),
rowList:[10,20,30],
sortname: "idCategoria",
sortorder: "desc",
viewrecords: true,
gridview: true,
autoencode: true,
caption:"Categorias" });
jQuery("#resTables").navGrid('#paginacion',{edit:true,add:true,del:false})
jQuery("#resTables").jqGrid('inlineNav',"#paginacion");
});
Thank You!!
Add this to your code..
onSelectRow: function (id) {
// do some thing
}
I have some problem, I want to delete some row using JqGrid plugin
Here's my php delete function, the database colum for id is idms_department
if($oper == 'del'){
$deptid = $_REQUEST['idms_department'];
$del = "DELETE FROM ms_department WHERE idms_department =" . $deptid;
if(mysql_query($del)){
"Delete Successfull";
} else {
die("Error Delete: " .mysql_error()."SQL : " .$del);
}
mysql_close();
}
and my jqgrid setting
<script type="text/javascript">
$(document).ready(function() {
//alert("start");
jQuery("#departments").jqGrid({
mtype:'GET',
url:'functions/get_dept.php',
editurl:'functions/edit_dept.php',
datatype: "JSON",
colNames:['Department ID','Department'],
colModel:[
{name:'idms_department',index:'idms_department', width:150, editable:true,add:true, del:true, key:true},
{name:'department',index:'department', width:800,editable:true, add:true, del:true}
],
loadComplete: function () {
alert("OK");
},
loadError: function (jqXHR, textStatus, errorThrown) {
alert('HTTP status code: ' + jqXHR.status + '\n' +
'textStatus: ' + textStatus + '\n' +
'errorThrown: ' + errorThrown);
alert('HTTP message body (jqXHR.responseText): ' + '\n' + jqXHR.responseText);
},
rowNum:10,
rowList:[5,10,15],
pager: '#pager-departments',
sortname: 'idms_department',
viewrecords: true,
jsonReader: {repeatitems: true, idms_department: "idms_department" },
sortorder: "asc",
caption:"Example Departments"
});
jQuery("#departments").jqGrid('navGrid','#pager-departments',{edit:true,add:true,del:true});
jQuery("#departments").jqGrid('gridResize',{minWidth:350,maxWidth:850,minHeight:80, maxHeight:350});
//alert("end");
});
</script>
How to get value of idms_department, because I see in my firebug, the idms is not recognizing (null) so the sql function is falling.
I am pasting example code for you please refer it, may be it will be help you.
jQuery("#list_requisitos").jqGrid(
{
url:'../ajax/common_form_detail.php?form_id='+form_id,
editurl:'../ajax/common_form_edit.php?form_id='+form_id,
datatype: "json",
colNames:['D','ID','AREA','PIN Transportador','Fecha creacion','Aprob. Gestor Operativo','Aprob. Gestor Administrativo','Usuario que registra','Contratista','Fecha EjecucionDe la Tarea','Periodo','Anexos'],
colModel:[{name:'boton_grupos_tematicos',index:'boton_grupos_tematicos',sortable:false, align:'center',width:'50',search:false},{name:'id',index:'id',editable:false,hidden:true},{name:'object_area',
index:'object_area',
formoptions:{elmsuffix:''},
editable:true,
editrules:{required:true},
hidden:false,
search:true,
edittype:'select',
formatter:'select',
editoptions: {value: ''}
},{name:'pin_transportador',
index:'pin_transportador',
formoptions:{elmsuffix:''},editrules:{required:true},editable:true,
hidden:false,
search:true,
editoptions: {size:80, maxlength: 1000}
},{name:"created_date",
index:"created_date",
formoptions:{elmsuffix:"(aaaa-mm-dd)"},
sorttype:"date", editoptions:{dataInit: function(element) {$(element).datepicker({dateFormat: "yy-mm-dd"})}},
search:true,
type:"text",
searchoptions:
{
dataInit: seleccionarFecha,
attr: {title: "Selecciona una fecha"}
}
},{name:'app_by_codinator',
index:'app_by_codinator',
editable:true,
search:true,
edittype:'select',
formatter:'select',
editoptions: {value: '0:NO;1:SI;-1:RECHAZADO'}},{name:'app_by_manager',
index:'app_by_manager',
editable:true,
search:true,
edittype:'select',
formatter:'select',
editoptions: {value: '0:NO;1:SI;-1:RECHAZADO'}},{name:"user_id",index:"user_id",type:"text",editable:false,hidden:false},{name:"contractor_id",index:"contractor_id",type:"text",editable:false,hidden:true},{name:"actual_task_done_date",index:"actual_task_done_date",type:"text",editable:false,hidden:false,editoptions:{dataInit: function(element) {$(element).datepicker({dateFormat: "yy-mm-dd"})}},},{name:"sumerized_date",index:"sumerized_date",type:"text",editable:false,hidden:false},{name:"attachments",index:"attachments",type:"text",editable:false,hidden:false}],
rowNum:20,
rowList:[20,50,100],
pager: '#pager_requisitos',
sortname: 'id',
viewrecords: true,
multiselect: true,
sortorder: "asc",
autowidth: true,
height: 400,
width: 900,
caption:"RG05 IN340_pin_transportador",
});
jQuery("#list_requisitos").jqGrid('navGrid','#pager_requisitos',{ edit:true,add:true,del:true,search:false},{width:780,recreateForm:true},{width:780,recreateForm:true})
.jqGrid('filterToolbar',{stringResult: false,searchOnEnter : false, autosearch: true})
});
});
The documentation of delGridRow describes what will be sent to the server on Delete operation. The name of rowid is id instead of idms_department which you use in your code (see the line $deptid = $_REQUEST['idms_department'];). You should either use the name 'id' in the statement or add prmNames: {id: "idms_department"} option to jqGrid. It changes the default name of id used in Add/Edit/Delete operation.
Additionally I would recommend you remove non existing properties add:true, del:true from colModel and index properties which value are the same as values of name properties, remove default value repeatitems: true from jsonReader and add gridview: true and autoencode: true to the grid. You can additionally remove {edit:true,add:true,del:true} option (remove the last parameter) of navGrid because all the values are default (see the documentation).
$(".deletethisrecord").live('click',function(e){ e.preventDefault();
toDelete = $(this).parent().parent().attr('id');
$("#list2").jqGrid(
'delGridRow',
toDelete,
{ url: '<?php echo $edit; ?>',
reloadAfterSubmit:false}
);
});
});
use some thing like this. place delete in your record list.
I'm having an issue with Jqgrid, I've got two grids on a single page and onclick on a row of the first grid needs to reload the second grid.
I'm 100% sure the second grid is configured correctly is if I manually pass a hard coded id it populates correctly.
Just the reload function is not working. Please could someone assist. Below is the jquery code for both grids
$(document).ready(function() {
jQuery("#list2").jqGrid({
url:'classes/ListServices.php',
datatype: "json",
mtype: 'POST',
colNames: ['Id','Description', 'Details', 'Cost in (R)'],
colModel: [
{name:'Id',index:'Id', align:"center", width:30},
{name:'Description',index:'Description', align:"center"},
{name:'Details',index:'Details', align:"left"},
{name:'Cost',index:'Cost',align:"center",width:30,formatter:'currency'},
],
width: 780,
height: 100,
rowNum:18,
pager: '#pager1',
loadonce: true,
sortname: 'id',
viewrecords: true,
sortorder: "asc",
caption:"Services List",
multiselect: false,
onSelectRow: function(ids) {
if(ids == null) {
ids=0;
if(jQuery("#list3").jqGrid('getGridParam','records') >0 ) {
jQuery("#list3").jqGrid('setGridParam',
{url:"subgrid.php?q=1&id="+ids,page:1});
jQuery("#list3").jqGrid.trigger('reloadGrid');
}
}
else {
jQuery("#list3").jqGrid('setGridParam',
{url:"subgrid.php?q=1&id="+ids,page:1});
jQuery("#list3").jqGrid.trigger('reloadGrid');
}
}
});
jQuery("#list2").jqGrid('navGrid','#pager2',
{edit:false,add:false,del:false,multipleSearch:true});
jQuery("#list2").jqGrid('filterToolbar',
{stringResult: true,searchOnEnter : false});
jQuery("#list3").jqGrid({
url:'classes/ListServicesDetails.php?Id=2',
datatype: "json",
mtype: 'POST',
colNames: ['Id','ServiceId', 'Description', 'Details', 'Cost in (R)'],
colModel: [
{name:'Id',index:'Id', align:"center", width:30},
{name:'ServiceId',index:'ServiceId', align:"center", width:30},
{name:'Description',index:'Description', align:"center"},
{name:'Details',index:'Details', align:"left"},
{name:'Cost',index:'Cost',align:"center",width:30,formatter:'currency'},
],
width: 780,
height: 200,
rowNum:18,
pager: '#pager2',
loadonce: true,
sortname: 'id',
viewrecords: true,
sortorder: "asc",
caption:"Services Details List",
multiselect: false,
onSelectRow: function(id) {
alert(id);
}
});
jQuery("#list3").jqGrid('navGrid','#pager2',
{edit:false,add:false,del:false,multipleSearch:true});
});
Please if someone could assist me ...
Thanks
Both jqGrids has parameters loadonce: true. It means that after the first loading the datatype of the grids will be changed from "json" to "local". To reload the second grid you should reset the datatype parameter to "json" together with url and page parameters.