kendu ui grid after server update cells stay marked as "dirty" - kendo-ui

i based this code on kendu grid ui code demo.
when ever i add a new record, it gets sent to the server side (c# handler)
and from there i convert json to object.. and so on.
the operation is successful and the request that kendu made is done with status code 200.
but for some reason the cells that were changed are still marked as "dirty" .
as a result of this any new row is sent with the first attempt since it thinks it needs to be sent again. here is my code:
jQuery("#getallDataBTN").click(
function () {
$("#grid").kendoGrid({
dataSource: {
transport: {
read: {
url: "/WallEHandler.ashx?command=getallPermissions",
dataType: "json"
},
create: {
url: "/WallEHandler.ashx?command=addPermission",
dataType: "json",
type:"post"
},
update: {
// url: "/WallEHandler.ashx?command=editPermission",
// dataType: "jsonp"
},
parameterMap: function (options, operation) {
if (operation !== "read" && options.models) {
return { models: kendo.stringify(options.models) };
}
}
},
schema: {
model: {
id:"Method",
fields: {
Method: { type: "string" , validation: { required: true }},
ServiceType: { type: "string" ,validation: { required: true }},
Role: { type: "string" ,validation: { required: true }},
Permission: { type: "string" ,validation: { required: true }},
ExtendedData: { type: "string" }
}
}
},
pageSize: 100,
batch: true,
},
height:850,
scrollable: true,
sortable: true,
filterable: true,
pageable: {
input: true,
numeric: false
},
columns: [
"Method",
"ServiceType",
"Role",
{ field: "Permission", editor: categoryDropDownEditor },
"ExtendedData"
],
navigatable: true,
toolbar: ["create", "save", "cancel"],
editable: true
//selectable: "row",
//save: function(e)
// {
//alert("Save");
// }
});
}
);
is there maybe somthing i need to return from the server to tell the grid that it was successful?
thanks for any help

i figured it out, it seems that the response of a successful request must return the same object as sent. (must be some sort of inside validation by kendu).
c#:
Response.Write(context.Request.Form["models"]);

Related

Kendo Grid Serverside Paging, Incorrect Parameter Map values

I'm trying to use the Dynamic Linq Helper libraries from Kendo. The parameter map function on the grid does not have the correct parameters to send to the controller.
The parameterMap options have:
{"take":10,"skip":0,"page":1,"pageSize":10}
but according to the example, it should have take, skip, sort, filter, which is not in the parameterMap function or getting passed to the server.
I'm following the example here
http://www.telerik.com/blogs/kendo-ui-open-sources-dynamic-linq-helpers
And also looked other examples, my grid is set up the same as the others.
The only difference being, this is a Web API single page app, not MVC. However, this shouldn't make a difference in what the Grid class is passing to it's parameterMap function.
What is going on here?
$("#grid").kendoGrid({
dataSource: {
transport: {
read: {
url: "http://localhost/biahost/query/projectStatuses",
dataType: "application/json",
type: "POST",
contentType: "application/json; charset=utf-8"
//data:{}
},
parameterMap: function (options) {
debugger;
//options only contain {"take":10,"skip":0,"page":1,"pageSize":10}
return kendo.stringify(options);
}
},
schema: {
data: "Data",
total: "Total",
model: {
fields: {
NAME: { type: "string" },
CODE: { type: "string" },
STATUS: { type: "string" },
COMMENTS: { type: "string" },
INSERTS: { type: "string" },
UPDATES: { type: "string" },
TOTAL_UPDATES: { type: "string" },
LAST_ACTION_DATE: { type: "string" }
//UnitId: { type: "string" },
//UnitName: { type: "string" }
}
}
},
pageSize: 10,
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
filterable: true,
sortable: true,
pageable: true,
columns: projectStatusColumns
});
var projectStatusColumns = [
{
field: 'NAME',
label: 'Res name',
hidden: true,
},
{
field: 'CODE',
label: 'Code'
},
{
field: 'STATUS',
label: 'Status'
},
{
field: 'COMMENTS',
label: 'Comments'
}
,
{
field: 'INSERTS',
label: 'Inserts'
}
,
{
field: 'UPDATES',
label: 'Updates'
}
,
{
field: 'TOTAL_UPDATES',
label: 'Total Updates'
}
,
{
field: 'LAST_ACTION_DATE',
label: 'Last Action Date'
}
];
had the same problem so i looked it up and here i am. You just need to return "options" which contains the parameter map as it is, if you stringify it will become a json object which cannot be defined in a url.
Hope i'm not too late!

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 Grid Will not populate with server side data

I cannot get Kendo Grid to populate from server side data.
I have a grid builder function as as follows:
var build = function (carrier, date) {
var urlBase = 'my base url';
var datasource = new kendo.data.DataSource({
pageSize: 20,
serverPaging: true,
serverFiltering: true,
serverSorting: true,
schema: {
model: {
id: 'Id',
fields: {
StatementDate: { type: "string", editable: false },
CobDate: { type: "string", editable: false },
//lots more fields
Status: { type: "string", editable: false },
Matched: { type: "boolean", editable: true }
}
}
},
transport: {
read: function (options) {
var address = urlBase + '/' + carrier + '/' + date;
$.ajax({
url: address,
type: "POST",
data: JSON.stringify(options.data),
contentType: "application/json",
success: function (result) {
options.success(result);
},
error: function (result) {
options.error(result);
}
});
},
//update function omitted
parameterMap: function (data, operation) {
if (operation == "read") {
return JSON.stringify(data)
}
},
change: function (e) {
var data = this.data();
console.log(data.length); // displays "77"
}
}
});
return datasource;
};
return {
build: build
}
Grid Definition
elem.kendoGrid({
columns: [
{ field: "StatementDate", title: "State Date", width: 125 },
{ field: "CobDate", title: "COB Date", width: 100 },
//lots more fields
{ command: ["edit"], title: " ", width: "85px"}],
resizable: true,
sortable: true,
editable: "inline",
columnMenu: true,
filterable: true,
reorderable: true,
pageable: true,
selectable: "multiple",
change: this.onSelectedRecordChanged,
toolbar: kendo.template($('#' + templateName).html()),
scrollable: {
virtual: true
},
height: 800
});
I trigger the update via a button click. When I look at the response I see the data. Looks good but the grid will not show the data. It has previously worked fine when data was completely client side.
If I break point on the AJAX call back. I see the correct results.
The grid is bound with data bind. The datasource is a property on a viewmodel.
<div id="grid" data-bind="source: dataSource"></div>
At the start of the app. I create view model
var viewModel= kendo.observable(new GridViewModel(...
and bind
kendo.bind($('#grid'), viewModel);
If I look at the datasource attached to the grid, I see data for the page as expected
This has previously worked fine when data was client side.
I have tried using read() on datasource, and refresh() method on grid. Neither seems to work.
Example response content from server
{"Data":[{"Id": //lots more fields, 20 records],"Total":90375,"AggregateResults":null,"Errors":null}
Any help very much appreciated.
I found the cause in datasource schema missing
{ data: 'Data', total: 'Total' }

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