Kendo UI Grid Repeat the request to the server error - kendo-ui

I do not know how to describe the specifics, you can see an error in this video:
http://www.youtube.com/watch?v=D6NPd-j2erg&feature=youtu.be
And this is the code I use:
$(document).ready(function () {
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "/customer/get",
dataType: "json",
type: "POST"
},
update: {
url: "/customer/edit",
dataType: "json",
type: "POST"
},
destroy: {
url: "/customer/delete/",
dataType: "json",
type: "POST"
},
create: {
url: "/customer/add",
dataType: "json",
type: "POST"
}
},
batch: false,
pageSize: 20,
serverPaging: true,
serverFiltering: true,
serverSorting: true,
schema: {
data: "Data",
total: "Total",
model: {
id: "CustomerId",
fields: {
CustomerId: { editable: false, nullable: true },
Name: { validation: { required: true } },
Code: { type: "string", editable: false }
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
height: 430,
filterable: true,
sortable: true,
pageable: {
refresh: true,
pageSizes: [10, 20, 30],
buttonCount: 10
},
toolbar: ["create"],
columns: [
{ field: "Name", title: "Name" },
{ field: "Code", title: "CODE", width: "100px" },
{ command: ["edit", "destroy"], title: " ", width: "200px" }],
editable: "popup"
});
});
Do I have made any mistake?
I have added the Kendo Ui library following:
<script src="/Scripts/kendo/2013.1.319/jquery.min.js"></script>
<script src="/Scripts/kendo/2013.1.319/kendo.all.min.js"></script>
<script src="/Scripts/kendo/2013.1.319/kendo.aspnetmvc.min.js"></script>
<script src="/Scripts/kendo.modernizr.custom.js"></script>

Indeed there is a breaking change with the new version of jQuery which affects the Kendo Q1 2013 version 2013.1.319
http://jquery.com/upgrade-guide/1.9/#jquery-ajax-returning-a-json-result-of-an-empty-string
Since the empty result returned from the server in case everything is executed properly on the server side - the error event is rised because the empty result is not valid json.
To work-around this I would suggest you to return empty array from the server.
For the ASP.NET users which use the Extensions they can use:
return Json(new object[0].ToDataSourceResult(request,ModelState));
Basically a valid result from the server after update/delete operations should be similar to this one:
{"Data":[],"Total":0,"AggregateResults":null,"Errors":null}
This will be resolved internally by the ToDataSourceResult extension for ASP.NET MVC users with the next internal build (we will most likely add it tomorrow) and it will also be added to the breaking changes/troubleshooting sections of the documentation.

Related

Kendo Datasource updating remote data

What am I doing wrong? I have a kendo datasource setup as such
var sharedDataSource = new kendo.data.DataSource({
transport: {
read:
{
url: "/Home/ReadStarkArea",
dataType: "json"
},
update:
{
url: "/Home/UpdateStarkArea",
dataType: "json"
},
destroy:
{
url: "/Home/DeleteStarkArea/",
dataType: "json"
},
schema: {
model: {
id: "Id",
fields: {
id: { type: "number", editable: false },
ZipCode: { type: "string" },
CarrierRoute: { type: "string" }
}
}
}
}
});
$("#grid").kendoGrid({
dataSource: sharedDataSource,
autoBind: true,
selectable: true,
toolbar: ["create"],
columns: [
{ field: "ZipCode", title: "Zipcode" },
{ field: "CarrierRoute", title: "Carrier Route" },
{ command: ["edit", "destroy"], title: " " }],
editable: "popup"
});
the URL's defined in the transport all point to methods in my controller. The read works fine but neither the update or destroy call the their methods. Furthermore, once I get the update and delete calling the correct methods, how do I know what data needs updating? does the transport pass a param with the changes?

Kendo ui odata request callback not supported

