Kendo Grid handling create/delete errors with popup editor - kendo-ui

I have a kendo grid that does a create/delete, both of them ending with errors.
I would like to:.
When having an error on delete to prevent the row deleting from the grid (that is the default behavior when having errors)
When having a create error to prevent the popup editor to close
Please see this fiddle:
http://jsfiddle.net/andreigavrila/p49eV/2/
var data = [
{ Id: 1, Name: "Decision 1", Code: 1 },
{ Id: 2, Name: "Decision 2", Code: 2 },
{ Id: 3, Name: "Decision 3", Code: 3 }
];
$("#grid").kendoGrid({
dataSource: {
error: function (a) {
console.log('error');
$('#grid').data("kendoGrid").cancelChanges();
//$('#grid').data("kendoGrid").one("dataBinding", function (e) {
//e.preventDefault(); // cancel grid rebind
//});
},
transport: {
read: function(e) {
e.success({data: data});
},
create: function(e) {
console.log('creating');
e.error();
},
destroy: function(e) {
console.log('deleting')
e.error();
}
},
schema: {
data: "data",
model: {
id: "Id",
fields: {
Id: { type: "number" },
Code: { type: "number" },
Name: { type: "string" }
}
}
}
},
toolbar: ["create"],
columns: [
{ field: "Code", title: "Code", },
{ field: "Name", title: "Name" },
{ command: ["destroy"], title: " " }],
editable: {
mode: "popup"
}
});
The second point works by default (so having an error on create does not close the popup)
The first point works by adding the error function, but that breaks the popup (it closes on error).
So I can have either one of my , but not both in the same time. I am kind of stuck.
I also saw this 2 questions on kendo forums:
delete error
server validation
The second link said "to prevent the Grid from closing you need to prevent the next dataBinding event." but i can't make that work.
Thank you for your help.
Andrei

I finally managed to push this to Kendo forums:
Tthe official solution to that:
http://www.kendoui.com/forums/kendo-ui-web/grid/kendo-grid-handling-create-delete-errors-with-popup-editor.aspx
"I suggest you to use an if condition in the error event handler to
determine which of the two workarounds should be executed. In this
case the server should provide information about type of the error
that occurred. You can retrieve the error status from error event
arguments."

Related

How to use more than one button in one field in Kendo Treelist?

I want to use 2 or more buttons in one field like Kendo Grid by using custom command in TreeList but I could not do that. Does anyone have a solution?
You just add an array of buttons to the column command property:
$("#treeList").kendoTreeList({
columns: [
{ field: "name" },
{
command: [
{
name: "Cust1",
text: "Custom1",
click: function(e) {
alert("Custom1");
}
},
{
name: "Cust2",
text: "Custom2",
click: function(e) {
alert("Custom2");
}
},
]
}
],
editable: true,
dataSource: dataSource
});
DEMO

shieldUI grid filter / sort persistence on grid refresh

Is it possible to persist grid sort/filter/selection on grid.refresh() in some smart optimized way? I need to refresh grid on window resize event to adjust to a new window size. I guess refresh internally destroys and recreates grid, not accounting for possible active sort/filter/selection. Because grid can contain a lot of data (virtual scrolling), I would like to a avoid unnecessary db querying, rendering and sorting. I guess I am looking for a refresh which will refresh on existing data.
Seams like they just implemented it - here is the example.
Maybe to be included in the next release.
Here is the code in the example that does this:
jQuery(function ($) {
$("#grid").shieldGrid({
dataSource: {
data: gridData,
schema: {
fields: {
id: { type: Number },
name: { type: String },
company: { type: String },
phone: { type: String },
age: { type: Number },
gender: { type: String }
}
},
filter: {
// create the initial filter in that form
and: [
{ path: "name", filter: "con", value: "John" }
]
}
},
filtering: {
enabled: true
},
paging: true,
columns: [
{ field: "id", width: "250px", title: "ID" },
{ field: "name", title: "Person Name", width: "250px" },
{ field: "company", title: "Company" },
{ field: "phone", title: "Phone", width: "250px" },
{ field: "age", title: "Age" }
]
});
});
I found the solution in refresh method it self. It accepts options objects where one can provide current data source options to persist. Example to persist sort and/or filter:
var options = {
dataSource: $("#grid").swidget().dataSource
}
$("#grid").swidget().refresh(options);
Please stand me correct if I am wrong here. For selections I guess one can retrieve selected indices and reselect after calling refresh.
EDIT: filter and sort are preserved, but filter row resets (loses all active input values). Could this be a bug? How to keep values in filter row?

