I have a kendo numeric box in grid. Only numbers are allowed in it. No decimal places and no comma separators. I tried in different ways but did not succeeded. Any idea ... Please help me...
In data source fields i given like this
seq_no : {type: "number",validation: {min: 1,max: 32767}}
In column of grid
{ field: "seq_no", width: "50px", title: "Sequence Number", type:"number"}
Use format with value {0:n0}:
{ field: "seq_no", width: "50px", title: "Sequence Number", type:"number", format: "{0:n0}" }
Above mentioned answer is working,
but it allows to enter decimal points. But this solution I implemented not allow a user to enter decimal points in text box
{ field: "seq_no",width: "10px", title: "Sequence Number",
editor: function(container, options) {
$('<input maxlength="5" name="' + options.field + '"/>')
.appendTo(container)
.kendoNumericTextBox({
min:0,
max: 32767,
format:"#",
decimals:0
})
}
}
For some reason:
format: "{0:n0}"
does not always get rid of the seperator. But I find that:
format: "{0:#.##}"
works nicely on the model field.
Hope this helps someone.
format: "{#.##}"
This one removes grouping together with decimal separator
Related
I got this small but strange error while implementing kendo column filters. My filtering icon has an additional dot in IE. In all other browsers everything looks fine. I don't know how to delete or at least hide this small additional dot.
Here is the screenshot from IE:
and here is how it should look like:
I used a regular kendo filtering implementation, example of the code is below:
var MyGrid = function($div) {
var base = $div.data('baseurl');
var columns = [
{ field: 'userName', title: 'User Name'},
{ field: 'age', type:'number', title: 'Age' }];
grid($div, columns, {
datasource: datasource(base + '/double', ViewBackbone.options()),
options: {
filterable : {
extra: false,
operators: {
string: {
contains: "Contains",
startswith: "Starts with",
eq: "Equals"
},
number: {
eq: "Is equal",
gt: "Greater than",
lt: "Less than"
}
},
messages: {
info: "Choose an option",
filter:"Filter",
clear: "Clear"
}
},
}
});
};
The problem was solved by fixing the width property to the columns header. So in your css you have to specify the width to be more than 100%. I set up mine to be 115% and the dot disapeered.
I am using data of following format in jqgrid "1201.2564.2548.25456". This throws the following error while displaying the data from JSON: Length of colNames <> colModel!
ANy idea.. is it related to format of the data?
Both parameters colNames and colModel are arrays, which have to have the same number of elements (the length). You use different length. One of possible error which I have seen before was the usage of strings "[...]" instead of arrays [...] as the value of colNames and colModel. As the result jqGrid code compared the length of the strings colNames and colModel instead of comparing the number of elements in arrays colNames and colModel. Such error could take place if you returns colNames and colModel from the server and you have used wrong JSON serialization on the server side.
Thus you should verify that the type of colNames and colModel are arrays and both arrays have the same number of elements.
It is mandatory to match the count of columns with the entries in the colModel.
Following error is prompted majorly if the columns count is not equal to number of entries inside the colModel. So colModel should match the count of ColNames.
E.g.
colNames: ['ID', 'First', 'Last', 'Email'],
colModel: [
{ name: "ID", index: "id", width: 100 },
{ name: "FirstName", index: "firstName", width: 100 },
{ name: "LastName", index: "lastName", width: 100 },
{ name: "Email", index: "email", width: 100 }
],
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 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
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.