I am working on a odata grid with Kendo UI.
The problem is that the ajax request keeps containing a callback parameter. Which causes this error: Callback parameter is not supported. When I do the request manually without the callback, my odata service works perfect.
Someone an idea how to fix this?
$("#grid").kendoGrid({
dataSource: new kendo.data.DataSource({
type:"odata",
serverPaging: true,
serverFiltering: true,
serverSorting: true,
transport: {
contentType: "application/json; charset=utf-8",
type: "GET",
read: "/odata/FestivalSignUps?$inlinecount=allpages&$expand=PrefferedTasks/Task,AvailableDays,ApplicationUser",
dataType: "json",
parameterMap: function (options, type) {
var paramMap = kendo.data.transports.odata.parameterMap(options);
delete paramMap.$format; // <-- remove format parameter.
return paramMap;
}
},
pageSize: 10,
schema: {
data: function (data) {
return data["value"];
},
total: function (data) {
return data["odata.count"];
},
}
}),
filterable:true,
sortable: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [
{ field: "ApplicationUser.Email", width: 90, title: "Email" },
{ field: "ApplicationUser.FirstName", width: 90, title: "Voornaam" },
{ field: "ApplicationUser.LastName", width: 90, title: "Achternaam" },
{ field: "PrefferedTasks", width: 90, title: "Taken",
template: "#= formatTasks(data) #"},
{ field: "Beschikbaar", width: 90, title: "Taken" }
]
});
Update
This code solved the problem:
$("#grid").kendoGrid({
dataSource: new kendo.data.DataSource({
type: 'odata',
transport: {
read: {
url: "/odata/FestivalSignUps?$expand=PrefferedTasks/Task,AvailableDays,ApplicationUser",
dataType: "json"
},
},
schema: {
data: function (data) {
return data["value"];
},
total: function (data) {
return data["odata.count"];
},
},
pageSize: 20,
serverPaging: true,
serverFiltering: true,
serverSorting: true
}),
filterable:true,
sortable: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [
{ field: "ApplicationUser.Email", width: 90, title: "Email" },
{ field: "ApplicationUser.FirstName", width: 90, title: "Voornaam" },
{ field: "ApplicationUser.LastName", width: 90, title: "Achternaam" },
{ field: "PrefferedTasks", width: 90, title: "Taken",
template: "#= formatTasks(data) #"},
{
field: "AvailableDays", width: 90, title: "Beschikbaar",
template: "#= formatDays(data) #"
},
]
});
I cover this issue and some others in a blog post that I wrote: Server-Side Filtering Using KendoUI With MVC4 WebAPI and OData.
If you are querying your own data, and don't need to do a cross-domain request, we can just not use jsonp. To do this, we just tell Kendo the dataType for the read operation is "json".
var dataSource = new kendo.data.DataSource({
type: 'odata', // <-- Include OData style params on query string.
transport: {
read: {
url: "/api/Albums",
dataType: "json"; // <-- The default was "jsonp".
}
}
});

Binding Odata to a KendoUI datasource for use with Kendo Grid

