Develop Reference

jQGrid - "jpg1" instead of proper id number

I'm loading local file (I'm parsing csv file into json and then transfer the array to jqGrid). Table generated through jqGrid should allow user to modify, add and delete the data in the grid. Everything seemed to work perfectly until I wanted to add a row to my grid. One of the columns had a parameter key = true which is my id for the rows. When I try to add new row, the grid changes my id into jpg1. The others columns are fine. Below is the code I'm using:
$("#jqGrid").jqGrid({
datatype: "local",
data: myData,
editurl: "clientArray",
colModel: [
{
label: 'Kod',
name: 'Kod',
width: 60,
editable: true,
key: true,
sorttype: 'number'
},
{
label: 'Firma',
name: 'Firma',
width: 120,
editoptions:
{
size: 40,
sopt:['cn']
},
editable: true,
sorttype: 'string'
},
{
label: 'Adres',
name: 'Adres',
width: 80,
editoptions: {size: 40},
editable: true
},
{
label: 'Miasto',
name: 'Miasto',
width: 80,
editoptions:
{
size: 40,
sopt:['cn']
},
editable: true
}
],
height: 'auto',
autowidth: true,
shrinkToFit: false,
forceFit: false,
autoencode: true,
viewrecords: true,
caption: "Title",
pager: "#jqGridPager",
sortable: true,
ignoreCase: true,
sortname: 'Kod',
sortorder: 'asc',
rowNum: 5,
rowList: [5, 10, 20, "10000:All"],
ondblClickRow: function(rowid) {
$("#jqGrid").jqGrid('editGridRow', rowid,
{
editCaption: "The Edit Dialog",
zIndex:100,
recreateForm: true,
closeAfterEdit: true,
width: 900,
errorTextFormat: function (data) {
return 'Error: ' + data.responseText
}
});
}
});
$('#jqGrid').jqGrid('navGrid',"#jqGridPager",
{ edit: true, add: true, del: true, search: false, refresh: true, view: true, cloneToTop: true},
// options for the Edit Dialog
{
editCaption: "The Edit Dialog",
zIndex:100,
recreateForm: true,
closeAfterEdit: true,
reloadAfterSubmit: true,
width: 900,
errorTextFormat: function (data) {
return 'Error: ' + data.responseText
}
},
// options for the Add Dialog
{
width: 900,
zIndex:100,
closeAfterAdd: true,
recreateForm: true,
reloadAfterSubmit: true,
errorTextFormat: function (data) {
return 'Error: ' + data.responseText
}
},
// options for the Delete Dialog
delSettings,
// options for the Search Dialog
{
zIndex:100
},
// options for the View Dialog
{
width: '100%'
});
I'm attaching a screenshot that shows a problem:
Photo
The data I use is a file parsed into JSON array via Papaparse.js plugin.
EDIT:
I've added the test data if somebody would like to test the code.
var myData = [];
myData.push(
{
Kod: 1.1,
Firma: 'Hutchinson',
Adres: '5th Avenue',
Miasto: 'Wroclaw'
},
{
Kod: 2.1,
Firma: 'BMW',
Adres: '6th Avenue',
Miasto: 'Warsaw'
});
I will be grateful for any help.

If you need the grid only for local editing, you can consider just remove key: true property to solve the problem. It's the way, which I would recommend you. You can include id property in the input data which will be used as value of rowid (id of <tr> elements).
Alternatively you can change the block "options for the Add Dialog" to the following
// options for the Add Dialog
{
width: 900,
zIndex:100,
closeAfterAdd: true,
recreateForm: true,
reloadAfterSubmit: true,
onclickSubmit: function (options, postdata, frmoper) {
// save Kod in some other parameter
return {myKod: postdata.Kod};
},
afterSubmit: function (jqXHR,postdata, frmoper) {
// restore the correct value
postdata.Kod = postdata.myKod;
// inform jqGrid that it was not an error
return [true];
}
},
You still don't would be able to change the id of the row in the way.
By the way you wrote that you use jqGrid 4.7.1. I want remind you that jqGrid 4.7.0 is the last version which is free. It's the reason why I started free jqGrid project which still free. You can get it here (see readme and wiki).
The demo shows an example of the above code fixes using free jqGrid 4.8.

