If I hook the Grid SAVE event to a function, I can see that the function gets called.
I've simplified the code down to "only" 126 lines and have included it below.
Am I missing something obvious? If not, how would I proceed to troubleshoot this issue?
Thanks for looking at this.
001.<html>002.<head>003.<link rel="stylesheet" type="text/css" href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.common.min.css" />004.<link rel="stylesheet" type="text/css" href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.default.min.css" />005.</head>006.<body>007.<script src="http://code.jquery.com/jquery-1.9.1.js" ></script>008.<script src="http://cdn.kendostatic.com/2013.1.319/js/kendo.all.min.js" ></script>009.<script>010.$(document).ready(function(){011./* -- Begin Doc ready --*/012.var dataSource = new kendo.data.DataSource(013.{014. transport:015. {016. read:017. {018. url: "http://apvs26/HttpServices/api/SchedulingShiftDays",019. type: "GET",020. dataType: "json",021. data: function( e )022. {023. console.log("data"); return{024. shift: "rbj01"025. };026. }027. },028. update:029. {030. url: function() { console.log("update invoked"); return "http://apvs26/HttpServices/api/SchedulingShiftDays";},031. type: "POST",032. dataType: "json",033. data: function( e )034. {035. console.log("update"); return{036. shift: "rbj01"037. };;038. }039. },040. destroy:041. {042. url: "http://apvs26/HttpServices/api/SchedulingShiftDays",043. type: "DELETE",044. dataType: "json",045. data: function( e )046. {047. console.log("delete"); return{048. shift: "rbj01"049. };;050. }051. }, 052. create:053. {054. url: "http://apvs26/HttpServices/api/SchedulingShiftDays",055. type: "PUT",056. dataType: "json",057. data: function( e )058. {059. console.log("create"); return{060. shift: "rbj01"061. };;062. }063. }, 064. parameterMap: function( data, operation )065. {066. console.log('Map called w/' + data ); console.log( 'operation=' + operation );067. var filter="$filter=";068. for(var property in data)069. {070. filter += property + " eq '" + data[property] + "'";071. }072. console.log('Resulting filter: ' + filter);073. return filter; 074. },075. schema:076. {077. model:078. { 079. id: "DayNumber", 080. fields:081. {082. DayNumber: { type: "number" },083. Hours: { type: "number" },084. StartTime: { type: "string" },085. EndTime: { type: "string" },086. DayName: { type: "string" },087. Description: { type: "string" }088. },089. set: function(e) {console.log( "set" ); }090. }091. }092. }093.});094. 095.$("#grid").kendoGrid({096. dataSource: dataSource,097. pageable: false,098. scrollable: false,099. toolbar: ["create"],100. columns: [101. { field: "DayNumber", title: "Day", width: "9%"},102. { field: "DayName", title:"Name", width: "15%" },103. { field: "StartTime", title: "Start Time", width: "8%"},104. { field: "EndTime", title:"End Time", width: "8%"},105. { field: "Hours", title:"Hours", format: "{0:n}", width: "9%"},106. { field: "Description", title:"Description" },107. { command: ["edit", "destroy"], title: "Actions", width: "18%" }108. ],109. editable: "inline"110. //,save: onSave111.});112. 113.function onSave(e)114.{115. console.log("in onSave()");116. return;117.}118. 119./* -- End Doc Ready -- */120.});121.</script>122.<div id="gridcontainer">123. <div id="grid"></div>124.</div>125.</body>126.</html>14 Answers, 1 is accepted
From the provided information it's not clear for us what is the reason for this behavior - could you please provide runable sample where the issue is reproduced? This would help us pinpoint the exact reason for this behavior.
Vladimir Iliev
Telerik
Rank 1
I would have shifted to a Twitter feed as used in the Kendo Dojo and changed the data in the columns to match before submitting this, but that public JSON source seems to have dried up as they seem to now require authentication. Would you suggest a public JSON data feed to consume for an example?
For convenience I created small jsBin example which use the KendoUI demo service to load the grid with data.
Vladimir Iliev
Telerik
Rank 1
However, I solved the mystery of the issue in the code above, I just haven't had a chance to post about it since returning from holiday.
The issue is that the Schema object is declared inside the Transport, inside of outside the transport in the datasource itself. Because of this there is no model, and obviously no ID within the model to use as a key. No key, no change.
It would be lovely if some sort of error/event/message or SOMETHING would drop a hint as to why the change event wasn't doing anything An initialzer debug mode or something to squawk about unexpected objects perhaps.
I would suggest to share your idea about the error messages at KendoUI UserVoice to allow other users vote for it. Most voted ideas are included in next KendoUI releases.
Vladimir Iliev
Telerik
Rank 1
Russ
i am facing this same problem with my kendoui grid in mvc.
as u said u sloved "The issue is that the Schema object is declared inside the Transport, inside of outside the transport in the datasource itself. Because of this there is no model, and obviously no ID within the model to use as a key. No key, no change."
so i didn't get this words...can u explain it in details..?
thnx.....
Russell means that the dataSource configuration was invalid, which leads to no valid model ID defined. If you are experiencing the same issue I would suggest to open a new support thread and provide the current grid and dataSource configuration that you are using. This would help us poinpoint the exact reason for this behavior.
Regards,
Vladimir Iliev
Telerik
Rank 1
I'm still having the same problem, even with the model defined correctly ...
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="default" content="Uniface 10" />
<link rel="stylesheet" type="text/css" href="../css/uniface.css" />
<link rel="stylesheet" href="../css/styles/kendo.common.min.css" />
<link rel="stylesheet" href="../css/styles/kendo.default.min.css" />
<link rel="stylesheet" href="../css/styles/kendo.default.mobile.min.css" />
<script src="../js/jquery.min.js"></script>
<script src="../js/kendo.all.min.js"></script>
</head>
<body class="u"> <!-- class "u" enables some minor pre-styled CSS rules in ../css/uniface.css -->
<div id="example">
<div id="grid"></div>
<script>
$(document).ready(function () {
var myDs = new kendo.data.DataSource({
type : "odata-v4",
transport: {
read: {
url: "http://localhost:8092/uniface/wrd/CUSTOMERREST",
type : "get",
dataType : "json"
},
create: {
url: "http://localhost:8092/uniface/wrd/CUSTOMERREST",
type : "post",
dataType : "json"
},
update: {
url: "http://localhost:8092/uniface/wrd/CUSTOMERREST",
type : "put",
dataType : "json"
},
destroy: {
url: "http://localhost:8092/uniface/wrd/CUSTOMERREST",
type : "delete",
dataType : "json"
}
},
// batch:true,
schema: {
model: {
id : "CUSTOMERID",
fields: {
CUSTOMERID: { type: "number" },
TYPE: { type: "string" },
STATUSCD: { type: "string" },
CREATIONDT: { type: "string" },
FIRSTNAME: { type: "string" },
MIDDLENAME: { type: "string" },
LASTNAME: { type: "string" },
LEGALNAME: { type: "string" }
}
}
},
// pageSize: 20
});
$("#grid").kendoGrid({
dataSource : myDs,
pageable : false,
scrollable : false,
toolbar : ["create"],
columns:
[{
field: "CUSTOMERID",
title: "Customer Id"
},
{
field: "TYPE",
title: "Customer Type"
},
{
field: "STATUSCD",
title: "Status Code"
},
{
field: "CREATIONDT",
title: "Creation Date"
},
{
field: "FIRSTNAME",
title: "First Name"
},
{
field: "MIDDLENAME",
title: "Middle Name"
},
{
field: "LASTNAME",
title: "Last Name"
},
{
field: "LEGALNAME",
title: "Legal Name"
},
{
command: ["edit", "destroy"],
title: " ",
width: "250px"
}],
editable : "inline"
});
});
</script>
</div>
<style type="text/css">
.customer-photo {
display: inline-block;
width: 32px;
height: 32px;
border-radius: 50%;
background-size: 32px 35px;
background-position: center center;
vertical-align: middle;
line-height: 32px;
box-shadow: inset 0 0 1px #999, inset 0 0 10px rgba(0,0,0,.2);
margin-left: 5px;
}
.customer-name {
display: inline-block;
vertical-align: middle;
line-height: 32px;
padding-left: 3px;
}
</style>
</body>
</html>
Based on the provided grid and data source, I created a Dojo sample in which the Edit and Delete functionalities work as expected. Note that I have changed the columns' declarations and the data source.
https://dojo.telerik.com/uVUguRUL
Also, can you ensure that the returned data items from the service are in JSON format and not in JSONP? Nevertheless, if there is not a match, the editing and deleting might not behave as expected because the grid will not manage to match the currently edited record with the one in the data source.
If the issue persists, please modify provided Dojo sample and I will dig into the issue and eventually provide a possible solution.
Kind regards,
Tsvetomir
Progress Telerik
Rank 1
Hi Tsvetomir.
I fixed the problem with the PUT and POST (related to a empty service output - thank for your help)
However the DELETE doesn't work at all; the request has an empty content, as seen in Fiddlr. I don't use jsonp datatype.
After clicking on the Delete button of the Kendo UI Grid, can you check out the Network tab of the DevTools of the browser and ensure that the request is sent to the correct URL?
Also, you can subscribe to the remove event and there, via the event arguments, you can check if a model is getting ready to be removed. You can also set a debugger there and see what are the arguments.
remove:function(e){ alert(e.model.ProductName) }Furthermore, if there is a JavaScript error thrown, the grid might not behave as expected. Can you check out the console for errors?
Can you also compare the project I have sent in my previous response and compare it to the one on your side and check out what are the crucial differences?
For your convenience, I am pasting the link here:
https://dojo.telerik.com/uVUguRUL
If the issue persists, please modify the Dojo sample and sent it back to me. This will enable me to investigate and debug the issue locally.
Kind regards,
Tsvetomir
Progress Telerik
Rank 1
Problem solved. Set the selectable property to true. There is a request sent but the body is empty.
Rank 1
Hi Tsvetomir.
I already did the investigation using Fiddlr. A request is issued, but the body is empty.
I solved the problem : the Grid "selectable" property must be set to "true". This is not documented correctly in your doc.... which brings me to another point : I found a lot of components hard to use because of the lack of a complete and consistent documentation. Is the only source the one provided online ?
I'll try the training the coming weeks ...
You can close the call.
I have noticed that in the provided DataSource declaration, the type is set to "odata-v4" and in the transport settings explicitly the type is set to JSON. That said, the two are not compatible.
The selectable property does not have anything common with the data source of the grid. Hence, setting this option to true will not affect the rendering of the grid. Also, in order to see the model, you have to configure the parameterMap option of the grid. Please find the example below and check the request that is sent. The model can be seen at the bottom of the request located in the Network tab of the Developer tools.
https://dojo.telerik.com/uquHOLuR
As per the documentation, it is separated into two sections. The first one is the API Reference of the widgets in which all of the settings and properties of the widgets can be found. The second is the Documentation in which certain things are described in-depth for better understanding. It is always a great idea to skim through both of the resources in order to obtain the big picture.
Furthermore, there are demos created for most of the use-cases which help the developer to get a better understanding of how is the widget set up and a configuration provided which can be used as a base.
Live Demos
The training which is provided by Progress is a great opportunity for the developers who are getting started with the components. It is a kickstarter and sets the base and intends to save time with getting to know the widgets of the specific Suite.
I hope these clarifications prove helpful.
Kind regards,
Tsvetomir
Progress Telerik