Using the number formatter like below to format the JQgrid number with decimalSeparator(,)& decimalPlaces(2)
formatter: 'number', formatoptions :{decimalSeparator: ',', decimalPlaces:2}
after enter the value as 134,56 in grid it was showing as 'NaN'.
please help me how to resolve this issue.
The easy way to display correct the number in case you save to database is to set reloadAfterSubmit to true in navigator or in editGridRow method like this
$("#jqGrid").navGrid("#jqGridPager",{ edit: true, add: true },
// edit options
{ reloadAfterSubmit : true },
// add options
{ reloadAfterSubmit : true }
);
How do I get the formatted value of one column in another column in jqgrid.
For eg:
{ name: 'amount', index: 'amount', sorttype: "float", formatter: processAmount, title: false },
{ name: 'netAmount', index: 'netAmount', sorttype: "float", formatter: function (cellvalue, options, rowObject)
{
// How do I get the formatted value of column "amount" here?
}
}
I know that I am posting very little of my requirement or code. But I hope this is sufficient. Please let me know if you need more information on anything.
Thanks,
Sam
Custom formatters will be called before the body of the grid will be placed on the page. So you can't access the formatted value of one column inside of custom formatter of another column. What you can still do is calling of another formatfer. For example you can call processAmount function inside of formatter of netAmount column.
I've built a grid as the code bellow:
colModel: [
{ name: 'price',
label: 'price',
index: 'price',
jsonmap: 'price',
formatter: 'number',
formatoptions: {decimalSeparator:",", thousandsSeparator: ".", decimalPlaces: 2, defaultValue: '0,00'},
editable: true
}
]
The format of field is correctly on grid, for instance: 10,32, but the form created to edit the field fills one with 10.32 instead of 10,32.
Someone knows why this is going on? Do I need to use properties as edittype and editoptions (this one using formmater and formatoptions) as well? if yes, How I need set up these properties?
I've fixed the problem using the the function afterShowForm to handle the formating of field on form generated from grid.
In fact, I was expecting that jQGrid could do that automatically, i.e, using the configuration provided to column to apply on field generated, or if i could apply the configurion on JSON message, for instance:
editoptons: { formatter = "number", formatteroptions = { .... } ...
anyway, it's working now.
Does anybody have an example of using the date formatter with a server side database, or can you point me to something to help?
You can find information about predefined formatters on the jqGrid wiki.
The following is an example of how date formatting can be used in the grid. The format ShortDate displays the date according to the selected locale. You can use your own formatting instead, for example Y-m-d H:i:s.
srcformat describes the format of the date as sent by the server, newformat describes the desired output format.
This example includes searchoptions which will make sure that your users can select the desired date with the help of a datepicker when performing a search on the grid.
colModel :[
{ name:'startdate', index:'startdate', formatter:'date',
formatoptions: { srcformat:'m/d/Y', newformat:'ShortDate' },
searchoptions: { sopt: ['eq','lt','le','gt','ge'],
dataInit : function (elem) {
$(elem).datepicker({ changeMonth: true, changeYear: true,
dateFormat: 'yy-mm-dd' });
}
}
}
]
We can also take the transient field of the date in pozo class and check in getter methed if date is not null then convert it into datetostring .Also we have to change in jsp where we used this jqgrid we have to take transient field instead of date field.
example :
(Pozo Class)
transient private String indentDate_String;
public String getIndentDate_String()
{
if(indentDate != null)
indentDate_String = DateConversion.dateToString(indentDate);
return indentDate_String;
}
jqgrid (jsp form):
colNames:['Indent Date'],
colModel:[
{name:'indentDate_String',index:'indentDate',autoheight: true, width:100},
]
Scenario:
Use "stype:'select'" for 'Client' column in search popup.
The dataUrl for this column returns "<select><option value='F'>F</option><option value='O'>O</option></select>"
Bring up the Search Popup.
First line of the search criteria: 'Client not equal F'
Second line of search criteria: 'Amount not equal 300'
match type: 'any'
Click on Find.
I expect both the records with client type == 'F' to show up but neither do. Looks like the match type is still 'AND' instead of 'OR'.
$(function() {
var mydata = [
{id:"1", name:"test", amount:"200"},
{id:"2", name:"test2", amount:"300"},
{id:"3", name:"F", amount:"400"},
{id:"4", name:"test4", amount:"200"},
{id:"5", name:"test5", amount:"300"},
{id:"6", name:"test6", amount:"400"},
{id:"7", name:"test7", amount:"200"},
{id:"8", name:"test8", amount:"300"},
{id:"9", name:"test9", amount:"400"},
{id:"10",name:"test10", amount:"500"},
{id:"11",name:"F", amount:"500"},
{id:"12",name:"test11", amount:"500"},
{id:"13", name:"test", amount:"200"},
{id:"14", name:"O", amount:"200"}
];
jQuery("#list").jqGrid({
datatype: "local",
data: mydata,
width: 700,
colNames:['Inv No','Client', 'Amount'],
colModel:[
{name:'id',index:'id', width:65, sorttype:'int', searchoptions:{sopt:['eq','ne','lt','le','gt','ge']}},
{name:'name',index:'name', width:100, searchoptions:{dataUrl:'/api/domains/producttypedomain'}},
{name:'amount',index:'amount', sorttype:'int', width:80, align:"right"}
],
rowNum:100,
pager: '#pager',
height:'auto',
viewrecords: true,
rownumbers: true,
gridview : true,
caption:"Advanced Search Example"
});
jQuery("#list").jqGrid('navGrid','#pager',
{
edit:false,add:false,del:false,search:true,refresh:true
},
{}, // edit options
{}, // add options
{}, //del options
{multipleSearch:true, overlay:false, recreateFilter:true} // search options
);
});
I verified your example and I see that you found a bug in jqGrid. So +1 from me for you.
By the way the same bug still exist in the new version of the new multisearch plugin which is now in the alpha phase (see here for more information). The bug can be reproduced if one try to make OR (any) operation of two "not equal" operation. The "not equal" implementation has a bug.
In the current version (with the bug) of jqGrid the searching/filtering follows to execution of the statements like
!(parseInt(this.amount,10) == parseInt(200,10)) && !(parseInt(this.amount,10) == parseInt(500,10))
in case of operation ((amount<>200)||(amount<>500)). It is wrong. The "not equal" implementation is buggy in the current version of jqGrid.
I fixed the problem in the source code of jqGrid as following:
1) I added new function notEquals defined as
this.notEquals=function(f,v,t){
return self._compareValues(self.equals,f,v,"!==",t);
};
and inserted it after the this.equals (see here).
2) I modified the line 1359 of the grid.base.js from
'ne':function(queryObj) {return queryObj.not().equals;},
to
'ne':function(queryObj) {return queryObj.notEquals;},
After the fixes the searching works correct. You can see the results here (your original version one can test here)
In the next time I will post my suggestion in the trirand forum and I hope that Tony Tomov (the developer of jqGrid) will implement the fixes in the jqGrid.
UPDATED: How I promised I posted the bug report together with my suggestions to fix the problem.
UPDATED 2: The bug is already fixed in the current developer version on the GitHub. You can see the results here which use new fixed version with even more changes as I suggested in my answer. The new multiselect interface you can see here.