I have this code but it acts weird:
<div id="relatedCirculars"></div>
<script src="kendo/jquery.min.js"></script>
<script src="kendo/kendo.all.min.js"></script>
<script>
var relatedCirculars = [{ Title: "Test1", URL: "http://adres/test1.docx" },
{ Title: "Test2", URL: "http://adres/test2.docx" }];
$("#relatedCirculars").kendoGrid({
dataSource: {
data: relatedCirculars,
autoSync: true,
schema: {
model: {
fields: {
Title: { validation: { required: true } },
URL: { validation: { required: true }}
}
}
}
},
toolbar: ["create"],
columns: [
{
field: "Title"
},
{
field: "URL"
},
{
command: ["edit", "destroy"],
title: " ",
width: "250px"
}
],
editable: "inline"
});
</script>
At any point, the content of "relatedCirculars" is not changed.
While editing and clicking on the second field, the edition is finished.
Validation seems not to work.
Cancel is not working.
Any idea what's missing?
8 Answers, 1 is accepted
When the Grid is assigned a regular array of data, its internal DataSource creates a copy of it. If you want changes to be directly reflected in the initial array, make it an ObservableArray:
var relatedCirculars = new kendo.data.ObservableArray([ {ID: 1, Title: "Test1", URL: "http://adres/test1.docx" }, {ID: 2, Title: "Test2", URL: "http://adres/test2.docx" }]);This scenario will still work better if you switch to incell editing as opposed to inline editing. You can see a Dojo here:
http://dojo.telerik.com/@tsveti/ALaBUWoP
Note that the updates in this scenario happen because the Grid is bound to the array data using MVVM. There isn't actual editing taking place and that is why the cancel operation does not work.
If you want to implement a scenario where the array data is actually edited, as opposed to updated by an MVVM binding, you should implement local CRUD operations in the DataSource. At the end of the section, there is a runnable example:
Local CRUD operations example
Regards,
Tsvetina
Progress Telerik
Rank 1
In a cell, editing is even better, but this does not work on my solution for a strange reason:
"Unhandled exception at line 54, column 9287 in http://localhost:14981/Scripts/kendo.all.min.js
0x800a138f - JavaScript runtime error: Unable to get property 'template' of undefined or null reference occurred"
This happens when I click on "Add new record". There is no template referenced in this grid but there are templates used in other grids on that page. This is an exact code of the solution:
$("#relatedCirculars").kendoGrid({
dataSource: {
data: RelatedCircularsGuidlinesPolicies,
schema: {
model: {
id: "ID",
fields: {
ID: { editable: false, nullable: false },
Title: { validation: { required: true } },
URL: { validation: { required: true } }
}
}
}
},
toolbar: ["create"],
columns: [
{
field: "Title"
},
{
field: "URL"
},
{
command: ["destroy"],
title: " ",
width: "250px"
}
],
editable: true,
save: function (e) {
RelatedCircularsGuidlinesPolicies = e;
},
remove: function (e) {
RelatedCircularsGuidlinesPolicies = e;
}
});
Could you send me a runnable example, where I can reproduce and inspect the error. I cannot reproduce it in the Dojo that I sent in my previous post:
http://dojo.telerik.com/@tsveti/ALaBUWoP
I also cannot reproduce it when I copy the new code you shared:
http://dojo.telerik.com/@tsveti/iCivuCEs
However, one thing in this code seems problematic. Could you elaborate more on why the event argument of the save and remove events is set as a value of the edited array:
save: function (e) { RelatedCircularsGuidlinesPolicies = e;},remove: function (e) { RelatedCircularsGuidlinesPolicies = e;}e in this case is not an array but an object, which could break further functionality. If you explain the functionality that you are trying to achieve here, I may be able to suggest you a different way to implement it.
Regards,
Tsvetina
Progress Telerik
Rank 1
I can't replicate the issue outside of the solution, but it appears only when I click on, "Add new record"
Regarding save and remove function, this was wrong. What I'm trying to do is just make sure that the JSON which I provide to is always updated.
So what I did before sending the form is:
var RelatedCircularsGuidlinesPolicies = [];
$("#relatedCirculars").data("kendoGrid").dataSource.data().forEach(function(item) {
RelatedCircularsGuidlinesPolicies .push({ "Title": item.Title, "URL": item.URL });
});
But I'm sure there are nicer ways of doing this.
In such case, could you run your project using the non-minified kendo.all.js file and copy the full error message again, so I can see in which part of the source code the error is triggered? You can follow these steps:
1) Open the Kendo UI download page (requires login) and download one of the Source Code archives at the bottom.
2) Open the archive and find kendo.all.js in the src/js folder.
3) Copy kendo.all.js in your project and replace the kendo.all.min.js reference with a kendo.all.js one.
4) Reload the problematic page and click the "Add new record" button to reproduce the error.
5) Copy the full error message, with stack trace, here.
Regards,
Tsvetina
Progress Telerik
Rank 1
It is interesting that the error actually means that the column object that is currently handled is undefined, but going back through the chain of methods that call _cellTmpl, I do not see an obvious place where the column may be passed as undefined.
You mentioned that this error occurs only in this specific project. Could I ask you to check for duplicate Kendo UI references in the project? Check both the _Layout.cshtml view and the view where you declare the Grid. If you are unsure, please copy any Kendo UI references that you find in the project, so we can review them. Duplicate references could lead to such type of conflicts in the widgets internal code.
Regards,
Tsvetina
Progress Telerik
Rank 1
I was initiating grid without destroying it first.
This post helpt me: https://www.telerik.com/forums/object-expected-error-when-expanding-updated-grid-row