KendoUI Grid with Remote Data Source Not Working

[Warren]

Hello everyone,

I copied the demo grid source for the remote data, and when I click the add button and the popup form is filled out everything looks good.  If I click on the edit button or delete button the datasource is still calling the server with the create part of the transport and ignoring the update/destory.    How can I get this working?

dataSource = new kendo.data.DataSource({
                            transport: {
                                read:  {
                                    url: crudServiceBaseUrl,
                                    dataType: "jsonp"
                                },
                                update: {
                                    url: crudServiceBaseUrl + "?action=update",
                                    dataType: "jsonp",
                                    type: "POST"
                                },
                                destroy: {
                                    url: crudServiceBaseUrl + "?action=destroy",
                                    dataType: "jsonp"
                                },
                                create: {
                                    url: crudServiceBaseUrl + "?action=create",
                                    dataType: "jsonp",
                                    type: "POST"
                                },
                                parameterMap: function(options, operation) {
                                    if (operation !== "read" && options.models) {
                                        return {models: kendo.stringify(options.models)};
                                    }
                                }
                            },
                          etc....
                        });

 $("#grid").kendoGrid({
                        dataSource: dataSource,
                        pageable: true
etc....
});

[Warren]

I added error with console.log to the datasource and changed it from jsonp to json and it works like a champ.

[Neil]

I believe this is because JSONP only works for GET requests and not POST/PUT/DELETE. If you need cross domain JSON, have a look at CORS (Cross-Origin Resource Sharing) for your web service.

Thanks,

Neil.

[Amol G]

Thanks Warren
Its works for me to get records but it was not calling data source update and delete methods. Please see below code

 $("#ColumnsGrid").kendoGrid({
                                                dataSource: {
                                                            transport: {
                                                                        read: {
                                                                                 url:"../MyController/Read",
                                                                                 dataType: "json",
                                                                                  type: "POST"
                                                                               },
                                                                        update: {
                                                                                   url:"../MyController/Update",
                                                                                   dataType: "json",
                                                                                    type: "POST"                                                                                   
                                                                                },
                                                                       destroy: {
                                                                                    url:"../MyController/Delete",
                                                                                    dataType: "json",
                                                                                     type: "POST"
                                                                                },
                                                                       parameterMap: function(options, operation) {                                                                                                                       if (operation !== "read" && options.models) {
                                                                                                                        return {models: kendo.stringify(options.models)};
                                                                                                                    }
                                                                                                                  }    
                                                              },
                                                            schema: {
                                                                       model: {                            
                                                                                 fields: {
                                                                                               ColumnID: { editable: false, nullable: true },
                                                                                               Column: { validation: { required: true } },
                                                                                               Operator: { type: "string", validation: { required: true} },                                     
                                                                                               Label: { type: "string", validation: { required: true } }
                                                                                          }
                                                                             }
                                                                   }
                                                        },
                                                pageable: true,     
                                                height:300,   
                                                change: onChange,                        
                                                dataBound: onDataBound,                    
                                                columns: [     
                                                            { field: "Operator", title: "Operator", width: "150px",editor: categoryDropDownEditor },                                               
                                                            { field: "Column", title:"Column Name", width: "150px" },
                                                            { field: "Label",  title: "Label" , width: "100px" },
                                                            {  command: ["edit", "destroy"], title: " ", width: "210px" }
                                                         ],
                                                editable: "inline"                            
                                            });          
Thanks,
Amol

[Craig]

You need to define the ID field in the model.

e.g.

model: {    
id: "ColumnId",
 fields: {