Related
I want to get just editing row validating field value with another field on the.
Bu it doesn't work.
fields: [
{ name: "id", type: "text", align: "center", width: 10, editing: false, title:"ID"},
{ name: "total", type: "number", align: "center", width: 30, editing: false, title:"Total"},
{ name: "correct", type: "number", align: "center", width: 30,
validate: {validator: function(value, item) {
return value <= item.total;}, message: "Correct should be smaller or equal than Total"}
},
{ type: "control", modeSwitchButton: false, editButton: true, deleteButton: false }]
can you help?
I found some way like this:
var editing_row_field2;
....
onItemEditing: function(args) {
editing_row_field2= args.item.field2; },
fields: [{ name: "field2", type: "number"},
{ name: "field1", type: "number",
validate: { validator: function(value, item) {
return editing_row_field2 >= value; },
message: "FIELD1 should be smaller or equal than FIELD2." }
},
{ type: "control", modeSwitchButton: false, editButton: true, deleteButton: false }]
You can access other fields in current row using item argument from validator function
fields: [{ name: "field2", type: "number"},
{ name: "field1", type: "number",
validate: { validator: function(value, item) {
return item.field2 >= value; },
message: "FIELD1 should be smaller or equal than FIELD2." }
},
{ type: "control", modeSwitchButton: false, editButton: true, deleteButton: false }]
I'm quite new using kendo grids.
So far I've managed to do a few stuff and got a workaround for all my problems.
I have a grid with 2 columns.
One column is a product code that the user should enter, and the other is product quantity that should be filled automatically after the user enter the product code. This should be done on change event.
The product quantity is obtained by a service.
So far I have the following code:
var dataSource = new kendo.data.DataSource({
batch: false,
autoSync: false,
data: [],
pageSize: 20,
schema: {
model: {
id: "ProductID",
fields: {
ProductCode: { type: "string", validation: { required: true } },
ProductQuantity: { type: "number", validation: { required: false, editable: false } }
}
}
},
edit: function (e) {
if (e.model.isNew() == false) {
$('[name="ProductQuantity"]').attr("readonly", true);
}
},
change: function (e) {
if (e.action == "itemchange") {
debugger;
apModel.getProductQuantities(e.items[0].ProductCode).ifFetched().then(function (data) {
var data = JSON.parse(data.Response);
})
//how to access next cell???
$("#ap-grid").data("kendoGrid").saveRow();
}
}
});
$("#ap-grid").kendoGrid({
dataSource: dataSource,
pageable: false,
height: 550,
toolbar: ["create"],
columns: [
{ field: "ProductCode", title: "Product Code" },
{ field: "ProductQuantity", title: "Quantity" },
{ command: ["edit", "destroy"], title: " ", width: "250px" }],
editable: "inline",
});
I can't find a way how to access the next cell to add the data to it.
Can you give me a hint?
thanks in advance,
André
When you set e.items[0].ProductQuantity in OnChange event handler grid cell should automatically update value if datasource bind correctly.
According to kendo docs:
e.items - The array of data items that were affected (or read).
That means it reference at original row of datasource.
I am doing an inline add, using the inline Nav feature. It successfully sends the data of all "edit: true" columns, but there is one other column from the grid that I need to send with the Add. It is a hidden column and by using "editrules: { edithidden: false }, I can send the value with an edit, but not an ADD. How to do I send hidden, non-edit columns with an ADD?
{ name: 'RecipKey', index: 'RecipKey', hidden: true, editable: true, editrules: { edithidden: false } },
...
$("#activity-grid").jqGrid('inlineNav', '#grid-pager',
{
edit: true, add: true, del: true, cancel: true,
editParams: { keys: true },
addParams: { keys: true }
});
following the reference http://www.trirand.com/jqgridwiki/doku.php?id=wiki:methods:
you can pass extraparam on addRowParams when you use the method addRow.
example:
jQuery("#list").jqGrid('addRow',
parameters =
{
addRowParams : {extraparam:{ "param1":"1","param2":"2"}}
}
);
i create grid with data by javascript. when i click edit button at first time on any row and click update button. values in first row are null and then i edit other row i can't update or cancel, both button are not working.
when i refresh then click edit and then click cancel that row has removed i don't know why?
What's happend? How to fix?
Data
var detail = new Array();
for (var i = 1; i < 6; i++) {
detail.push({
Score: i,
Condition: 0,
ValueStart: 0,
ValueEnd: 0,
});
}
Grid
for (var i = 0; i < 3; i++) {
$("#GridScoreRangeContent").append("<div id='scoreRangeGrid_"+i+"'></div>");
$("#scoreRangeGrid_"+i).kendoGrid({
dataSource: {
data: detail,
batch: true,
schema: {
model: {
fields: {
Score: { editable: false },
Condition: { defaultValue: { Value: 1, Text: "Less than" }, validation: { required: true } },
ValueStart: { type: "number", validation: { required: true, min: 1 } },
ValueEnd: { type: "number", validation: { required: true, min: 1 } },
}
}
}
},
columns: [{ field: "Score", title: "Score" }},
{ field: "Condition", title: "Condition", editor: ScoreRangeDropDownList, template: "#=Condition#" },
{ field: "ValueStart", title: "Start" },
{ field: "ValueEnd", title: "End" },
{ command: ["edit", "destroy"], title: " ", width: "180px" }
],
editable: "inline"
});
}
Load Dropdownlist
function ScoreRangeDropDownList(container, options) {
$.ajax({
url: GetUrl("Admin/Appr/LoadDropdownlist"),
type: 'post',
dataType: 'json',
contentType: 'application/json',
traditional: true,
cache: false,
success: function (data) {
$('<input required data-text-field="Text" data-value-field="Value" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
autoBind: false,
dataSource: data,
dataTextField: "Text",
dataValueField: "Value",
});
}
});
}
Kendo seems to rely on a model ID when saving/updating. So in your dataSource, you have to specify an id:
model: {
id: "Id",
fields: {
Id: { type: "number" },
Score: { editable: false },
Condition: { defaultValue: { Value: 1, Text: "Less than" }, validation: { required: true } },
ValueStart: { type: "number", validation: { required: true, min: 1 } },
ValueEnd: { type: "number", validation: { required: true, min: 1 } },
}
}
What dmathisen is suggesting is definitely important but in addition it is important that the <input/> you create has a name attribute equal to the name of the column. You can use the value of options.field again as in the code from the Kendo Demos page example:
// create an input element
var input = $("<input/>");
// set its 'name' to the field to which the column is bound
input.attr("name", options.field);
// append it to the container
input.appendTo(container);
// initialize a Kendo UI Widget
input.kendoDropDownList({
.
.
I want to know if anyone has seen this. I have a kendo grid and in the save event, I want to do some validation. Basically to make sure that the new values difference between the old is less than or equal to the balance.
So if it is greater than the balance, I trigger an alert and preventDefault. However displaying an alert causes the page to reload in FireFox.
Here is my grid:
$("#gridOpenInvoices").kendoGrid({
autoBind: false,
dataSource: openInvoicesData,
scrollable: true,
sortable: false,
navigatable: true,
toolbar: [{name:"save",
text:strings.ApplyUpdates},
{name: "SplitPayment",
text: strings.SplitPayment},
{name: "PaidOut",
text: strings.PaidOut},
{name: "CreateCredit",
text: strings.CreditBalance},
{name: "UndoAllocation",
text: strings.UndoAllocation}],
columns: [
{
field: "CustomerName",
title: strings.AccountName,
hidden: true
},
{
field: "OpenTransactionId",
title: strings.OpenTransaction,
width:90
},
{
field: "InvoiceNumber" ,
title: strings.InvoiceNumber,
width:65
},
{
field: "GrossSales",
title: strings.OriginalAmount,
width: 75,
format: "{0:c}",
decimals: 2,
min: 1,
value: 0
},
{
field: "Balance",
title: strings.TransBalance,
width: 75,
format: "{0:c}",
decimals: 2,
min: 1,
value: 0
},
{
field: "Date",
title: strings.Date,
width:75,
format: "{0:MM/dd/yy}"
},
{
field: "Age",
title: strings.Age,
width:55
},
{
field: "CheckNumber",
title: strings.CheckNumber,
width:85
},
{
title: strings.ApplyPayment,
width:75,
template: "<input class='k-chk-applied chkbox' type='checkbox' data-bind='source: IsApplied' name='IsApplied' #= IsApplied ? 'checked' : ''#/>",
attributes:{"class":"tdIsApplied"}
},
{
field:"AppliedAmount",
title: strings.AppliedAmount,
format: "{0:c}",
width: 95,
attributes: {"class" : "tdAppliedAmount"}
}],
save: function(e) {
var model = e.model;
if (e.values.AppliedAmount != null) {
var remainingBalance = context.getRemainingBalance();
var difference = e.values.AppliedAmount - model.AppliedAmount;
if (remainingBalance >= difference) {
var balanceCopy = model.BalanceCopy;
model.Balance = model.GrossSales - e.values.AppliedAmount;
model.BalanceCopy = model.GrossSales - e.values.AppliedAmount;
if (model.Balance == 0 && model.IsUncollected) {
model.IsUncollected = false;
context.UpdateBalance(balanceCopy, 0, true);
}
context.UpdateBalance(model.AppliedAmount, e.values.AppliedAmount, true);
this.refresh();
context.showButtons();
}
else {
alert("The applied amount exceeds the remaining balance");
e.preventDefault();
}
}
}, editable:"incell"});
This seems to be only happening when you edit the applied amount and hit enter to commit. Any idea of why this is happening?
The solution is fairly simple: Do not use an alert.
I do have the same problem in some events in kendoUI Widgets.
If you need to display something to the user, use kendoWindow with it's modal property set to true.
Alerts should only be used for debugging purposes, like console.log.