Autoupdate kendo grid cell after enter another cell

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.

Kendo Grid Inline Edit New Row Disappears After Add

I have a grid with Angular and remote data binding. Its configuration is like this:
$scope.myGridOptions = {
dataSource: new kendo.data.DataSource({
type: "json",
transport: {
create: function(operation) {
//calls an Angular service to add
DataService.add(operation).success(function(data) {
operation.success(data);
});
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return { models: kendo.stringify(options.models) };
}
}
},
pageSize: 10,
schema: {
model: {
id: "Id",
fields: {
...
}
}),
toolbar: [ { name: "create", text: "Add New Book" } ],
autobind: false,
groupable: false,
editable: {
mode: "inline"
},
columns: [
{
field: "Name",
title: "Name"
},
{
field: "Description",
title: "Description"
},
{
command: [
{ name: "edit", title: "Action" }
]
}
]
};
When I click on the "Add New Book" button, the first row in the grid turns into a blank row and allows me to enter data. When finish entering, I click on "Update" to save the data and the first row turns into a regular, read-only row and I verify the new row has been added to the remote database. So far so good. However, when I click on the "Edit" button on the new row followed by clicking on the "Cancel" button my new row disappears until I refresh the page.
What am I missing?
In order for kendo dataSource to sync data after save, you need to return the newly created row back to the dataSource from the server. This is valid for update also.

Kendo UI validator fails in grid (message doesn't disappear)

I have to validate some data in kendoUI grid widget.
Seems there is a bug in validator component.
Steps to reproduce:
0. Open and run http://jsfiddle.net/Upw9j/2/
here's the code (some part is missing here due to SO limitations):
$(document).ready(function () {
var crudServiceBaseUrl = "http://demos.telerik.com/kendo-ui/service",
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl + "/Products",
dataType: "jsonp"
},
update: {
url: crudServiceBaseUrl + "/Products/Update",
dataType: "jsonp"
},
destroy: {
url: crudServiceBaseUrl + "/Products/Destroy",
dataType: "jsonp"
},
create: {
url: crudServiceBaseUrl + "/Products/Create",
dataType: "jsonp"
},
parameterMap: function (options, operation) {
if (operation !== "read" && options.models) {
return { models: kendo.stringify(options.models) };
}
}
},
batch: true,
pageSize: 20,
schema: {
model: {
id: "ProductID",
fields: {
ProductID: { editable: false, nullable: true },
ProductName: {
validation: {
required: true,
productnamevalidation: function (input) {
if (input.is("[name='ProductName']") && input.val() != "") {
input.attr("data-productnamevalidation-msg", "/^\d{1,}$/");
return /^\d{1,}$/.test(input.val());
}
return true;
}
}
},
UnitPrice: { type: "number", validation: { required: true, min: 1} },
Discontinued: { type: "boolean" },
UnitsInStock: { type: "number", validation: { min: 0, required: true} }
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
pageable: true,
height: 430,
toolbar: ["create"],
columns: [
"ProductName",
{ field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "100px" },
{ field: "UnitsInStock", title: "Units In Stock", width: "100px" },
{ field: "Discontinued", width: "100px" },
{ command: ["edit", "destroy"], title: " ", width: "172px"}],
editable: "inline"
});
});
Click Edit at any row
Set the cursor on ProductName field, input "2s" (without quotes), press Tab
The tooltip will appear, saying "/^d{1,}$/" (it's a RE, which is matched against field value)
Press Shift+Tab, input "2" (w/o quotes), press Tab, message will disappear.
Repeat steps 3-4 several times. After 2-3 iterations you'll find that message doesn't disappear when field contains valid value. "Update" button behaves correctly.
Is it really a bug or am I doing something wrong? How to work it around?
Yes, this is a bug. I don't know where the official bug tracking page is, but this is a forum thread that details more precisely what's happening: Kendo UI Error on Grid Custom Validation
Basically, when the custom validation fails the input, the datasource model is not updated. So when you re-enter the same (and correct input), it checks against the last correct value, and because it's the same, the validation doesn't fire. In your case, you can verify that if you change the numbers everytime, it still works (2s -> 2 -> 2s -> 3 -> 2s -> 4 etc... this works)
You can also reproduce the custom validation bug right on their demo page. Change Chai to chai to Chai again and the message will still show.
Telerik hasn't fixed it yet and I'm not sure of any easy fixes. You can try to update the data model yourself in the validator function, but this is potentially bad as it gives the user the ability to save bad input into your back end.
Personally (and unfortunately), I just avoided custom validation altogether and ended up using server side validation.

Resources