Demo: https://dojo.telerik.com/OJOmaS (or http://jsfiddle.net/xfxwukqf/)
Given:
field: "salary",
format: "{0:n0}", -this means 0 decimals
The Salary field is editable and always shows 0 decimals (whole numbers).
The user can enter 99.123456... and the field will show 99, so far so good.
Problem:
When the user clicks on the field to edit again the field shows 99.12, why? Nowhere is the format for 2 decimals defined.
Second problem is that when I read the data the salary is also 99.12 (see screenshot attached). Whatever I change the format to the editor always displays 2 decimals. why?
Steps to reproduce problem:
Click in Salary Cell
Enter 99.1232343245
Click in Salary Cell again and notice the number 99.12 (also in console the value for salary is 99.12) yet the field format is n0 (no decimals
In your case, it looks at thought the format is applied to the grid cell value. When in edit mode, the format does not seem to carry over to the editor for that cell. Perhaps this is controlled by a setting??
In the meantime, you can use the code below as a workaround and place a kendoNumericTextBox into an editor template for the cell and bind it to the container. You can specify no decimals in the edit mode. This may or may not be what you envisioned.
...
{ field: "name" },
{
field: "salary",
format: "{0:n0}",
editor:customSalaryEdior
}
...
function customSalaryEdior(container, options) {
$('<input id="' + kendo.guid() + '" name="Salary" data-bind="value:salary">')
.appendTo(container)
.kendoNumericTextBox({
decimals: 0,
min: 0,
format: 'n0'
});
}
Related
I've just started using jqGrid and am having a problem trying to get the value of an edited cell when it loses focus. I have a two-column grid with only the first column editable. Eventually my aim is that when the user clicks out of a cell in this column, it will make an Ajax call to the server to populate the second column with a value. Right now, I'm testing by just having the value of the cell displayed in a div on the page. I find the event model very unclear and have tried all the events related to cell editing (beforeEditCell, afterEditCell, beforeSubmitCell, onSubmitCell, etc.) Only the beforeSubmitCell and onSubmitCell events actually return the value. The problem in my test is that when I first edit a cell, the correct value is shown, but when I edit other cells it keeps showing the value and row ID from the first edited cell. Here is my test page: http://www.galcott.com/jqgrid.html where you can see this happening and look at the code.
You have a lot of errors in your code and setup, which causes unexpected behavior.
1.You do not have included one of the important file - the language file. If you have include it you will see where is the problem.
2.You do not have include css framework file, which will cause sometime unexpected behavior.
3.You save a error in the grid parameter cellsubmit - in your code it is cellSubmit, while the working option is cellsubmit - JavaScript is case sensitive
4.At last the event onSubmitCell as I say in my comment should return true or false i.e
onSubmitCell: function(rowid, cellname, value, iRow, iCol) {
$('#celldata').html(iRow + ' ' + value);
if(some condition) {
return false;
}
return true;
}
In your code do:
$("#tbl1").jqGrid({
width: 400,
height: 400,
cellsubmit: 'clientArray',
editurl: 'clientArray',
...
and it will work
Math formula field is small.
This is default behavior of the Latex plugin. Can the field can be expanded? If yes, then how can I do that?
I have browse to fix this solution but none of them match with what I want. Anyone know how to expand it?
This is the screen shot:
UPDATED
return{title:b.title,minWidth:1000,minHeight:650,contents:[{id:"info",elements:[{id:"equation",type:"textarea",rows:10,label:b.dialogInput, ..
Note: I can expand the dialog display but I cannot expand the textfield formula form. It seem like the variable rows not functioning.
Should I declare the variable rows in other file?
You can edit the code that displays this dialog.
In your ckeditor folder, under the /plugins/mathjax/dialogs/ folder, open the mathjax.js file.
To make the dialog wider change the minWidth attributes. For example, to set the width to 750 pixels:
return {
title: lang.title,
minWidth: 750,
minHeight: 100,
contents: [
To add more lines to the formula textbox, add the rows attribute with the number of lines you want (the rows attribute is not there by default so add it). For example, to make the textbox 10 lines long:
elements: [
{
id: 'equation',
type: 'textarea',
rows: 10,
label: lang.dialogInput,
Here's a screenshot with the above changes:
Save the file and clear your cache before testing.
I have a Kendo grid that is groupable. The initial display needs to show all data items with no groupings displayed, i.e no 'group' and 'groupHeaderTemplate' are defined.
The grid contains a column (Suspension) where the value displayed is a translated dataitem value, i.e. if value > 10, display '*'.
When the user drags the Suspension column header cell to group, how can you customize the group header to show the value that it is grouping on plus the display 'value', i.e. 10-* ?
Do you mean on the button to turn off the group, or the group header text above each group in the grid ?
If the button to remove the grouping, I think you are stuck doing that manually.
If you mean the text above each group, columns have a groupHeaderTemplate property you can set.
groupHeaderTemplate: "Grouped By Name: #= value #"
See sample http://jsbin.com/IbITaT/2/edit
I want to add a custom tooltip on jqgrid column headers.i hover over the column name and i get the tooltip(describes content related to that col)
I don't think there is any built-in way to add custom headers. If you use the headertitles option, it will just use the text as the title attribute.
You'll probably have to set them manually doing something like this:
$("th[role='columnheader']").attr("title", "some description");
You can add that code to one of the callbacks such as gridComplete.
Thanks David for your answer.
we can do one more thing as shown in the code below :
var thd = jQuery("thead:first", grid[0].grid.hDiv)[0];
jQuery("tr.ui-jqgrid-labels th:eq(" + columnnumber + ")", thd).attr("title","This column tells you about people who attended the training but missed the test");
if you want to show custome tooltip for all column you can probably add a loop from first column to last column and have the "text" in an array
var arr=["hello","bla bla","a ","b","c"];
and use this array in the loop
in my site , i have a jqgrid table.
by default, the names of the columns (header) is longer than the width for column, because that i set the name with an ellipsis.
however, when resizing the column, the short name with ellipsis stays.
how can i get it work automatic ,
like the ellipsis should disappear and change to the full name when there is enough space, when the user is expanding the column.
thanks
You can add an event handler after the resizing finishes to reset the names. How are you storing / changing the names? If they're in an array, you can add a function like:
var columnNames = ['first', 'second', 'third'];
$("#mygrid").jqGrid({
...
resizeStop: function(newwidth, index){
jQuery("#mygrid").jqGrid('setLabel',index,columnNames[index]);
},
...
});