I am trying to bind a kendo datasource to a odata source for the first time without to much luck. I found an example product that allows versioning of the odata controller which looks pretty useful. The odata output looks something like
{
"d": {
"__metadata": {
"id": "http://localhost:11232/versionbyroute/v1/Products(7)",
"uri": "http://localhost:11232/versionbyroute/v1/Products(7)",
"type": "ODataVersioningSample.V1.ViewModels.Product",
"actions": {
"http://localhost:11232/versionbyroute/v1/$metadata#Container.Product": [
{
"title": "Product",
"target": "http://localhost:11232/versionbyroute/v1/Products(7)/Product"
}
]
}
},
"ID": 7,
"Name": "MS-DOS 3.0 (OEM)",
"ReleaseDate": null,
"SupportedUntil": null
}
}
Now with Kendo I am not quite sure how I am meant to gain access to ID & Name so far
var datasource = new kendo.data.DataSource({
type: "odata",
transport: {
read: {
beforeSend: function (req) {
req.setRequestHeader('Accept', 'application/json;odata=verbose');
},
url: "http://localhost:11232/versionbyroute/v1/Products(7)",
}
},
schema: {
model: {
fields: {
Name: { type: "string" }
}
}
},
pageSize: 20,
serverPaging: true,
serverFiltering: true,
serverSorting: true
});
$("#grid").kendoGrid({
height: 430,
sortable: true,
dataSource: datasource,
columns: [{ field: 'Name', title: 'Name' }]
});
I feel I am close but I think I am doing something wrong with the way I setup the schema? Can anyone point me in the right direction.
EDIT
If anyone else is in the same boat
$("#grid").kendoGrid({
height: 430,
sortable: true,
dataSource: {
type: "odata",
transport: {
read: {
beforeSend: function (req) {
req.setRequestHeader('Accept', 'application/json;odata=verbose');
},
url: "http://localhost:11232/versionbyroute/v1/Products",
dataType: "json"
}
},
pageSize: 20,
serverPaging: true,
serverFiltering: true,
serverSorting: true,
},
filterable: true,
pageable: true,
columns: [{ field: 'Name', title: 'Name' }]
});
Answered by the author:
If anyone else is in the same boat
$("#grid").kendoGrid({
height: 430,
sortable: true,
dataSource: {
type: "odata",
transport: {
read: {
beforeSend: function (req) {
req.setRequestHeader('Accept', 'application/json;odata=verbose');
},
url: "http://localhost:11232/versionbyroute/v1/Products",
dataType: "json"
}
},
pageSize: 20,
serverPaging: true,
serverFiltering: true,
serverSorting: true,
},
filterable: true,
pageable: true,
columns: [{ field: 'Name', title: 'Name' }]
});

Kendo UI DataSource not triggering transport.destroy

I am using Kendo UI with ASP.NET Web API. There is a ProjectsController that has all the necessary methods.
My issue is that when I click on Delete button, Kendo UI grid will raise remove() event, but DataSource never invokes transport.destroy. Rather, it seems that tansport.create is being invoked. In transport.parameterMap I can see that the operation is create instead of destroy.
Here is a sample JavaScript code:
$(document).ready(function () {
var apiUrl = '/api/projects/';
var dataType = 'json';
var dataSource = new kendo.data.DataSource({
batch: true,
autoSync: false,
transport: {
read: {
url: apiUrl,
dataType: dataType,
type: "GET"
},
update: {
url: apiUrl,
dataType: dataType,
type: "PUT"
},
destroy: {
url: apiUrl,
type: "DELETE"
},
create: {
url: apiUrl,
contentType: "application/json;charset=utf-8",
dataType: dataType,
type: "POST"
},
parameterMap: function (data, operation) {
console.log("Operation: " + operation);
if (operation === "create" && data.models) {
for (var i in data.models) {
var model = data.models[i];
if (model.ProjectId === 0) {
return kendo.stringify(model);
}
}
} else if (operation === "destroy") {
console.log("Data.Models: " + data.models);
console.log("Data.id: " + data.ProjectId);
return { id: data.ProjectId };
}
return data;
}
},
schema: {
id: "ProjectId",
model: {
fields: {
ProjectId: { type: "number", editable: false, nullable: false, defaultValue: 0 },
ProjectName: { type: "string", validation: { required: true } },
Status: { type: "string", validation: { required: true } },
IsActive: { type: "boolean" }
}
}
},
pageSize: 10,
serverPaging: false,
serverFiltering: false,
serverSorting: false
});
$("#projectsGrid").kendoGrid({
dataSource: dataSource,
groupable: false,
sortable: true,
pageable: {
refresh: true,
pageSizes: true
},
pageSize: 10,
toolbar: ["create"],
editable: "popup",
columns: [
{ field: "ProjectId", width: 30, title: "ID" },
{ field: "ProjectName", width: 180, title: "Project" },
{ field: "Status", width: 90, title: "Status" },
{ field: "IsActive", width: 40, title: "Is Active", type: "boolean", template: '<input type="checkbox" #if (IsActive) {# checked="checked" #}# disabled="disabled" />' },
{ command: ["edit", "destroy"], title: "&nbsp", width: "80px" }
],
remove: function (e) {
console.log("Delete button clicked.");
console.log("Project ID: " + e.model.ProjectId);
//dataSource.remove(e.model);
//dataSource.sync();
}
});
});
Web API works fine when requests are issued via Fiddler, but Kendo UI Grid shows:
POST http://localhost:port/api/Projects
when it should be DELETE.
Thanks everyone in advance!
On your datasource, you have the batch flag set to true, this means the datasource will make the call only after you tell it to, e.g calling sync().
http://docs.kendoui.com/api/framework/datasource#configuration-batch
As well as
Make sure you have defined Id in the model, as OnaBai explained here Why does the KendoUI Grid Transport Create event gets raised multiple times, and even when the action is Update? , your id is outside the model, should be in :
model: {
id: "ProductID",
fields: {
ProductID: { editable: false, nullable: true },
}
}
if someone has defined the id in model as answered in above ,but dataSource not triggering transport.destroy yet ,below configuration could be helpful:
editable: {
..
mode: "inline", //or "popup
...
}
//or
editable: "inline" //or "popup"
http://www.telerik.com/forums/transport-destroy-of-grid-editor-is-not-working