How to add a class or id to a column in jqGrid

How do I add class or id in a column, actually I think this is the way I need to change the color of a "hover" in only one column, I tried some ways but failed.
jQuery(grid_selector).jqGrid({
url:urllst,
datatype: 'json',
height: 'auto',
width: 'auto',
ignoreCase: true,
colNames:['XX','XX','XX','XX','XX','XX','XX,'XX','XX','XX','XX?' ],
colModel:[
{name:"XX",index:"XX", width:100, sorttype:'text', viewable: true, frozen: true, focus: true,
stype:'text',
formoptions:{elmprefix:'*', label: 'XX:', rowpos:1, colpos:1},
editable:true,
editrules: {required: true},
edittype: 'custom',
editoptions: {style: "text-transform: uppercase",
'custom_element' : macro_uf_element,
'custom_value' : macro_uf_value,
},
It is very important whether it be by JavaScript if possible.

You can tell jqGrid to add a class to every cell of a column:
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:colmodel_options
Property: classes
Description: This option allow to add classes to the column. If more than one class will be used a space should be set. By example
classes:'class1 class2' will set a class1 and class2 to every cell on
that column. In the grid css there is a predefined class ui-ellipsis
which allow to attach ellipsis to a particular row. Also this will
work in FireFox too.
jQuery(grid_selector).jqGrid({
url:urllst,
datatype: 'json',
height: 'auto',
width: 'auto',
ignoreCase: true,
colNames:['XX','XX','XX','XX','XX','XX','XX','XX','XX','XX','XX?' ],
colModel:[
{name:"XX",index:"XX", width:100, sorttype:'text', viewable: true, frozen: true,
focus: true,
stype:'text',
formoptions:{elmprefix:'*', label: 'XX:', rowpos:1, colpos:1},
editable:true,
editrules: {required: true},
edittype: 'custom',
editoptions: {style: "text-transform: uppercase",
'custom_element' : macro_uf_element,
'custom_value' : macro_uf_value,
classes: 'your_class_here'
},

jqGrid - Custom button in nav bar added multiples times

I've added a custom button on my nav bar:
function myFunc(){
$("#grid").jqGrid({
datatype: 'json',
url: 'arquivo.jsp',
jsonReader: {repeatitems: false, root: 'root'},
pager: '#paginado',
rowNum: 10,
autoencode: true,
rowList: [10,20,30],
emptyrecords: "Não há registros.",
recordtext: "Registros {0} - {1} de {2}",
loadtext: "Carregando...",
pgtext: "Página {0} de {1}",
height: 250,
width: 700,
colNames:['Código','Nome', 'Ativo', 'Data Inclusão','Login','Senha','Confirma Senha','Email','Grupos'],
colModel:[
{name:'codigo', width:80, sorttype:"int", editable: true, editrules: { edithidden: true }},
{name:'nome', width:120, editable: true, editrules:{required:true}},
{name:'ativo', width:80, gridview: true, editable: true, edittype:'select', editoptions:{value:{1:'Sim',2:'Não'}}, editrules:{required:true}},
{name:'dataInclusao', width:120, sorttype:"date", datefmt: 'd/M/Y', editable: true, editrules:{required:true, date:true}, editoptions: { dataInit: function(el) { setTimeout(function() { $(el).datepicker({ dateFormat: 'dd/mm/yy' }).val(); }, 200); }}},
{name:'login', width:80, sortable:true, editable: true, editrules:{required:true}},
{name:'senha', width:80, sortable:true, editable: true, hidden:true, edittype:'password', editrules:{edithidden:true, required:true, custom:true, custom_func:validaSenha}},
{name:'confirmaSenha', width:80, sortable:true, editable: true, hidden:true, edittype:'password', editrules:{edithidden:true, required:true}},
{name:'email', width:150, sortable:true, editable: true, editrules:{required:true, email:true}}
],
multiselect: true,
viewrecords: true,
editurl:"data?edit=true",
caption: "Usuários"}
);
$("#grid").jqGrid('navGrid','#paginado',{},
{edit:true,url:"teste?acao=edit",closeAfterEdit:true,reloadAfterSubmit:true,
beforeShowForm: function(form) {
$('#tr_codigo', form).hide();
},
onClickSubmit: function(params, postdata) {
validaSenha();
}
},
{add:true,url:"teste?acao=teste",closeAfterAdd:true,reloadAfterSubmit:true,
beforeShowForm: function(form) {
$('#tr_codigo', form).hide();
},
onClickSubmit: function(params, postdata) {
validaSenha();
}
},
{del:true,reloadAfterSubmit:true,
onclickSubmit: function(url, postdata){
url.url = 'teste?acao=del';
return {codigo: $('#grid').getCell(postdata, 'codigo')};
}
},
{search:true},
{refresh:true}
).navButtonAdd('#paginado',{
caption:"",
buttonicon:"ui-icon-suitcase",
onClickButton: function(){
var dados = $("#grid").jqGrid('getGridParam','selrow');
},
position:"last"
});
};
but everytime I click on the page that shows my grid, a new button is added as you can see in this image:
I don't know if my .jsp can be bringing on this problem but I definitely can't find where the problem is. Hope you guys can help me
Thanks in advance,
Lucas.

I solved the problem using $('#grid').jqGrid('GridUnload');

There is another thread which talks about same issue. In the newer version the syntax got changed. Might help someone. Please refer here
$.jgrid.gridUnload("#jqGridId");

Having jqgrid return a link based on the value of the data

I have the following grid defined:
$("#list").jqGrid({
url:'listOpenQueryInXML.php',
datatype: 'xml',
colNames:['Id','name1', 'name2', 'status', 'type'],
colModel:[
{name:'id', index:'id', editable: false, formatter:'showlink', formatoptions:{baseLinkUrl:'continue.php'}},
{name:'name1', index:'name1', editable: false},
{name:'name2', index:'name2', editable: false},
{name:'status', index:'status', editable: false},
{name:'type', index:'type', editable: false}
],
autowidth: true,
sortname: 'id',
viewrecords: true,
pager: null,
sortorder: 'id',
loadonce: false,
caption: 'Open Query',
height: '100%',
xmlReader: { root : "rows", row: "row", repeatitems: false, id: "id" },
Now, what I would like to have is to override continue.php to be a different link based on the content of 'id', or 'status' or any field.
So if
status = NEW link="new.php?id="{id}"
status = STUCK link="helper.php?id={id}"
Etc.
I'm running jqGrid 4.3.1 and jQuery 1.8.16.

You should use custom formatter instead of showlink formatter. In the case you have to construct <a> element yourself based on the cellvalue, options and rowObject parameters of the callback function. Because you use datatype: 'xml' the rowObject parameter will be IXMLDOMElement so to get contain of the status you should use find or children jqGrid method.
I don't tested the code below, but I suppose you can do something like the following
$("#list").jqGrid({
url: 'listOpenQueryInXML.php',
colNames: ['Id', 'name1', 'name2', 'status', 'type'],
colModel :[
{name:'id', formatter: function (cellvalue, options, rowObject) {
return '<a href="' +
($(rowObject).children('status').text() === 'NEW' ?
'new.php' : 'helper.php') +
'?id=' + cellvalue + '">' + cellvalue + '</a>';
},
{name:'name1'},
{name:'name2'},
{name:'status'},
{name:'type'}
],
autowidth: true,
gridview: true,
sortname: 'id',
viewrecords: true,
sortorder: 'id',
caption: 'Open Query',
height: '100%',
xmlReader: { repeatitems: false, id: "id" }
});
Its only an example of the formatter. You can place for example other text in the link which will be displayed the user.
I removed from the jqGrid definition which you use many default options and added the gridview: true options which improves the performance of the grid.

How to hide and show custom buttons in jqGrid by using "reccount"

I'm trying to implement a custom button on a jqGrid with hide and show functionalities. I basically want to show the button if the grid is empty otherwise show.
I have implemented it with the "reccount" method from jqGrid to test if the grid is empty. However i'm not sure if i'm doing it right.
to the end of the code is where i declared the reccount. see "var count".
Thanks in advance.
$("#sessioninfoGrid"+row_id).jqGrid({
url:'/starburst/sessioninfoes/jsonlistbylectureoutline/'+row_id,
datatype: "json",
colNames: ['Session No.','Date','Start Time','End Time','Duration/Hours','Session Type','Topic','Room'],
colModel: [
{name:'sessionNumber',index:'SessionNumber', width:40, formoptions:{elmprefix:'(*) '}, editrules:{required:true}, editable:true, edittype: 'text'},
{name:'sessionDate',index:'sessionDate', width:100, formoptions:{elmprefix:'(*) '}, editrules:{required:true}, editable:true, edittype: 'text',
editoptions: {
dataInit: function(element) {
$(element).datepicker({dateFormat: 'DD, MM dd, yy'})
}
}
},
{name:'starttime',index:'starttime', width:50, formoptions:{elmprefix:'(*) '}, editrules:{required:true}, editable:true, edittype: 'text'
},
{name:'endtime',index:'endtime', width:50, formoptions:{elmprefix:'(*) '}, editrules:{required:true}, editable:true, edittype: 'text'
},
{name:'durationPerSession',index:'durationPerSession', width:50, formoptions:{elmprefix:'(*) '}, editrules:{required:true}, editable:true, edittype: 'text'
},
{name:'sessionType',index:'sessionType', width:50, formoptions:{elmprefix:'(*) '}, editable:true, editrules:{required:true}, edittype: 'select',
editoptions:{value:{}}
},
{name:'topic',index:'topic', width:200, formoptions:{elmprefix:'(*) '}, editable:true, editrules:{required:true}, edittype: 'text',
editoptions: {
dataInit: function(element) {
$(element).width(300)
}
}
},
{name:'room',index:'room', width:35}
],
rowNum:10,
autowidth: true,
pager: sessioninfoPager_id,
sortname: 'id',
viewrecords: true,
sortorder: "desc",
editurl: '<c:url value="/sessioninfoes/update"/>',
caption:"Session Info",
emptyrecords: "Empty Records"
});
$("#sessioninfoGrid"+row_id).jqGrid('navGrid',"#"+sessioninfoPager_id,{edit:false,add:false,del:false,search:true},{ },{ },{ },
{
sopt:['eq', 'ne', 'lt', 'gt', 'cn', 'bw', 'ew'],
closeOnEscape: true,
multipleSearch: true,
closeAfterSearch: true
}
);
$("#sessioninfoGrid"+row_id).navButtonAdd("#"+sessioninfoPager_id,
{
caption:"Add",
buttonicon:"ui-icon-plus",
onClickButton: addSessionInfoRow,
position: "last",
title:"Add New Session Info",
cursor: "pointer"
}
);
$("#sessioninfoGrid"+row_id).navButtonAdd("#"+sessioninfoPager_id,
{
caption:"Edit",
buttonicon:"ui-icon-pencil",
onClickButton: editSessionInfoRow,
position: "last",
title:"Edit Session Info",
cursor: "pointer"
}
);
var count= $("#sessioninfoGrid"+row_id).jqGrid('getGridParam','reccount');
if (count == 0){
$("#sessioninfoGrid"+row_id).navButtonAdd("#"+sessioninfoPager_id,
{
caption:"Load Sessions",
buttonicon:"ui-icon-plusthick",
onClickButton: function(){
$.post('<c:url value="/sessioninfoes/autocreate/"/>'+row_id,function(data){
$("#sessioninfoGrid"+row_id).trigger("reloadGrid");
});
},
position: "last",
title:"Load Session Infos",
cursor: "pointer"
}
);
}

The problem with your code is that the grid is loaded asynchronously, which means your call to reccount can happen before the grid is populated, so it returns 0 even though the grid is filled with data a moment later.
One solution is to dynamically hide your button based on whether any data was populated by a server request. For example:
$("#sessioninfoGrid"+row_id).jqGrid({
...
loadComplete: function() {
var count = jQuery("#sessioninfoGrid"+row_id)
.jqGrid('getGridParam','reccount');
if (count === 0){
jQuery('button[title="Load Session Infos"]').hide();
} else {
jQuery('button[title="Load Session Infos"]').show();
}
},
...