Arc Bik

Arc Bik

  • NA
  • 1
  • 2.1k

Crud operations in Kendo grid using c#(Query to Update )

Dec 2 2015 1:59 PM

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