Kendo UI Grid - not working in IE for POST/DELETE requests - kendo-ui

Question

I am having problem getting the Kendo Grid to work correctly. I am using ASP.NET WebAPI to fetch data from SQL Server and display it in the grid. Use the Kendo Grid to do Updates and Deletes.
POST: While debugging I noticed that a NULL object in IE but Chrome gets a valid data.
which I am passing to update the DB.
IE versions 10 and 11. There are no JS errors but the object is NULL on the WEB API.
WEBAPI - GET Works (IE and Chrome),
POST/DELETE does not work in IE (Works in Chrome)
#model dynamic
#{
ViewBag.Title = "FunctionalGroup";
}
<div class=".col-xs-12 .col-sm-6 .col-lg-8">
<div class="well well-sm">
<h2>Functional Groups - Management</h2>
<p>Create, Update and Delete Functional Groups</p>
</div>
<div class="row">
<div class="well well-sm">
<div style="overflow-x: auto" id="FunctionalGroupGrid"></div>
<div id="window"></div>
</div>
</div>
<div>
<button data-role="button" data-icon="cancel"></button>
</div>
</div>
#section Scripts{
<script type="text/x-kendo-template" id="windowTemplate">
<p>Delete <strong>#= FunctionalGroupName #</strong> ? </p>
<p>#= FunctionalGroupDescription # </p>
<button class="k-button" id="yesButton">Yes</button>
<button class="k-button" id="noButton"> No</button>
</script>
<script>
var windowTemplate = kendo.template($("#windowTemplate").html());
var window = $("#window").kendoWindow({
title: "Are you sure you want to delete this record?",
visible: false, //the window will not appear before its .open method is called
modal: true,
resizable: false,
width: "400px",
height: "200px",
}).data("kendoWindow");
var LookupFunctionalGroupType = new kendo.data.DataSource({
transport: {
read: "/api/FunctionalGroupType",
datatype : "json"
}
});
function getfunctionalGroupType(functionalGroupTypeID) {
for (var idx = 0, length = LookupFunctionalGroupType.length; idx < length; idx++) {
if (LookupFunctionalGroupType[idx].FunctionalGroupTypeID === functionalGroupTypeID) {
return LookupFunctionalGroupType[idx].FunctionalGroupTypeName;
}
}
}
function functionalGroupTypeDropDownEditor(container, options) {
$('<input data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
dataTextField: "FunctionalGroupTypeName",
dataValueField: "FunctionalGroupTypeID",
dataSource: LookupFunctionalGroupType
}).appendTo(container);
}
$(function () {
var baseUrl = "/api/FunctionalGroup";
var datatype = "json";
var contentType = "application/json";
var datasourceFG = new kendo.data.DataSource({
serverPaging: true,
pageSize: 10,
autoSync: false,
batch: true,
transport: {
read: {
url: baseUrl,
dataType: datatype,
contentType: contentType
},
create: {
url: baseUrl,
dataType: datatype,
contentType: contentType,
type: "POST"
},
update: {
url: baseUrl,
dataType: datatype,
contentType: contentType,
type: "PUT"
},
destroy: {
url: baseUrl,
dataType: datatype,
contentType: contentType,
type: "DELETE"
}
, parameterMap: function (data, operation) {
if (operation !== "read" && data.models) {
return kendo.stringify(data.models);
}
else {
return {
take: data.take,
skip: data.skip,
pageSize: data.pageSize,
page:data.page
}
}
},
},
schema: {
data: "Data.$values",
total: "RecordCount",
model: {
id: "FunctionalGroupID",
fields: {
FunctionalGroupID: { editable: false, type: "number" },
FunctionalGroupName: { editable: true, nullable: false, validation: { required: true } },
FunctionalGroupDescription: { editable: true, nullable: false, validation: { required: true } },
FunctionalGroupTypeID: { field: "FunctionalGroupTypeID", type: "number", defaultValue: 101 },
IsActive: { editable: true, nullable: false, type: "boolean" },
CreatedBy: { editable: false, nullable: false, validation: { required: true } },
CreatedDateTime: { editable: false, type: "date", format: "{0:MM/dd/yyyy HH:mm:ss}" },
ModifiedBy: { editable: false},
ModifiedDateTime: { editable: false, type: "date", format: "{0:MM/dd/yyyy HH:mm:ss}" }
}
},
}
});
$("#FunctionalGroupGrid").kendoGrid({
dataSource: datasourceFG,
navigatable: true,
autoBind: false,
pageable: true,
resizable: true,
reorderable: true,
editable: kendo.support.mobileOS ? "popup":true,
groupable: true,
filterable: true,
sortable:true,
columnMenu: true,
selectable: "row",
mobile: true,
toolbar: ["create", "save", "cancel"],
columns: [
{ field: "FunctionalGroupID", width: 50, title: "ID", hidden: true },
{ field: "FunctionalGroupName", width: 150, title: "Functional Group" },
{ field: "FunctionalGroupDescription", width: 200, title: "Description" },
{
field: "FunctionalGroupTypeID", width: 180, title: "Functional Group Type"
, template: '#=getfunctionalGroupType(FunctionalGroupTypeID)#'
, editor: functionalGroupTypeDropDownEditor, filterable:false
},
{
field: "IsActive", width: 80, title: "Is Active",
template: '<input type="checkbox" #= IsActive ? checked="checked" : "" # disabled="disabled" ></input>'
},
{ field: "CreatedBy", width: 100, title: "Created By", hidden: true },
{ field: "CreatedDateTime", width: 100, title: "Created DateTime", format: "{0:MM/dd/yyyy}", hidden: true },
{ field: "ModifiedBy", width: 100, title: "ModifiedBy", hidden: true },
{ field: "ModifiedDateTime", width: 100, title: "Modified DateTime", format: "{0:MM/dd/yyyy}", hidden: true },
{
title: "Actions",
command: [
{
name: "destroy",
text: "Delete",
click: function (e) { //add a click event listener on the delete button
var tr = $(e.target).closest("tr"); //get the row for deletion
var data = this.dataItem(tr); //get the row data so it can be referred later
window.content(windowTemplate(data)); //send the row data object to the template and render it
window.open().center();
$("#yesButton").click(function () {
grid.dataSource.remove(data) //prepare a "destroy" request
//grid.dataSource.sync() //actually send the request (might be ommited if the autoSync option is enabled in the dataSource)
window.close();
})
$("#noButton").click(function () {
window.close();
})
}
}
]
}
]
});
LookupFunctionalGroupType.fetch(function () {
LookupFunctionalGroupType = this.data(); //First fetch the Lookup data
datasourceFG.read(); // This will bind to the grid.
});
});
</script>

Answer 1

Which versoin of IE are you running? Are you seeing JS error in IE?
I see in your secript
},
}
You might want to remove "," if there are no elements following it in the list