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 }
);
Related
I would like to be able to programmatically select something from a dropdown, as in http://select2.github.io/select2/#programmatic. But the dropdown also seems to be generated (I didn't include it anywhere in the HTML) by the filterformatter widget, which I initialized with:
$('#client_table').tablesorter({
theme: "blue",
headers: {1: {sorter: 'types'}},
widgets: ["filter", "zebra"],
widgetOptions : {
filter_formatter: {
1 : function ($cell, indx) {
return $.tablesorter.filterFormatter.select2($cell, indx, {
closeOnSelect: false,
placeholder: "Select events",
allowClear: true,
match: false, // exact match only
});
},
What element do I call select2 on in this case? What are the values/data that I should be using (the thing I would like to select, for example, is the string APP_STATE).
When select2 is applied to the table, the table cell gets a class name of select2col0 where (0 is the column zero-based index).
If you open this demo and enter the following code in the console, it'll programmically set the value:
$('.select2col0').find('input').select2('val', ['abc']);
How to disable a particular column using handsontable in handsontable.I want first column only editable other three columns get disable.I'm using readonly true for three columns but it's not work how to disable....
columns: [
{
type:'handsontable',
handsontable: {
colHeaders: ['EmployeeNo','EmployeeName','Department','Designation'],
data: manufacturerData,
columns:[{},{readOnly: true},
{
readOnly: true
},
{
readOnly: true
}]
}
},
{}]
In Project i do it with this line of codes.
cells : function(row, col, prop) {
var cellProperties = {};
if (col > 0) {
cellProperties.readOnly = true;
}
else
{
cellProperties.readOnly = false;
}
return cellProperties;
}
You can find working example of it on given link. but give example is for set a row to readonly. http://handsontable.com/demo/conditional.html
Your code is working properly. Please see JSFiddle with approach similar to you.
$("#test").handsontable({
startRows: 1,
startCols: 1,
rowHeaders: true,
colHeaders: true,
minSpareCols: 0,
minSpareRows: 0,
contextMenu: false,
fillHandle: false,
outsideClickDeselects: false,
removeRowPlugin: false,
currentRowClassName: 'currentRow',
currentColClassName: 'currentCol',
columnSorting: true,
colHeaders: ['Col1','Col2','Col3','Col4'],
columns: [{},
{readOnly: true},
{readOnly: true},
{readOnly: true}]
});
Working link : http://jsfiddle.net/rvd61fuy/
Let me know, if you are facing anyother issue.
To disable you could make the cell/column readonly and maybe even set the background color to a grey(to give a special effect).Both the methods i.e the one where you use readonly:true in the column declaration when initializing the handsontable and also the one where you use cell properties and use conditions to determine if you need to set a cell to read only when the table is being rendered,both methods seem to be working for me.You need to instantiate your HOT correctly, that may be the problem. Also when using cell properties you needn't use cellProperties.readOnly = false as by default the cells are not read only unless you have coded for that seperately. If you need further assistance let me know.
Also check that you have the latest version of handsontable. I ran into problems trying to implement readonly on cells which had checkbox columns with erratic results.
Using the version below solved my issues (below is what I used in my HTML page)
<script src="http://docs.handsontable.com/pro/1.9.0/bower_components/handsontable-pro/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="http://docs.handsontable.com/pro/1.9.0/bower_components/handsontable-pro/dist/handsontable.full.min.css">
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},
]
I have an editable checkbox in my jQGrid with the values
editoptions: { value: "Yes:No" }
But whatever the value is i am getting back on controller string value "Yes:No", not single value "Yes" of "No", so i am getting it like that:
When it is checked i am getting this:
form["MyCheckBox"] = "Yes:No".
When it is not checked i am getting this:
form["MyCheckBox"] = "No".
How can i do to make it work?
Or is there any way to get bool values(true/false) instead of string values ?
Need help
Try this:
editoptions: { value:"True:False" }, editable:true, edittype:'checkbox',
formatter: "checkbox", formatoptions: {disabled : false}
It seems to me you describe the bug which is already fixed in the last version of jqGrid from GitHub. I recommend you to download the version from here. See here for the description of the order of the including of the jqGrid moduls.