According to support, Kendo will not allow the use of any record Id of "0" (number zero).
This is a major problem for us as all of our tables utilize auto identity generators that start with 0 as the first record. Since Kendo grid (and possibly other components) will behave badly when there is even a record in the data set with an Id of 0, things do not work.
For example, if there is a record Id 0 in the data set and you use a popup editor it will always go to the create operation of the transport instead of the update operation, even when editing records that have a non-zero Id.
Does anyone know of a way to get around this issue with the Kendo tools?
Changing the backend is not an option as we have dozens of installations comprising thousands of tables and millions of lines of code with client developers making additional changes to the applications, so backend changes are not an option.
We planned to use Kendo as an upgraded front end user interface to the backend systems, but if we cannot get around this issue with a reasonable amount of effort, then Kendo is unusable for us.
Thanks for any ideas,
Ed
3 Answers, 1 is accepted
Hello Mongonv,
My colleague Dimo Dimov already replied to your question in thread with 964192.
In order to avoid any further confusions I would suggest continuing the communication in this thread.
Regards,
Boyan Dimitrov
Telerik
Hey Boyan,
Dimo's answer did not really answer the question, it simply pointed to your documentation that does not really address if his suggestion will fix the issue. It only indicates what the default value of new records will be for a field (see his answer below).
What I need to know is if will changing the model.defaultvalue make the popup edit window's update button hit the update operation instead of the create operation?
When my data has any record in the grid's data list with a 0 id value, that operation was always calling create. When I removed the record with a 0 id it called the update as expected. I have spent a significant amount of time figuring out a work around for this one instance and would like an answer from your group before spending more time to put things back to what should work.
That is the question I would like an answer to as I have been going back and forth with your support group for over 2 weeks trying to get an answer to why your update operation was behaving in this manner.
I am keeping the answers going into this thread to help anyone else that may come across this issue as I could not find anything about it anywhere.
Thanks,
Ed
Reply from Dimo:
Zero is the default value of new numeric objects both on the client, and on the server. That's why we are using it to detect if a data item is new.
If changing the database logic is not possible, set the defaultValue of the txtId field to -1 in dataSource.schema.model.fields.
http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-schema.model
http://docs.telerik.com/kendo-ui/api/javascript/data/model#methods-Model.define​
The quoted response explains why zero IDs cause "create" to be executed instead of "update", and suggests to change the ID field's default value to -1 in order to resolve the dicussed problem.
We also updated the documentation to avoid confusion in the future.
http://docs.telerik.com/kendo-ui/framework/datasource/crud#update-local
Here is an updated version of your example, which should clear any uncertainties.
<!DOCTYPE html>
<
html
>
<
head
>
<
base
href
=
"http://demos.telerik.com/kendo-ui/grid/angular"
>
<
style
>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</
style
>
<
title
>Kendo UI Grid + Angular</
title
>
<
link
rel
=
"stylesheet"
href
=
"//kendo.cdn.telerik.com/2015.2.805/styles/kendo.common.min.css"
/>
<
link
rel
=
"stylesheet"
href
=
"//kendo.cdn.telerik.com/2015.2.805/styles/kendo.default.min.css"
/>
<
script
src
=
"//kendo.cdn.telerik.com/2015.2.805/js/jquery.min.js"
></
script
>
<
script
src
=
"//kendo.cdn.telerik.com/2015.2.805/js/angular.min.js"
></
script
>
<
script
src
=
"//kendo.cdn.telerik.com/2015.2.805/js/kendo.all.min.js"
></
script
>
</
head
>
<
body
>
<
div
id
=
"example"
ng-app
=
"KendoDemos"
>
<
div
style
=
"padding-top: 10px"
ng-controller
=
"ScreenSegController"
>
<
p
><
kendo-button
ng-click
=
"showGridData()"
>Show Grid Data</
kendo-button
></
p
>
<
kendo-grid
options
=
"modelScrSegOptions"
></
kendo-grid
>
<
div
id
=
"gridData"
style
=
"margin:1em 0;padding:1em;border:1px solid #ccc;"
></
div
>
</
div
>
</
div
>
<
script
id
=
"model_scr_seg_popup_editor"
type
=
"text/x-kendo-template"
>
<
textarea
kendo-editor
k-on-change
=
"dataItem.dirty = true"
ng-model
=
"dataItem.txtBody"
k-tools="[
'bold',
'italic',
'underline',
'strikethrough',
'justifyLeft',
'justifyCenter',
'justifyRight',
'justifyFull',
'insertUnorderedList',
'insertOrderedList',
'indent',
'outdent',
'createLink',
'unlink',
'insertImage',
'insertFile',
'subscript',
'superscript',
'createTable',
'addRowAbove',
'addRowBelow',
'addColumnLeft',
'addColumnRight',
'deleteRow',
'deleteColumn',
'viewHtml',
'formatting',
'cleanFormatting',
'fontName',
'fontSize',
'foreColor',
'backColor',
'print',
'pdf'
]"></
textarea
>
</
script
>
<
script
>
angular.module("KendoDemos", [ "kendo.directives" ])
/**
* @ngdoc controller
* @name ewpPortalApp:ControllerNameCtrl
* @description Describe what the controller is responsible for.
**/
.controller('ScreenSegController', function ($scope)
{
$scope.showGridData = function() {
$("#gridData").html(kendo.stringify($scope.ewpScreenSegs));
};
$scope.ewpScreenSegs = [{"siteId" : 0,
"txtAttName": "appRvwProjTypeIntro",
"txtBody" : "body section 1",
"txtDesc" : "Plan Review Application - Project Type",
"txtId" : 0
},
{"siteId" : 0,
"txtAttName": "appRvwPropIntro",
"txtBody" : "body section 2",
"txtDesc" : "Plan Review Application - Property Type",
"txtId" : 2
}
];
$scope.modelScrSegOptions = {
resizable: false,
selectable: true,
editable:
{
mode: "popup",
update: true,
template: $("#model_scr_seg_popup_editor").html(),
window:
{
title: "Screen Segment Editor",
actions: [ "Maximize", "Close" ],
resizable: true,
width: "700px",
open: function(e) {
e.sender.wrapper.addClass("scr_seg_window")
},
activate: function(e) {
e.sender.wrapper.height(e.sender.wrapper.height());
}
}
},
autoBind: true,
dataSource:
{
data: $scope.ewpScreenSegs,
transport:
{
read : function (e)
{
// on success
e.success($scope.ewpScreenSegs);
},
parameterMap: function(e)
{
alert("in parameterMap");
},
destroy: function(e)
{
alert("in destroy");
},
create: function(e)
{
alert("in create");
e.success();
},
update : function (e)
{
alert("in update");
// on success
e.success();
// on failure
//e.error("XHR response", "status code", "error message");
}
},
batch: true,
sort: {field: "txtDesc", dir: "asc"},
error : function (e)
{
// handle data operation error
alert("Status: " + e.status + "; Error message: " + e.errorThrown);
},
schema :
{
model:
{
id : "txtId",
fields:
{
siteId : {type: "number"},
txtId : {type: "number", defaultValue: -1},
txtDesc : {type: "string"},
txtAttName : {type: "string"},
txtBody : {type: "string"}
}
}
}
},
dataBound: function()
{
},
columns:
[
{
command: ["edit"],
title: " ",
width: 91
},
{
field: "txtDesc",
title: "Description"
},
{
field: "txtBody"
},
{
field: "txtId"
}
]
};
}
);
</
script
>
</
body
>
</
html
>
Regards,
Dimo
Telerik