I have an issue with jqGrid 4.6.0
When I try to get the row data it changes each data to a string I need to parse them to get the actual int or boolean values what is strange is that when I see the rowobject inside a custom formatter the rowdata seems correct
Here is the sample code and jsfiddle link for the sample I created
var myformatter = function (cellval, options, rowObject)
{
// rowObject is correct here {id: 1, Name: "test1", IsActive: true, Count: 10}
var active = rowObject.IsActive;// here active is true/false which is good
var count = rowObject.Count; // here count is 10,20,30 which is good
if(active )
{
// do what ever
}
return cellval;
}
var mydata = [
{id:1, Name: "test1", IsActive: true, Count: 10},
{id:2, Name: "test2", IsActive: false, Count: 20},
{id:3, Name: "test2", IsActive: false, Count: 30} ];
var grid = $("#list").jqGrid({
datatype: "local",
data: mydata,
height: "auto",
colNames: ['id', 'Name','Is Active','Count'],
colModel :[
{name:'id', index:'id', width:55},
{name:'Name', index:'Name', width:90},
{name:'IsActive', index:'IsActive', width:90, editable: true ,formatter:myformatter},
{name:'Count', index:'Count', width:90, editable: true}
],
pager: '#pager',
rowNum:10,
rowList:[10,20,30],
sortname: 'idcustomers',
sortorder: 'asc',
viewrecords: true,
gridview: true,
caption: 'Customers',
cellEdit: true,
cellsubmit: 'clientArray',
});
var row = $('#list').jqGrid('getRowData', 1);
// row is: {id: "1", Name: "test1", IsActive: "true", Count: "10"}
// What I was expecting {id: 1, Name: "test1", IsActive: true, Count: 10}
You should use getLocalRow method instead of getRowData to solve your problem. It's important to understand that getRowData get the text from <td> element. Thus the standard type of data is always string. The method getLocalRow just get the reference to internal element of data array with original data.
One more remark: it's recommended to define unformatter (unformat callback) formatter always if one defines custom formatter.
One can see that you use editing of data. The standard editing will change the type of data on modification. Thus you will have the same problem as before. Free jqGrid allows to fix the problem by specifying convertOnSave callback for the column. See the wiki article for more details. Additionally free jqGrid support some standard column templates, which simplifies the data conversion for Boolean, integer and numbers. On can add template: "integer" property in the Count column (see the template definition here) and to add template: "booleanCheckbox" (see here). You can debug the demo for example and verify that the types of properties of data will be hold correctly after editing.
Related
I am using jquery.maskedinput-1.3.js
In column 1, are the phone types. In column 2 the phone numbers.
{ name: 'PhoneTypeId', index: 'PhoneTypeId', hidden: true, editable: true, sortable: true},
{ name: 'Phone', index: 'Phone', width: 150, editable: true, editoptions: { dataInit: function (elem) { $(elem).mask("(999) 999-9999"); }, dataEvents: [{ type: 'change', fn: function (e) { hasChanges=true } }]}, editrules:{required: true}, sortable: true },
I'd like to dynamically change the mask based on the type of phone. Is this possible?
My data is json serialized objects:
datatype: "local",
data: #Html.Raw(ViewBag.Phones)
editurl: 'clientArray'
Thanks,
Gen
You can add change event (using dataInit) of the phone type and based on this you can change the mask (if this plugin allows this). Initially when you start editing (depending on the edit type - form edit or inline edit) you can use some events before editing by example beforeShowForm for form edit or beforeEditRow for inline edit. If you use Guriddo jqGrid JS you can look at the documentation here
EDIT:
In case the field phonetype is not editable by the user then
{ name: 'Phone', index: 'Phone', width: 150, editable: true,
editoptions:{
dataInit: function (elem, options) {
// use the id of the row
var id = options.rowId;
// content of the phonetype cell
var phonetypeval = $(this).jqGrid('getCell', id, 'PhoneTypeId')
if( phonetypeval === 'something') {
mask = 'mask1';
} else {
mask = 'mask2';
}
$(elem).mask(mask);
},
dataEvents: [{
type: 'change', fn: function (e) { hasChanges=true } }
]}
, editrules:{required: true},
sortable: true}
Note that this code is valid for inline and form edit.
I have a problem that is confounding me for a few days. Initially, I tested a hard-coded approach within my javascript function which loads local variable containing a simple array as follows:
var myGridData = [
{ ID: "55505", Item: "Mortgage foreclosure", Class: "36", Status: "Pending" },
{ ID: "55506", Item: "Food truck parks", Class: "43", Status: "Pending" }];
for (var i = 0; i <= myGridData.length; i++)
jQuery("#popGrid").jqGrid('addRowData', i + 1, myGridData[i]);
And the above hard-coded approach works. But when I assign the data dynamically to the my GridData variable (based on user selections from another grid, my grid populates with empty rows, one row for each character in the variable (i.e. 154 rows using the above - instead of the two expected). I've double checked the two strings and they are identical (including the correct qualifiers, brackets, etc. so I am at a loss. Any ideas?
Thanks in advance,
Neale
Thanks Oleg, I can look into filling grid during its creation…once I understand everything a bit better. I’m kind of stabbing in the dark. Below, I’ve included code I use to obtain the array data string from the “main” page – which is then passed to the dialog via a hidden field. I’ve followed that up with my JQGrid parameters and colModel:
var temp = document.getElementById('<%=txtArray.ClientID%>').value;
var myGridData = temp;
jQuery("#popGrid").jqGrid({
multiselect: true,
data: myGridData,
datatype: 'local',
colNames: [
'ID',
'Item',
'Class',
'Status',
],
colModel: [
{ name: 'ID', index:'ID', key: true, width:50 },
{ name: 'Item', index: 'Item', key: true, width:100 },
{ name: 'Class', index: 'Class', key: true, width: 150 },
{ name: 'Status', index: 'Status', key: true, width: 250 },
],
multiSort: true,
sortable: true,
loadonce : true,
rownum: 5,
width: 850,
height: 100,
scrollOffset: 1,
shrinkToFit: true,
sortname: 'ID',
viewrecords: true,
gridview: true,
sortorder: "desc",
pager: '#popPager'
});
Using inline edit for jqGrid :
I have json data in a variable 'jsonDataStr'. The data is displayed using jqGrid.
$("#myGrid").jqGrid({
colModel: [
{ name: 'authenticate', width: "80" ,align: 'center',formatter: 'checkbox',editable:true,edittype:"checkbox", editoptions:{value: "Yes:No"}, formoptions:{ rowpos:1, label: "Authenticate ", elmprefix:"(*)"},editrules:{required:true} },
{ name: 'authorize', width: "80" ,align: 'center',formatter: 'checkbox',editable:true,edittype:"checkbox", editoptions:{value: "Yes:No"}, formoptions:{ rowpos:1, label: "Authorize ", elmprefix:"(*)"},editrules:{required:true}},
],
pager: '#pagerTable',
colNames:[ 'authenticate','authorize'],
datatype: "jsonstring",
datastr: jsonDataStr,
jsonReader: { repeatitems: false },
viewrecords: true,pginput : false, forceFit :true,
height: 83,caption :"Permissions",
ignoreCase: true,scrollBar : false
});
$("#myGrid").navGrid("#pagerTable",{edit:false,add:false,del:false,search:false,refresh:false});
$("#myGrid").inlineNav("#pagerTable");
It is getting displayed properly.
Now when I save row, I want to save data to the same json variable,'jsonDataStr'. Moreover, I want to add information to the json row,
such as added, modified or deleted. Is there any easy way to do this?
Could anyone help?
Maybe this will be helpfull
var jsonDataStr = "some Data you need";
$("#YourGrid").jqGrid('setGridParam', { jsonDataStr: jsonDataStr });
$('#YourGrid').trigger('reloadGrid');
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.
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.