I am new to Kendo Grid. So i have few questions regarding the CRUD operations. I am getting data into the grid. But when i click on Update its not saving the changes i made on the grid when i refresh the page . And when i click on update nothing is happening. Below is the code i have for the grid.
<script type="text/javascript">
function calenderEventGrid() {
$("#cal-event-grid").kendoGrid({
dataSource:{
type: "json",
schema: {
data: function (response) {
return JSON.parse(response.d); // ASMX services return JSON in the following format { "d": <result> }.
},
model: { // define the model of the data source. Required for validation and property types.
id: "title",
fields: {
event_id:{editable: true, nullable: true, type: "string" },
title: { editable: true, nullable: true, type: "string" },
start: { editable: true, nullable: true, type: "date" },
end: { editable: true, nullable: true, type: "date" },
allDay: { editable: true, nullable: true, type: "string" },
color: { editable: true, nullable: true, type: "string" },
url: { editable: true, nullable: true, type: "string" },
Isadmin:{editable: true, nullable: true, type: "string"},
}
}
},
//sort: ({ field: "start", dir: "desc" }),
pageSize: 6,
transport: {
read: {
url: "/Services/ErpNowServices.asmx/getCalendarEvents", //specify the URL which data should return the records. This is the Read method of the Products.asmx service.
contentType: "application/json; charset=utf-8", // tells the web service to serialize JSON
type: "POST", //use HTTP POST request as the default GET is not allowed for ASMX
//data: {}
},
create: {
url:"/Services/ErpNowServices.asmx/getCalendarEvents",
contentType: "application/json; charset=utf-8",
type: "POST",
//data: {}
},
update: {
url:"/Services/ErpNowServices.asmx/AddCalendarEvents",
contentType: "application/json; charset=utf-8",
type: "PUT",
//parameterMap: function (data, operation) {
// if (operation != "read" && options.models) {
// return {
// models: kendo.stringify(options.models)
// };
// //data: {}
// }}
},
destroy: {
url:"/Services/ErpNowServices.asmx/getCalendarEvents",
contentType: "application/json; charset=utf-8",
type: "DELETE",
//data: {}
},
parameterMap: function (data, operation) {
if (operation != "read") {
// web service method parameters need to be send as JSON. The Create, Update and Destroy methods have a "products" parameter.
//return JSON.stringify({ orderItems: data.models }) eg.
} else {
// web services need default values for every parameter
return JSON.stringify(data);
}
}
}
},
//});
height: 450,
pageable: true,
editable: "inline",
sortable: true,
binding: true,
//filterable: true,
toolbar: ["create"],
columns: [
{
field: "title",
title: "TITLE",
headerTemplate: '<span class="tbl-hdr">TITLE</span>',
attributes: {
style: "text-align: left; font-size: 15px"
},
width: 185
},
{
field: "start",
title: "START",
headerTemplate: '<span class="tbl-hdr">START</span>',
// //template: '#=kendo.toString(start,"MM/dd/yy hh:mm tt EST")#',
attributes: {
style: "text-align: left; font-size: 15px"
},
width: 175
},
{
field: "end",
title: "ELAPSED",
//template: '#=kendo.toString(end,"MM/dd/yy hh:mm tt EST")#',
headerTemplate: '<span class="tbl-hdr">ELAPSED</span>',
attributes: {
style: "text-align: left; font-size: 15px"
},
width: 175
},
{
field: "allDay",
title: "ALLDAY",
headerTemplate: '<span class="tbl-hdr">ALLDAY</span>',
attributes: {
style: "text-align: left; font-size: 15px"
},
width: 90
},
{
field: "color",
title: "COLOR",
headerTemplate: '<span class="tbl-hdr">COLOR</span>',
attributes: {
style: "text-align: left; font-size: 15px"
},
width: 125
},
{
field: "url",
title: "Url",
headerTemplate: '<span class="tbl-hdr">UrL</span>',
attributes: {
style: "text-align: left; font-size: 15px"
},
width: 200
},
]
});
}
Code for reading the data .
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public string getCalendarEvents()
{
using (var context = new Data.ErpWebDataEntities())
{
var newQry = from x in context.Erp_Calendar
where x.cal_group == "PUBLIC"
select new
{
event_id = x.event_id,
title = x.title,
start = x.start_dttm,
end = x.end_dttm,
allDay = x.all_day,
color = x.rgb_color,
url = x.url
};
JavaScriptSerializer JSON = new JavaScriptSerializer();
return JSON.Serialize(newQry);
}
}
Need something like this to Update the data.
Below is the screenshot.
I tried the below link as you mentioned in your previous posts but its not working for me.
http://www.c-sharpcorner.com/UploadFile/fc9f65/crud-operation-in-kendo-grid-using-web-api/
Thanks in advance..
Arch