Kendo Edit Delete Commands are not working

[vikash]

My kendo Grid have column having combobox editor on clicking edit button its not holding its value rather showing the combobox first value and on cancel the row vanishes from the grid please find the attachment for screenshot.Here is my code

var forecastGrid = detailRow.find(".LongRangePlan").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: {
url: "http://datacollect.taxdemos.com/sites/LaureateDev/_api/web/lists/GetByTitle('LELRPMST')/items?$select=ShortDisplayName,EntityName,CountryName/Title,CountryName/ID,RegionName/Title,RegionName/ID&$expand=CountryName,RegionName",
type: "GET",
dataType: "json",
contentType: "application/json;odata=verbose",
headers: {
"accept": "application/json;odata=verbose"
}
},
create: {
url: "http://datacollect.taxdemos.com/sites/LaureateDev/_vti_bin/listdata.svc/LELRPMST",
dataType: "json"
},
update: {
url: function (data) {
return "http://datacollect.taxdemos.com/sites/LaureateDev/_api/web/lists/GetByTitle('LELRPMST')/items" + "(" + data.ID + ")";
},
beforeSend: function (jqXhr, options) {
var data = JSON.parse(options.data);
jqXhr.setRequestHeader("If-Match", data.__metadata.etag);
},
type: "POST",
dataType: "json",
contentType: "application/json;odata=verbose",
headers: {
"accept": "application/json;odata=verbose",
"X-RequestDigest": $("#__REQUESTDIGEST").val(),
"X-HTTP-Method": "MERGE"
}
},
destroy: {
url: function (data) {
return "http://datacollect.taxdemos.com/sites/LaureateDev/_api/web/lists/GetByTitle('LELRPMST')/items" + "(" + data.ID + ")";
},
type: "DELETE",
dataType: "json",
contentType: "application/json;odata=verbose",
headers: {
"accept": "application/json;odata=verbose",
"X-RequestDigest": $("#__REQUESTDIGEST").val(),
"X-HTTP-Method": "MERGE",
"If-Match": "*"
}
},
parameterMap: function (data, type) {

// if (type == "update") {
// for (var property in data) {
// if (property != "__metadata" && property != "ID" && property != "Title" && property != "SourceId1" && property != "SourceList" && property != "Status") {
// delete data[property];
// }

// }
// };
// if (type == "create") {
// for (var property in data) {
// if (property === "ID") {
// delete data[property];
// }
// }
// // return kendo.stringify(data);

// };

return kendo.data.transports["odata"].parameterMap(data, type);

}

},
pageSize: 7,
serverPaging: true,
serverSorting: true,
serverFiltering: true,
// filter: { field: "Title", operator: "eq", value: e.data.Title },
schema: {
model: {
id: "ID",
fields: {
ID: { type: "number", editable: false, nullable: true },
EntityName: { type: "string" },
ShortDisplayName: { type: "string" },
RegionName: { type: "object", defaultValue: { Title: "GPS"} },
CountryName: { type: "object", defaultValue: { Title: "Mexico"} }
}
}
}
},

//toolbar: [{ name: "my-create", text: "Add new record" }, "cancel"],
toolbar: ["create", "cancel"],
scrollable: false,
sortable: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
filterable: { mode: "row" },
columns: [
{ field: "EntityName", title: "HFM Name", filterable: { cell: { showOperators: true}} },
{ field: "ShortDisplayName", title: "Dashboard Dispaly Name", filterable: { cell: { operator: "contains"}} },
{ field: "CountryName", title: "Country", editor: CountryHierarchyCellDropDownEditor, template: "#=CountryName.Title#", filterable: { cell: { showOperators: false, template: CountryDropDownEditor}} },
{ field: "RegionName", title: "Region", editor: RegionHierarchyCellDropDownEditor, template: "#=RegionName.Title#", filterable: { cell: { showOperators: false, template: RegionDropDownEditor}} },
{ field: "Exception", command: ["edit", "destroy"], title: "Action", filterable: { cell: { showOperators: false, template: '<input id="${id}" type="checkbox" />'}}}],
editable: "inline"
});

