In my Kendo Grid I have the default "Add a new Record" button and I have it set to be editable inline. I managed to get the record inserted into the database but When the user does an update the on this new record it is missing the ID.
My code looks like:
var dataSource = new kendo.data.DataSource(
{
transport: {
read: {
url: '/Reports/Manage/Reports'
},
create: {
url: function (options) {
debugger;
// Ajax call to create a new record in the database
$.ajax(
{
type: 'POST',
url: '/Reports/Manage/CreateNewReport',
data: { name: options.name },
success: function (response) {
Do I have to do something here???
return;
},
error: function (repsonse) {
alert("Manage: CreateNewReport -> Ajax Error!");
}
});
return;
},
dataType: "json"
},
update: {
url: function (options) {
// Ajax call to update the Report Name in the database.
$.ajax(
{
type: 'POST',
url: '/Reports/Manage/UpdateReportName',
data: { reportId: options.reportId, name: options.name },
success: function (response) {
// do nothing
// alert("Successfully Saved Note.");
},
error: function (repsonse) {
alert("Manage: UpdateReportName -> Ajax Error!");
}
});
return;
},
dataType: "json"
}
},
pageSize: 15,
height: 500,
data: reports,
schema:
{
model:
{
id: 'reportId',
fields:
{
name: { editable: true, validation: { required: true } },
}
}
}
});
$reports.kendoGrid(
{
dataSource: dataSource,
pageable: {
refresh: true,
pageSizes: true
},
toolbar: ["create"],
columns:
[
{ field: 'name', title: 'Report', sortable: true },
{ command: ["edit", "destroy"], title: " ", width: "180px", }
],
editable: "inline",
selectable: true,
change: function (e) {
// A new report was selected.
...
}
});
You should return the ID of the newly created item from the server. Check what the server response is here: http://demos.kendoui.com/web/grid/editing-inline.html
Also you should use the built-in transport configuration. The DataSource is not aware of the server response if you hijack the url function like that. Here is what I mean:
transport: {
create: {
url: "/Reports/Manage/CreateNewReport",
type: "POST"
},
parameterMap: function(options, type) {
if (type == "create") {
return {
reportId: options.reportId,
name: options.name
};
}
return options;
}
}
There are a few fully-working examples which show how to implement CRUD:
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.