Kendoui grid, datasource and restful service

Q1: I'm trying to get the kendoui grid bound to a datasource talking to a restful service, (using servicestack). All is working ok except when I call PUT and the rest service sends back the persisted poco object I get a strange javascript error and you do not get to the success method of the datasource.
Error is
Uncaught SyntaxError: Unexpected number kendo.all.min.js:9
extend.setter kendo.all.min.js:9
o.extend._set kendo.all.min.js:9
T.extend.accept kendo.all.min.js:9
o.extend._accept kendo.all.min.js:9
(anonymous function) kendo.all.min.js:9
n jquery.min.js:2
o.fireWith jquery.min.js:2
o.fire jquery.min.js:2
g.(anonymous function).call.c.success kendo.all.min.js:9
n jquery.min.js:2
o.fireWith jquery.min.js:2
w jquery.min.js:4
d
The datasource/grid configuration looks like
$(document).ready(function () {
var crudServiceBaseUrl = "/api/configuration/databaseconnections";
$("#grid").kendoGrid({
dataSource: {
type: "json",
transport: {
read: {
url: crudServiceBaseUrl,
dataType: "json"
},
update: {
url: function (db) {
console.log(db);
return crudServiceBaseUrl + "/" + db.Id;
},
type: "PUT",
success: function (result) {
console.log(result);
}
//dataType: "json"
},
destroy: {
url: function (db) {
return crudServiceBaseUrl + "/" + db.Id;
},
type: "DELETE",
//dataType: "json"
},
create: {
url: function (db) {
return crudServiceBaseUrl + "/" + db.Id;
},
type: "PUT",
//dataType: "json"
},
},
schema: {
model: {
id: "Id",
fields: {
Id: { type: "string" },
ConnectionString: { type: "string" },
DatabaseType: { type: "string" },
ProfileConnection: { type: "string" },
}
}
},
pageSize: 10,
serverPaging: false,
serverFiltering: false,
serverSorting: false,
model: {
id: "Id",
fields: {
ConnectionString: { editable: true },
DatabaseType: { editable: false, nullable: false, validation: { required: true } },
ProfileConnection: { editable: false, nullable: false, validation: { required: true } },
}
}
},
height: 250,
filterable: true,
sortable: true,
pageable: true,
reorderable: true,
resizable: true,
toolbar: ["create"],
columns: [{
field: "Id",
filterable: false,
width: 150,
},
{
field: "ConnectionString",
title: "Connection String",
filterable: false,
}, {
field: "DatabaseType",
title: "Type",
width: 100
},
{
field: "ProfileConnection",
title: "Profile",
width: 100
},
{ command: ["edit", "destroy"], title: " ", width: "210px" }
],
editable: "popup"
});
});
Q2: Anyone have an idea or a sample of the kendoui datasource working with a crud rest service ?
Q1: As you mentioned in your comment you found the problem.( ";" in connection string)
Q2: But for second question, download and check this sample code (Binding grid to a Web ApiController) it may help you or others refer here.

Resources