On further analysis i found that it is looking for this file, which is not found 404(Also this error is not visible in console, the way i got to it is by putting a break point on mouse click event ).
GET http://localhost:1205/Scripts/kendo/src/js/kendo.grid.js 404 (Not Found)
I used Nuget to install kendo ui and it creates the following structure. so it is not going to find that file as that hierarchy does not exist.
Scripts
Kendo
2013.3.1119
cultures
all the javascript files
==================================================================================================================
I am using WebAPI and KendoUI Grid, the Mark is below.
When i click Edit button, it bring the row into EditMode, but when i press the done "Update" button nothing happens, seems like event is not firing.
No WebAPI are made, i tried debugging in Google chrome, but seems like Update event is not firing at all.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<!-- CDN-based stylesheet references for Kendo UI Web -->
<link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.rtl.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.silver.min.css" rel="stylesheet" />
<!-- CDN-based script reference for jQuery -->
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<!-- CDN-based script reference for Kendo UI -->
<script src="http://cdn.kendostatic.com/2013.3.1119/js/kendo.all.min.js"></script>
<script>
$(document).ready(function () {
var orgModel = {
id: "OrgID_PK",
fields: {
OrgID_PK: {
editable: false,
type: "number"
},
OrgCode: {
type: "string",
nullable: false,
editable: true,
validation: {
required: {
message: "Org Code is required"
},
maxlength:10
}
},
OrgName: {
type: "string",
nullable: false,
editable: true,
validation: {
required: {
message:"Org Name is required"
},
maxlength:100
}
},
Description: {
type: "string",
validation: {
required: true,
minlength: 2,
maxlength: 160
}
},
EffectiveDate: {
type: "date",
validation: true
},
TerminationDate: {
type: "date",
validation: true
},
}
};
var ds = new kendo.data.DataSource({
serverFiltering: true, // <-- Do filtering server-side
serverPaging: true, // <-- Do paging server-side
serverSorting: true,
pageSize: 2,
batch :false,
type: 'odata', // <-- Include OData style params on query string.
transport: {
create: {
url: "http://localhost:3103/api/Org/putOrgs",
type: "PUT",
dataType: "json",
},
read: {
url: "http://localhost:3103/api/Org/GetOrgs", // <-- Get data from here
dataType: "json" // <-- The default was "jsonp"
},
update: {
//url: function (employee) {
// return "http://localhost:3103/api/Org/postOrg" + employee.Id
//},
url: "http://localhost:3103/api/Org/postOrg",
type: "POST",
dataType: "json",
},
destroy: {
url: function (employee) {
return "http://localhost:3103/api/Org/deleteOrg" + employee.Id
},
type: "DELETE",
dataType: "json",
},
parameterMap: function (options, type) {
//if (operation !== "read" && options.models) {
// return { models: kendo.stringify(options.models) };
//}
var paramMap = kendo.data.transports.odata.parameterMap(options);
//delete paramMap.$inlinecount; // <-- remove inlinecount parameter.
delete paramMap.$format; // <-- remove format parameter.
return paramMap;
}
}, //transport
schema: {
data: function (data) {
return data.Items; // <-- The result is just the data, it doesn't need to be unpacked.
},
total: function (data) {
return data.Count; // <-- The total items count is the data length, there is no .Count to unpack.
},
errors: "Errors",
error: function (e) {
alert(e.errors);
}
}, //schema
model: orgModel
});
$("#grid").kendoGrid({
dataSource: ds,
groupable: true,
sortable: true,
filterable:true,
editable: "inline",
toolbar: ["create"],
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [{
field: "OrgID_PK",
title: "OrgID ",
width: 140
}, {
field: "OrgCode",
title: "Code",
width: 190
}, {
field: "OrgName",
title: "Name"
}, {
field: "Description",
width: 110
},
{
field: "EffectiveDate",
width: 110
},
{
field: "TerminationDate",
width: 110
},
{ command: ["edit", "destroy"], title: " ", width: "172px" }
], // columns
edit: function (e) {
//$('#grid').data('kendoGrid').dataSource.read();
console.log('edit started ');
console.log(e);
//e.preventDefault();
},
cancel: function (e) {
//$('#grid').data('kendoGrid').dataSource.read();
//$('#grid').data('kendoGrid').dataSource.sync();
console.log('cancel happened');
console.log(e);
//e.preventDefault();
// $('#grid').data('kendoGrid').dataSource.read();
},
update: function (e) {
console.log('edit completed');
console.log(e);
},
change: function (e) {
console.log('a change happened not datasource one');
console.log(e);
},
saveChanges: function (e) {
console.log('a save is about to occurr');
console.log(e);
},
}); //grid
}); // document
</script>
</head>
<body>
<div id="example" class="k-content">
<div id="clientsDb">
<div id="grid" style="height: 380px"></div>
</div>
</div>
</body>
</html>
GET http://localhost:1205/Scripts/kendo/src/js/kendo.grid.js 404 (Not Found)
I used Nuget to install kendo ui and it creates the following structure. so it is not going to find that file as that hierarchy does not exist.
Scripts
Kendo
2013.3.1119
cultures
all the javascript files
==================================================================================================================
I am using WebAPI and KendoUI Grid, the Mark is below.
When i click Edit button, it bring the row into EditMode, but when i press the done "Update" button nothing happens, seems like event is not firing.
No WebAPI are made, i tried debugging in Google chrome, but seems like Update event is not firing at all.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<!-- CDN-based stylesheet references for Kendo UI Web -->
<link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.rtl.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.silver.min.css" rel="stylesheet" />
<!-- CDN-based script reference for jQuery -->
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<!-- CDN-based script reference for Kendo UI -->
<script src="http://cdn.kendostatic.com/2013.3.1119/js/kendo.all.min.js"></script>
<script>
$(document).ready(function () {
var orgModel = {
id: "OrgID_PK",
fields: {
OrgID_PK: {
editable: false,
type: "number"
},
OrgCode: {
type: "string",
nullable: false,
editable: true,
validation: {
required: {
message: "Org Code is required"
},
maxlength:10
}
},
OrgName: {
type: "string",
nullable: false,
editable: true,
validation: {
required: {
message:"Org Name is required"
},
maxlength:100
}
},
Description: {
type: "string",
validation: {
required: true,
minlength: 2,
maxlength: 160
}
},
EffectiveDate: {
type: "date",
validation: true
},
TerminationDate: {
type: "date",
validation: true
},
}
};
var ds = new kendo.data.DataSource({
serverFiltering: true, // <-- Do filtering server-side
serverPaging: true, // <-- Do paging server-side
serverSorting: true,
pageSize: 2,
batch :false,
type: 'odata', // <-- Include OData style params on query string.
transport: {
create: {
url: "http://localhost:3103/api/Org/putOrgs",
type: "PUT",
dataType: "json",
},
read: {
url: "http://localhost:3103/api/Org/GetOrgs", // <-- Get data from here
dataType: "json" // <-- The default was "jsonp"
},
update: {
//url: function (employee) {
// return "http://localhost:3103/api/Org/postOrg" + employee.Id
//},
url: "http://localhost:3103/api/Org/postOrg",
type: "POST",
dataType: "json",
},
destroy: {
url: function (employee) {
return "http://localhost:3103/api/Org/deleteOrg" + employee.Id
},
type: "DELETE",
dataType: "json",
},
parameterMap: function (options, type) {
//if (operation !== "read" && options.models) {
// return { models: kendo.stringify(options.models) };
//}
var paramMap = kendo.data.transports.odata.parameterMap(options);
//delete paramMap.$inlinecount; // <-- remove inlinecount parameter.
delete paramMap.$format; // <-- remove format parameter.
return paramMap;
}
}, //transport
schema: {
data: function (data) {
return data.Items; // <-- The result is just the data, it doesn't need to be unpacked.
},
total: function (data) {
return data.Count; // <-- The total items count is the data length, there is no .Count to unpack.
},
errors: "Errors",
error: function (e) {
alert(e.errors);
}
}, //schema
model: orgModel
});
$("#grid").kendoGrid({
dataSource: ds,
groupable: true,
sortable: true,
filterable:true,
editable: "inline",
toolbar: ["create"],
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [{
field: "OrgID_PK",
title: "OrgID ",
width: 140
}, {
field: "OrgCode",
title: "Code",
width: 190
}, {
field: "OrgName",
title: "Name"
}, {
field: "Description",
width: 110
},
{
field: "EffectiveDate",
width: 110
},
{
field: "TerminationDate",
width: 110
},
{ command: ["edit", "destroy"], title: " ", width: "172px" }
], // columns
edit: function (e) {
//$('#grid').data('kendoGrid').dataSource.read();
console.log('edit started ');
console.log(e);
//e.preventDefault();
},
cancel: function (e) {
//$('#grid').data('kendoGrid').dataSource.read();
//$('#grid').data('kendoGrid').dataSource.sync();
console.log('cancel happened');
console.log(e);
//e.preventDefault();
// $('#grid').data('kendoGrid').dataSource.read();
},
update: function (e) {
console.log('edit completed');
console.log(e);
},
change: function (e) {
console.log('a change happened not datasource one');
console.log(e);
},
saveChanges: function (e) {
console.log('a save is about to occurr');
console.log(e);
},
}); //grid
}); // document
</script>
</head>
<body>
<div id="example" class="k-content">
<div id="clientsDb">
<div id="grid" style="height: 380px"></div>
</div>
</div>
</body>
</html>
5 Answers, 1 is accepted
0
Accepted
Hello,
The Grid widget does not have 'update' event. The event that is supposed to fire after the user fills in the new entry data and presses update button is 'save'.
The update transport does not fire due to a syntax mistake - the model (which contains the ID) should be part of the schema object.
I am not sure where the problem with not found files comes from. The html page which you posted uses kendo.all.js, if that file is included you do not need to include kendo.grid.js.
Regards,
Alexander Valchev
Telerik
The Grid widget does not have 'update' event. The event that is supposed to fire after the user fills in the new entry data and presses update button is 'save'.
The update transport does not fire due to a syntax mistake - the model (which contains the ID) should be part of the schema object.
schema: { data: function (data) { return data.Items; }, total: function (data) { return data.Count; }, errors: "Errors", model: orgModel}, //schemaI am not sure where the problem with not found files comes from. The html page which you posted uses kendo.all.js, if that file is included you do not need to include kendo.grid.js.
Regards,
Alexander Valchev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
N
Top achievements
Rank 1
Rank 1
answered on 25 Dec 2013, 06:05 PM
making the suggested correction(moving model: orgModel inside the schema) did help solve the problem.
thanks
I am noticing that it is sending all the row back to the server even the ones that were not modified, what am i missing in configuration.
I don't want batch mode, i want to update row by row as soon as the user clicks update button i want to save changes.
Secondly i also want to hookup to events like
read(ajax started), sucess,Error
same for Delete & Update.
How can i achieve that ?
thanks
I am noticing that it is sending all the row back to the server even the ones that were not modified, what am i missing in configuration.
I don't want batch mode, i want to update row by row as soon as the user clicks update button i want to save changes.
Secondly i also want to hookup to events like
read(ajax started), sucess,Error
same for Delete & Update.
How can i achieve that ?
0
Hello,
In "inline" editing mode (the one you are using) changes are submitted as soon as the user presses the update button. You can verify this behavior by monitoring the network traffic on this demo. The dataSource sends whole record to the server as the dataSource does not know which field exactly was changed - changes are monitored at record level, e.g. the dataSource knows that a given record has changed but not which exactly field in the record.
That said, there is no configuration option that allows you to submit only the modified field. Moreover the server usually needs the item ID in order to determine which exactly record should be updated.
Regarding your second question, the requestEnd event of the dataSource fires every time a read/update/create/destroy Ajax request finishes successfully.
Regards,
Alexander Valchev
Telerik
In "inline" editing mode (the one you are using) changes are submitted as soon as the user presses the update button. You can verify this behavior by monitoring the network traffic on this demo. The dataSource sends whole record to the server as the dataSource does not know which field exactly was changed - changes are monitored at record level, e.g. the dataSource knows that a given record has changed but not which exactly field in the record.
That said, there is no configuration option that allows you to submit only the modified field. Moreover the server usually needs the item ID in order to determine which exactly record should be updated.
Regarding your second question, the requestEnd event of the dataSource fires every time a read/update/create/destroy Ajax request finishes successfully.
Regards,
Alexander Valchev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
N
Top achievements
Rank 1
Rank 1
answered on 26 Dec 2013, 04:57 PM
I am left with this one problem.
I am getting Modelvalidation , ErrorMessage = "The value 'Wed Dec 25 2013 00:00:00 GMT-0600 (Central Standard Time)' is not valid for EffectiveDate."
How to handle dates, so that i can avoid such errors.
I am getting Modelvalidation , ErrorMessage = "The value 'Wed Dec 25 2013 00:00:00 GMT-0600 (Central Standard Time)' is not valid for EffectiveDate."
How to handle dates, so that i can avoid such errors.
0
Hello,
I would like to remind you that as a general practice it is accepted to ask different questions in separate threads. In this way it is much easier to follow and concentrate on the particular issue which usually leads to its faster resolving.
Since the last question you asked is not directly related to the initial subject of this support conversation I kindly ask you to create a new thread for it.
We will also appreciate if you provide a small sample which isolates the issue or code snippets and samples from the server response that demonstrating the scenario.
Thank you in advance for the understanding.
Regards,
Alexander Valchev
Telerik
I would like to remind you that as a general practice it is accepted to ask different questions in separate threads. In this way it is much easier to follow and concentrate on the particular issue which usually leads to its faster resolving.
Since the last question you asked is not directly related to the initial subject of this support conversation I kindly ask you to create a new thread for it.
We will also appreciate if you provide a small sample which isolates the issue or code snippets and samples from the server response that demonstrating the scenario.
Thank you in advance for the understanding.
Regards,
Alexander Valchev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!