KendoGrid edit and destroy ajax call

[Pawan]

Hello,

I'm using KendoGrid to populate the data and also doing CRUD functionality. But my problem is that I'm not able to update/Delete entities  as I'm not able to  make ajax call .

Kindly suggest me where  I'm going  wrong . 


Thanks,

$("#GridTestJS").kendoGrid({

       columns: [{ title: "Fontfamily", field: "Fontfamily" },

              { title: "FontPreviewImage", field: "FontPreviewImage" },

             { command: ["edit", "destroy"], title: " ", width: "210px"}],

       editable: "popup",

       dataSource:

       {

           transport:

          {

              read: { url: "/Test/GetFontDetails" },

              update: { url: "/Test/updateFontDetails",

                  data: {}

              },

              destroy: { url: "/Test/destroyFontDetails" }

          }

       },

       selectable: "row"

   });

 

  public JsonResult GetFontDetails()

       {

           var Allfonts = context.Fonts.ToList();

           return Json(Allfonts, JsonRequestBehavior.AllowGet);

       }

 

       public JsonResult updateFontDetails(Font obj)

       {

           var Allfonts = context.Fonts.ToList();

           return Json(Allfonts, JsonRequestBehavior.AllowGet);

       }

 

       public JsonResult destroyFontDetails(Font obj)

       {

           var Allfonts = context.Fonts.ToList();

           return Json(Allfonts, JsonRequestBehavior.AllowGet);

       }

[Pawan]

Is there anyone who really knows it and can help me . 

[Josh]

Have you tried putting :

batch:false,

In you datasource control?

[Pawan]

Yes , Even I tried that also... But no gain

[Michael]

I believe you'll need to add a parameter map.

Unfortunately the documentation on this isn't the best, but it's here: http://docs.kendoui.com/api/framework/datasource#transportparametermap-function.  It may be even simpler than what I have, this is just what has worked for for me the past.

$("#GridTestJS").kendoGrid({

       columns: [{ title: "Fontfamily", field: "Fontfamily" },

              { title: "FontPreviewImage", field: "FontPreviewImage" },

             { command: ["edit", "destroy"], title: " ", width: "210px"}],

       editable: "popup",

       dataSource:

       {

          transport:

          {

              read: { url: "/Test/GetFontDetails" },

              update: { url: "/Test/updateFontDetails",

                  data: {}

              },

              destroy: { url: "/Test/destroyFontDetails" },

             parameterMap: function (data, operation) {

              if (operation != "read") {

                var result = {};

                for (var i = 0; i < data.models.length; i++) {

                  var font = data.models[i];

                  for (var member in font) {

                    result["obj[" + i + "]." + member] = font[member];

                  }

                }

                return result;

             }

             return null;

           }

          }

       },

       selectable: "row"         

   });

You may even be able to do something like below.  (return an object with fields the same as are in your Font class and MVC will automatically map these to a font class.

parameterMap: function(options, type) {
          return {
             Fontfamily: options.Fontfamily
          FontPreviewImage: options.FontPreviewImage          
          }
       }