I am using Kendo grid for editing data. My problem is that when I edit a cell, it rounds the figure to two decimal places, even if the format of the cell is 4 decimal places.
Why its behaving like this?
You might add an editor function for that column. Something like:
columns: [
...
{
field: "Value",
width: 200,
format: "{0:##.####}",
editor: function(container, options) {
// create an input element
$("<input name='" + options.field + "'/>")
.appendTo(container)
.kendoNumericTextBox({
decimals: 4
});
}
},
...
]
See it in action here: http://jsfiddle.net/OnaBai/p92d1q8z/
Related
Well, I'm really stuck here. This example by Telerik shows how to change a field when editing to whatever you need. Exactly,
columns: [
{ field: "Category", title: "Category", width: "180px", editor: categoryDropDownEditor, template: "#=Category.CategoryName#" },
],
...where "categoryDropDownEditor" is a client side function that does the trick.
In MVC version there seems to be nothing of the kind. Is there? I keep believing that it should. I just do not need to traverse partial HTML from server each time I need to decorate an input field. And this is seemingly what "EditorTemplate", the only one available for MVC, does.
OK. In case anyone will bump into the same. I ended up with this "too elegant" a solution:
.Events(e => e.Edit("editing"))
this line in grid initialization routine (server side) calls the named dynamic method (client side):
function editing(e) {
var input = e.container.find("input[name=Regex]");
var textbox = $(document.createElement('textarea')).attr({
id: input.id,
}).width(input.width()).height(input.height()).val(input.val());
input.hide();
textbox.insertAfter(input);
textbox.focus(function () {
/*to make this flexible, I'm storing the current width & height in an attribute*/
$(this).attr('data-defaultwidth', $(this).width());
$(this).attr('data-defaultheight', $(this).height());
$(this).animate({
width: 400
}, 'slow');
$(this).animate({
height: 300
}, 'slow');
}).blur(function () {
/* lookup the original width */
var w = $(this).attr('data-defaultwidth');
var h = $(this).attr('data-defaultheight');
$(this).animate({
width: w
}, 'slow');
$(this).animate({
height: h
}, 'slow');
input.val(textbox.val());
input.trigger('change');
});
}
End tada, although it's a pure hack.
How do we control the format of date sent to the server as a result of applying a Date Filter to a grid column. For example, I have following View
<script type="text/javascript">
$("#request-grid").kendoGrid({
dataSource: {
...
schema: {
model: {
fields: {
CreatedOn: { type: "date" },
...
}
}
}
},
columns: [{
field: "Id", title: "Id", width: 20
}, {
field: "CreatedOn", title: "Created On", width: 75, format: "{0:dd-MM-yyyy}"
}, {
command: ["edit", "destroy"], width: 200
}],
});
</script>
With when I try to filter the Date Column (CreatedOn), I see that the parameter is sent in format
Wed Mar 12 2014 00:00:00 GMT+0530 (India Standard Time).
How do I control the format of date that is being sent to server as a result of applying a Date filter on grid column.
I have already followed the procedure of setting culture as described here. Here is how I configured in the Layout page.
kendo.timezones.js and kendo.culture.en-IN.js included through bundle
<script type="text/javascript">
kendo.culture("en-IN");
</script>
Any advice please.
if chaging the culture is not doing the work. Then the function that you need to use is called parameterMap under the dataSource.transport configuration.
I was recently fighting the same issue and for me the simplest way was to override the Date object toString method. I did it this way:
Date.prototype.toString = function() {
return this.getFullYear() + "-" + (this.getMonth() + 1) + "-" + this.getDate() + " " + this.getHours() + ":" + this.getMinutes() + ":" + this.getSeconds();
}
I am using devbridge ajax autocompletion script http://www.devbridge.com/projects/autocomplete/jquery/. When I type something in the textfeild, the suggestion list does show up and the matched portion of the words are correctly highlighted. However, the problem is the list remains static. In other words, the suggestion list basically functions like a dropdown list. All the items (matched or not) remain on the list, and in the same order, no matter what you type in the text field.
Anybody can tell me what the problem is? Thanks!
To answer your question, Anyone need code what you are using for this.
I will reply after understanding your code.
Sample Code :
$ (document). ready (function ()
{
$('#searchresult').autocomplete(
{
serviceUrl: 'search.php',
minChars: 1,
delimiter: /(,|;)\s*/, // regex or character
maxHeight: 400,
zIndex: 9999,
deferRequestBy: 0, //miliseconds
noCache: false, //default is false, set to true to disable caching
// callback function:
onSelect: function(value, data){ alert('You selected: ' + value + ', ' + data); },
// local autosugest options:
lookup: ['January', 'February', 'March', 'April', 'May'] //local lookup values
});
});
In the inline editing, before the editing be made, it creates internally an array (savedRow) and fill it with the values of the fields that are being editable, so I can access this values.
I'd like to know if in the form editing it has something similar to this, because I need to access the values of the fields before the editing will be completed to do a validation before the fields are "saved" in the database.
Someone could help me?
EDITED :
I'm posting here a part of my code (the code of one field), and I'm trying to validate in both way (inline editing and form editing). For inline editing I'm validating using dataEvents and there I'm using savedRow to access the data that were not stored yet. But when I try to edit using form editing because of the the use of savedRow, it shows me an error: savedRow is not defined. In the case of this field the editrules fits with what I want to do, but I don't know if this will occurs in all of those fields.
{ name: 'ac_fd', index: 'ac_fd', width: 50, editable: true,
formatter: 'number', editrules: { number:true, required:true, minValue: 0.1,
maxValue: 1.0 }, formatoptions: { decimalPlaces: 1, decimalSeparator: '.'},
editoptions: {
dataEvents: [ {
type: 'blur', fn: function(e) {
var savedrow = $("#list").getGridParam('savedRow');
console.log($(this).val());
if($(this).val() != savedrow[0]['ac_fd']) {
var eid='#' + savedrow[0]['id'] + '_ac_fd';
var val_fd=$(this).val();
var fd_min=0.1;
var fd_max=1.0;
if( isNaN(val_fd) || val_fd > fd_max || val_fd < fd_min) {
setTimeout(function(){
$(eid).focus().select();
},600);
$(eid).qtip({
content: {
text: 'Fator de Demanda deve ser um <b>número</b>
entre <b>' + fd_min.toFixed(1) + '</b> e <b>'
+ fd_max.toFixed(1) + '</b>.',
title: {
text: 'Atenção:',
button: true
}
},
show: {
event: false,
ready: true,
effect: function() {
$(this).stop(0, 1).fadeIn(400);
},
delay: 0,
},
hide: {
event: false,
effect: function(api) {
$(this).stop(0, 1).fadeOut(900).queue(function() {
api.destroy();
});
},
},
style: {
classes: 'qtip-red qtip-rounded trif_tip_err',
tip: {
width: 10,
height:12
}
},
position: {
my: 'bottom left',
at: 'top center',
},
events: {
render: function(event, api) {
tip_timer.call(api.elements.tooltip, event);
}
}
});
}
}
}
} ]
}
},
So if dataEvents is common and used for the three forms of edit, where can I do this type of validation (using qtip too and I want that this validation be used in inline editing too)?
The reason why jqGrid save the editing row in interval savedRow parameter is because jqGrid modify the editing row in-place. Only because of that inline editing and cell editing use interval savedRow parameter. Form editing don't modifies the original row of grid till the editing will be finished. So no savedRow parameter are used by form editing.
If the form are closed or if the server response will contains some error HTTP code the new data entered by user will be not saved in the grid. So simple server side validation is typically enough. If you want implement additional client side validation you can use editrules feature. Custom validation is typically enough. It can help validate one field of the form. If you need compare multiple fields of form during validation (if the value of one field defines valid values of another field) then one uses beforeCheckValues callback additionally.
UPDATED: Inside of fn event handler you can test whether it will be called inside of form editing or not. There are many ways to do this. For example you can test $(e.target).closest(".FormGrid").length > 0. If it's true then the event is inside of form. Additionally it's important to understand that the current editing row is not changed till successful saving on the server. So you can use any time getGridParam with "selrow" option to get the id of editing row and you can use getRowData or getCell to get the data from the grid before modification started (the same as savedrow).
I had a bean object with me in the colmodel of jqgrid. the object hold two attributes name and id. I used a showLink formatter to form the hyperlink in one of the column. Now i have names the colum with object.name and on click i want to send the id in URL. Any inputs on how to work on this.
Any inputs could help me
code :
colModel :[
{name:'xxx', label:'xxx', width:200,align:'left'},
{name:'yyy', label:'yyy', width:110,align:'left'},
{
name:'zzz',
label:'zzz',
width:100,
sorttype:'int',
formatter:'currency',
formatoptions:{decimalSeparator:".", thousandsSeparator: ",", decimalPlaces: 0, prefix: "$ "},
align:'center'
},
{name:'aaa', label:'aaa', width:80,align:'left'},
{name:'bbb', label:'bbb', width:100,align:'left'},
{
name:'strategies.name',
label:'strategies',
width:160,
align:'left',
formatter:'showlink',
formatoptions:{baseLinkUrl:'MyLink.html',addParam: '',showAction:'',idName:'id'}
}]
jQuery("#gridtableid").jqGrid('filterToolbar',{defaultSearch : "cn",stringResult: true,searchOnEnter : false});
Thanks in advance....
In JQgrid, you can call a javascript function and do any required formatting . You have the entire row data to play with it.
What needs to be done is call a function showlink in your case and remove formatoptions from that row. HAve a separate js function showlink as below and return the prepared link back to the grid.
function showLink(cellvalue, options, rowObject) {
var link = "'+ rowObject.columnName + "";
}