I am new to jqGrid, and having trouble with achieving a couple of tasks. Any guidance will be a huge help.
Issue1# I need to perform following jquery masking on my rate field in the create form,
$('#Rate').priceFormat({ prefix: '', thousandsSeparator: '' }); How could I achieve this in jqGrid?
Thanks a lot.
This is what I have right now:
JQGridColumn RATEColumn = CapitationsGrid.Columns.Find(c => c.DataField == "RATE");
RATEColumn.Editable = true;
RATEColumn.EditType = EditType.TextBox;
RATEColumn.EditDialogLabel = "Rate";
RATEColumn.DataType = typeof(float);
RATEColumn.EditClientSideValidators.Add(new RequiredValidator());
RATEColumn.EditClientSideValidators.Add(new NumberValidator());
RATEColumn.Formatter = new CurrencyFormatter
{
DecimalPlaces = 1,
DecimalSeparator = ".",
Prefix = "$",
Suffix = " USD",
ThousandsSeparator = ","
};
It's important to understand, that jqGrid try to separate the data from the visualization. So If you need to display currency for example you should fill numbers in the input data and use predefined of custom formatters to display the currency in format which corresponds the locale which you need.
To format currency you should use formatter: 'currency', formatoptions: {thousandsSeparator: ""} (see the documentation). The default values of formatoptions of the currency formatter you will find in the locale file like grid.locale-en.js which you use.
This covers your problem. Have a look.
name: 'Currency',
width: 75,
formatter: 'currency',
formatoptions: { decimalSeparator: '.', decimalPlaces: 1, suffix: ' USD', thousandsSeparator: ',', prefix: '$' }
http://www.guriddo.net/demo/guriddojs/functionality/formatters_built_in/index.html
Related
I like to change the Type field drop down option depending on the inputs of Year and Level fields.
I am able to trigger an event when Level is change.
But how do I get the value of the Year field?
Portion of the code are as follows
colModel:[
{name:'Year',index:'Year', width:70,sortable:false,editable:true,align:'center',editoptions:{size:15, maxlength:4}, formoptions:{ rowpos:1, label: "Year (*)"},editrules:{required:true}},
{name:'Level',index:'Level', width:70,sortable:false,editable:true,align:'center',edittype: "select", editoptions: { value: '1:1;2:2;3:3;4:4;5:5;6:6', defaultValue:'1', dataEvents : [
{
'type' : 'change',
'fn' : function ( el ) {
// get the newly selected value from the user
var levelz = $(el.target).val(), yearz ;
var row = $(el.target).closest('tr.jqgrow');
var rowid = row.attr('id');
//yearz = ??
if (parseInt(levelz)==5 || parseInt(levelz)==6)
{
if (parseInt(yearz)>2017)
{
$("#gridmain").jqGrid('setColProp','Term', {editoptions: { value: '1:Sem 1;4:Sem 2;6:EY;9:OVR', defaultValue:'Sem 1'}} );
}else{
$("#gridmain").jqGrid('setColProp','Term', {editoptions: { value: '', defaultValue:''}} );
}
}else{
$("#gridmain").jqGrid('setColProp','Term', {editoptions: { value: '1:TA1/CT1;2:TA2-before 2013;3:MY/TA2/CT2;4:TA3/CT3;5:TA4-before 2013;6:EY/TA4/CT4;9:OVR;D:CW1;E:CW2;F:CW3;G:CW4', defaultValue:'TA1'}} );
}
}
}]}, formoptions:{ rowpos:2, label: "Level (*)"},editrules:{required:true}},
{name:'Term',index:'Term', width:70, sortable:false,editable: true,align:'center',edittype: "select", editoptions: { value: '1:TA1/CT1;2:TA2-before 2013;3:MY/TA2/CT2;4:TA3/CT3;5:TA4-before 2013;6:EY/TA4/CT4;9:OVR;D:CW1;E:CW2;F:CW3;G:CW4', defaultValue:'TA1'}, editrules: { required: true }, formoptions:{ rowpos:3, label: "Type"}},
The codes are from piecing together what I read from google search...
I face 2 issues:
1) I don't know how to get the Year value
2) The drop down option list doesn't seems to change. - hmm it seems that if I close the edit form and open again, the Type field drop down option changes. What I need is to change the option on the fly - wonder how this can be done...
After much googling, managed to get the ans from Oleg's post as shown here
Also from his example, I derive the year value:
var yearz = $("#Year.FormElement", form[0]).val();
I want to show a blank value in dropdown list , i am using the code like this , but this make a dropdownlist in which blank value comes at last , and by default selected , i want blank value at first and by default selected
{name: 'AuditLevel', index: 'levels', align: 'center', width: 15,
editable: true, edittype: 'select',
editoptions: { value: {' ': ' ',1: 'Level1', 2: 'Level2', 3: 'Level3' }}
Any Solution for this
The problem exists because you use object form of editoptions.value. The only way to read such editoptions.value object in JavaScript is enumeration of properties of the object (with loop like var prop; for (prop in editoptions.value)). The problem is that the order of the properties in the case could be not the same as the order in which you wrote the properties during initialization of the object.
So you should use string form if the order of the properties are important for you:
editoptions: { value: " : ;1:Level1;2:Level2:3:Level3" }
would be better as
editoptions: { value: {' ': ' ',1: 'Level1', 2: 'Level2', 3: 'Level3' }
jqGrid will split the string " : ;1:Level1;2:Level2:3:Level3" by ; and then it will use : as the separator between the value and the text of options. If the text (or the value) of the options contains the separators : or ; you can use another separators, but you have to inform using separator (it's default value is ":") and delimiter property (it's default value is ";"). For example
editoptions: {
value: " ↣ |1↣Level1|2↣Level;2|3↣Level:3"
delimiter: "|",
separator: "↣"
}
When attempting to save a information from a datatable in share, I have a problem with the french locale for numbers that are in view in that when I save, the numbers are saved as displayed in view (i.e. commas instead of periods to denote the decimal places).
parent.widgets.pagingDataTable = new Alfresco.util.DataTable({
dataTable: {
container: parent.id + "-datatable",
columnDefinitions: columnDefinitions,
config: {
MSG_EMPTY: parent._msg("message.noProducts"),
responseType: YAHOO.util.DataSource.TYPE_JSON,
responseSchema: {
resultsList: "productList",
fields: ["photo", "unitQuantity", "minQuantity", "unitPrice", "descriptionProduct"],
},
currencyOptions: {suffix: '€', decimalPlaces: 2, decimalSeparator: ',', thousandsSeparator: '.'},
}
}
Has anyone had this issue with currency formatter and localization in YUI 2.
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.
I have built a dojo 1.5 datagrid + dojox.data.JsonRestStore. When the grid renders I can see the "carrot" that shows that sorting has fired and is on defaulting the right column. However, the content of the column(string values - field: 'projectShortName',...see code below) are not actually sorted. Hitting the descending/ascending button doesn't change the order or the rows. They are essentially locked in. I am not sure why?
I have column sorting turned off for certain columns and on for others using the canSort(). I only have formatters for calls with columns that have the sort turned OFF. I have tried making all columns sortable or only just the one that I really wanted. No dice.
Here is the layout/grid code:
var layout = [{
field: '_item',
name: ' ',
formatter: selectFormatter,
width: '25px'
},
{
field: 'projectName',
name: 'Project Name',
width: '325px'
},
{
field: 'projectShortName',
name: 'Short Name',
width: '80px'
},
{
field: 'projectAreaName',
name: 'RQM Project Area',
width: '175px'
},
{
field: '_item',
name: 'Test Guide Status',
width: '190px',
formatter: testCaseGenerationOptionFormatter
},
{
field: 'projectOwner',
name: 'Owner',
width: '140px'
},
{
field: 'projectCreationTime',
name: 'Created Date',
width: '100px'
},
{
field: 'projectLastUpdateTime',
name: 'Last Modified Date',
width: '120px'
}];
dojo.empty(dojo.byId('workspaceGridContainer'));
if (dijit.byId("projectGrid")) {
dijit.byId("projectGrid").destroyRecursive();
}
// Create a new grid:
var grid = new dojox.grid.DataGrid({
id:'projectGrid',
onHide: dojo.hitch(this, function() {
dijit.byId("projectGrid").destroyRecursive();
}),
store: jsonStore,
clientSort: true,
autoHeight: true,
//sortInfo: "-2",
selectionMode: 'single',
rowsPerPage: '100',
structure: layout
},document.createElement('div'));
dojo.byId("workspaceGridContainer").appendChild(grid.domNode);
// Call startup, in order to render the grid:
grid.startup();
//var test = grid.setSortInfo(obj);
// Prevent sorting on column 1
grid.canSort = function(col){ if((Math.abs(col) == 1) || (Math.abs(col) == 5) || (Math.abs(col) == 6) || (Math.abs(col) == 7) || (Math.abs(col) == 8)) { return false; } else { return true; } };
var index = grid.getSortIndex();
if(index!=2) {
if(grid.canSort(2)){
grid.setSortIndex(2, false);
}
}
As you can see commented out I have tried sortInfo as well. Any advice would be appreciated!
-Doug
You may be using the wrong comparison operator. The dojo documentation uses the strict equal '===' whereas you only use the equal '=='. This causes problems in js, especially when you're comparing a literal, i.e. '1' with an object: 'Math.abs(col). The official grid.canSort method should be coded as follows:
function canSort(col){ return Math.abs(col) === 2;}
Note Mozilla's description of the equal operator, and the type conversion js uses to resolve different data types:
https://developer.mozilla.org/en/JavaScript/Reference/Operators/Comparison_Operators
Equal (==) - If the two operands are not of the same type, JavaScript converts the operands then applies strict comparison. If either operand is a number or a boolean, the operands are converted to numbers if possible; else if either operand is a string, the other operand is converted to a string if possible. If both operands are objects, then JavaScript compares internal references which are equal when operands refer to the same object in memory.