function RegionHierarchyCellDropDownEditor(container, options) {
if (typeof (options) == 'undefined') {
$('<input required data-text-field="Title" data-value-field="ID" />')
.appendTo(container)
.kendoDropDownList({
autoBind: false,
dataSource: {
type: "odata",
transport: {
read: {
url: "http://datacollect.taxdemos.com/sites/LaureateDev/_vti_bin/listdata.svc/Regions",
type: "GET",
dataType: "json",
success: function (data) {
alert(data);
alert("RegionId");
},
contentType: "application/json;odata=verbose",
headers: {
"accept": "application/json;odata=verbose"
}
}
}
}
});
}
else {
$('<input required data-text-field="Title" data-value-field="ID" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
autoBind: false,
dataSource: {
type: "odata",
transport: {
read: {
url: "http://datacollect.taxdemos.com/sites/LaureateDev/_vti_bin/listdata.svc/Regions",
type: "GET",
dataType: "json",
success: function (data) {
alert(data);
alert("Region");
},
contentType: "application/json;odata=verbose",
headers: {
"accept": "application/json;odata=verbose"
}
}
}
}
});
}
}

function CountryHierarchyCellDropDownEditor(container, options) {
if (typeof (options) == 'undefined') {
$('<input required data-text-field="Title" data-value-field="ID" />')
.appendTo(container)
.kendoDropDownList({
autoBind: false,
dataSource: {
type: "odata",
transport: {
read: {
url: "http://datacollect.taxdemos.com/sites/LaureateDev/_vti_bin/listdata.svc/Countries",
type: "GET",
dataType: "json",
success: function (data) {
alert(data);
alert("CounrtyID");
},
contentType: "application/json;odata=verbose",
headers: {
"accept": "application/json;odata=verbose"
}
}
}
}
});
}
else {
$('<input id="drpCountry" required data-text-field="Title" data-value-field="ID" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
autoBind: false,
dataSource: {
type: "odata",
transport: {
read: {
url: "http://datacollect.taxdemos.com/sites/LaureateDev/_vti_bin/listdata.svc/Countries",
type: "GET",
dataType: "json",
contentType: "application/json;odata=verbose",
headers: {
"accept": "application/json;odata=verbose"
}
}
},
change: function (data) {

}
}
});

$("#drpCountry").data('kendoDropDownList').value(options.model.CountryName.ID);
}
}


function CountryDropDownEditor(container) {
container.kendoDropDownList({
autoBind: false,
dataTextField: "Title",
dataValueField: "ID",
valuePrimitive: true,
optionLabel: "Select...",
dataSource: {
type: "odata",
transport: {
read: {
url: "http://datacollect.taxdemos.com/sites/LaureateDev/_vti_bin/listdata.svc/Countries",
type: "GET",
dataType: "json",
contentType: "application/json;odata=verbose",
headers: {
"accept": "application/json;odata=verbose"
}
}
}
// filter: { field: "Title", operator: "eq", value: filterData }
}

});
}
function RegionDropDownEditor(container) {
container.kendoDropDownList({
autoBind: false,
dataTextField: "Title",
dataValueField: "ID",
valuePrimitive: true,
optionLabel: "Select...",
dataSource: {
type: "odata",
transport: {
read: {
url: "http://datacollect.taxdemos.com/sites/LaureateDev/_vti_bin/listdata.svc/Regions",
type: "GET",
dataType: "json",
contentType: "application/json;odata=verbose",
headers: {
"accept": "application/json;odata=verbose"
}
}
}
// filter: { field: "Title", operator: "eq", value: filterData }
}

});
}

[Dimo]

Hello Vikash,

Some of the DropDownList inputs are missing the data-bind attribute, which binds their value to the edited data item value. You can check this demo:

http://demos.telerik.com/kendo-ui/grid/editing-custom

Regards,
Dimo
Telerik