I have a grid with following options where "id" I want to set for a row need to be custom formatted.
There are two columns libCode and matCode.
Combining data of these two I want to create Id for row as follows:-
" ;libCode=[libcode];matCode=[matCode]"
But key=true option is not working with this field having its data set by custom formatter.
It returns the row no. if no xmlmap option is defined, or returns data from xmlmap element from XML response but not what custom formatter sets.
I want to know that why key option is not working and is there any other way I could implement this.
Here is my code for grid:
$(function () {
$("#list").jqGrid({
url: "./TestServlet?operation=RetrieveAll&accept=List",
datatype: "xml",
mtype: "GET",
colNames: ["Lib Code", "Mat Code", "Row Id"],
colModel: [ { name: "libCode", hidden:true, xmlmap:"libCd"},
{ name: "matCode", hidden:true, xmlmap:"matCd"},
{ name: "rowId", formatter:formatName , key:true}
],
xmlReader:{
root:"libs",
row:"lib",
repeatitems: false
},
pager: "#pager",
rowNum: 10,
rownumbers: true,
rowList: [10, 20, 30],
sortname: "libCd",
sortorder: "desc",
viewrecords: true,
gridview: true,
autoencode: true,
loadonce: false,
caption: "Library"
});
});
function formatName(cellValue, options, rowObject)
{
return " ;libCd="+$(rowObject).find('libCd').text()+";matCd="+$(rowObject).find('matCd').text();
}
Set property loadonce to true instead of false i.e. loadonce: true.
Related
I'm using jqGrid in which i have a jsonReader property and inside that i'm using a function to show the pager of the grid.
My jsonReader page function is working when the grid binds some records. Its not getting called when the grid binds no records. But i have to disable the pager(Previous/Last) when the grid binds no records. Any ideas why?
//Code:
$("#AttachmentsGrid").jqGrid({
url: '#Url.Action("LoadTransactionAttachments", "Home")',
postData: { 'transactionId': selectedRowId },
ajaxGridOptions: { contentType: "application/json" },
hoverrows: false,
datatype: 'json',
hidegrid: false,
rowList: [10, 20, 30],
rownumbers: true,
viewrecords: true,
height: 'auto',
gridview: true,
autoencode: true,
autowidth: true,
shrinkToFit: false,
rowNum: 10,
pager: '#AttachmentsPager',
caption: "Attachments",
colNames: ['AttachmentName'],
colModel: [{ name: 'AttachmentName', index: 'AttachmentName' }],
jsonReader: {
repeatitems: false,
id: 'AttachmentId',
page: function (obj) {
//Not working
if (obj.length == 0) {
return "0";
}
}
}
});
Any help?
I'd like to change the layout of the pager, so that the VCR buttons are all grouped together, followed by the Page number input field, then the number of rows drop-down. How would I accomplish this?
Here is the code I'm currently using to display the jqgrid. Its the standard JavaScript code:
$(function(){
$("#" + listName).jqGrid({
url: url,
datatype: 'json',
mtype: 'GET',
colNames: columnNames,
colModel: columnModel,
pager: pagerName,
rowNum: displayRows,
rowList: rowList,
sortname: initSortCol,
sortorder: initSortOrder,
viewrecords: true,
multiselect: multiSelect,
gridview: true,
caption: caption,
height: height,
jsonReader: {
root: 'data',
page: 'currentPage',
total: 'totalPages',
records: 'totalRows',
repeatitems: false,
id: dataModelRowId
}
});
jQuery("#" + listName).jqGrid('navGrid','#' + pagerName,{edit:false,add:false,del:false,search:false});
Example of jqgrid with page number, number of records per page.
Code:
$(document).ready(function(){
//jqGrid
$("#librariesList").jqGrid({
url:'<%=request.getContextPath()%>/Admin/getAllLibraries',
datatype: "json",
colNames:['Id','Edit','Type','Created Date', 'Modified Date', 'Url', 'Use Url'],
colModel:[
{name:'libraryId', index:'libraryId',search:false, width:30,sortable: false,hidden:true},
{name:'libraryId', index:'libraryId',search:false, width:30,sortable: false, formatter: editLink},
{name:'type',index:'type',width:80},
{name:'createdDate',index:'createdDate',width:150},
{name:'modifiedDate',index:'modifiedDate',width:150},
{name:'url',index:'url',width:150},
{name:'useUrl',index:'useUrl',width:50},
],
rowNum:20,
rowList:[10,20,30,40,50],
rownumbers: true,
pager: '#pagerDiv',
sortname: 'createdDate',
viewrecords: true,
sortorder: "asc",
autowidth:'true',
});
$('#gridContainer div:not(.ui-jqgrid-titlebar)').width("100%");
$('.ui-jqgrid-bdiv').css('height', window.innerHeight * .55);
$('#load_librariesList').width("130");
$("#librariesList").jqGrid('navGrid','#pagerDiv',{edit:false,add:false,del:false},{},{},{},{closeAfterSearch:true});
$(".inline").colorbox({inline:true, width:"20%"});
});
function editLink(cellValue, options, rowdata, action)
{
return "<a href='<%=request.getContextPath()%>/Admin/editLibrary/"+ rowdata.libraryId + "' class='ui-icon ui-icon-pencil' ></a>";
}
jggrid is displayed like below:
I have a jqgrid. I need to pull the json data from jqgrid after the client sorted the grid. Pulled json data should be the sorted version and not the original. How can I do this?
Here is my jqgrid source
jQuery("#myGrid").jqGrid({
datastr: jsonData,
datatype: 'jsonstring',
jsonReader: { repeatitems: false, root: function(obj) { return obj; }},
colNames: [ 'Column 1',
'Column 2'],
colModel: [
{ name: 'prop1', index: 'prop1'},
{ name: 'prop2', index: 'prop2'},
],
headertitles: true,
sortable: true,
pginput: true,
rownumbers: true,
rowNum: 5,
rowList: [5,20, 100, 10000],
pager: '#pager',
width:'600',
height:'300',
shrinkToFit:false,
viewrecords: true,
loadonce: true
});
Currently when I alert(jsonData) in the gridComplete it shows the original json data and not the sorted one.
For those who come across this problem, you can just take the data parameter passed to the loadComplete event of jqGrid. This data is the sorted version of the grid's data source.
it's my code:
<script type="text/javascript">
var grid = $("#list");
$(function(){
var grid = $("#list");
grid.jqGrid({
url:'grid.php',
datatype: 'xml',
mtype: 'GET',
colNames:['ID sprzętu','Kod sprzętu', 'Właściciel','Konfiguracja'],
colModel :[
{name:'SprzetID', index:'SprzetID', width:90},
{name:'Kod', index:'Kod', width:120, editable: true},
{name:'Wlasciciel', index:'Wlasciciel', width:200, align:'left', editable: true},
{name:'Konfiguracja', index:'Konfiguracja', width:400, align:'left', editable: true},
],
pager: '#pager',
rowNum:10,
rowList:[10,20,30],
sortname: 'SprzetID',
sortorder: 'asc',
viewrecords: true,
gridview: true,
caption: 'Lista sprzętu'
});
grid.jqGrid('navGrid','#pager',
{add: true, edit: true, del: true, search: true}, //options
{width:400, }, // edit options
{width:400,closeAfterAdd: true, url:'add.php'}, // add options
{reloadAfterSubmit:false}, // del options
{width:600} // search options
);
});
All is great, when adding record to database is correctly, but when for example field "Kod" is duplicate (it's unique field), record can't be add to database... and isn't. I want to display alert with error message, but I can't find in documentation how to do it... I gues,I should use "afterSubmit", but how... I don't know.
Resolved. In add parameters I added code:
afterSubmit: function(response, postdata) {
if(response.responseText != ""){
return [false, response.responseText];
}else{
return [true,"Ok"];
}}
I have a jqgrid with inline client-side search. When the database returns 0 records I am trying to hide the grid and show a custom message. The problem is that now when I use the filters the same thing happens. I need to get the number of rows from the back-end response and none of the below lines work. When the page loads I get 5 and 5, and when I filter I get 0 and 0. How can this be achieved?
.jqGrid('getGridParam', 'records')
.jqGrid('getGridParam', 'reccount')
var contratsAC=$("#ContratsAC");
contratsAC.jqGrid({
url:'<?php echo base_url().'rest/AC_Rest/get_contrats/'?>',
mtype : "post",
datatype: "json",
colNames:['Nr dossier','Type','Nom','Statut','Date creation','Date derniere maj','Commentaires','Auteur'],
colModel:[
{name:'nr_dossier',index:'nr_dossier',search:false, align:"center"},
{name:'type',index:'type',search:false, align:"center"},
{name:'nomClient',index:'nomClient',search:false, align:"center"},
{name:'statut',index:'statut',search: true, sortable: false, width:180, stype:'select',
searchoptions:{ value:statuts}, editable: false},
{name:'date_cre',index:'date_cre',search:false, align:"center"},
{name:'dern_date_maj',index:'dern_date_maj',search:false, align:"center"},
{name:'commentaires',index:'commentaires',search:false, align:"center"},
{name:'auteur',index:'auteur',search:false, align:"center"}
],
rowNum:10,
jsonReader: {
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: false,
id: "nr_dossier",
userdata: "userdata"
},
width: 960,
height: "100%",
rowList:[10,20,30],
pager: '#pager1',
sortname: 'nr_dossier',
viewrecords: true,
rownumbers: true,
gridview: true,
loadonce: true,
loadComplete: function(data){
alert(contratsAC.jqGrid('getGridParam', 'records'));
alert(contratsAC.jqGrid('getGridParam', 'reccount'));
if (0==contratsAC.jqGrid('getGridParam', 'records'))
{
contratsAC.jqGrid('GridUnload');
$("#contratsACNoDataMessage").html('<span>Aucun enregistrement a afficher.</span>');
}
else $("#ContratsACContainer").show();
},
pagination:true,
}).navGrid('#pager1',
{add: false,
edit:false,
del:false});
contratsAC.jqGrid('filterToolbar',{searchOnEnter:true,stringResult: true});
You may try getting the length of the data array holded by the grid:
$("#ContratsAC").jqGrid('getGridParam', 'data').length;
The below will give you all the rows - initial data source based
contratsAC.jqGrid('getGridParam', 'records');
To get the number of rows on the current page, lets say after filtering, use
contratsAC.jqGrid('getGridParam', 'reccount');
To get all the records across all pages after filtering, use below
loadComplete: function (gridData) {
var isSearchPerformed = $grid.getGridParam("postData")._search;
if (isSearchPerformed) {
$("#spanFilterTotal").text(gridData.records);
}