Kendo UI grid not calling the webservice - kendo-ui

Question

I am new to Kendo UI, I have a grid which I populate from a asmx webservice in JSON format, it displays the data fine. I have enabled editing, but when I click the update button nothing happens, I am not getting to the breakpoint in my webmethod.
Here is the relevant code snipets.
Thanks
//references
<link href="Content/kendo/2012.3.1114/kendo.common.min.css" rel="Stylesheet" />
<link href="Content/kendo/2012.3.1114/kendo.default.min.css" rel="Stylesheet" />
<script src="Scripts/jquery-1.8.3.js" type="text/javascript"></script>
<script src="Scripts/kendo/2012.3.1114/kendo.web.min.js" type="text/javascript"></script>
//Data Model Classes
[Serializable]
public class Make
{
public int PhoneMakeID { get; set; }
public string PhoneMakeDesc { get; set; }
public string BillingDesc { get; set; }
}
//Web Methods
//Phone Make Get that populates the grid, works 100%
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public List<Make> GetPhoneMakes(string Active, string OfferTypeID, string TrackMonthID, string NetworkID)
{
DataTable dtPhoneMakes = new DataTable();
Microsoft.Practices.EnterpriseLibrary.Data.Database db = DatabaseFactory.CreateDatabase("PricingConnection");
DbCommand dbCommand = null;
dbCommand = db.GetStoredProcCommand("uspPS_PhoneMake_Get");
db.AddInParameter(dbCommand, "#OfferTypeID", DbType.String, OfferTypeID);
db.AddInParameter(dbCommand, "#TrackMonthID", DbType.String, TrackMonthID);
db.AddInParameter(dbCommand, "#NetworkID", DbType.String, NetworkID);
db.AddInParameter(dbCommand, "#Active", DbType.String, Active);
dtPhoneMakes = db.ExecuteDataSet(dbCommand).Tables[0];
List<Make> ml = new List<Make>();
Make m;
foreach (DataRow dr in dtPhoneMakes.Rows)
{
m = new Make();
m.PhoneMakeID = Convert.ToInt32(dr["PhoneMakeID"].ToString());
m.PhoneMakeDesc = dr["PhoneMakeDesc"].ToString();
m.BillingDesc = dr["BillingDesc"].ToString();
ml.Add(m);
}
return ml;
}
//Phone Make Update, not getting to here
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public void UpdatePhoneMakes(string PhoneMakeID, string PhoneMakeDesc, string BillingDesc)
{
Microsoft.Practices.EnterpriseLibrary.Data.Database db = DatabaseFactory.CreateDatabase("PricingConnection");
DbCommand dbCommand = null;
dbCommand = db.GetStoredProcCommand("uspPS_PhoneMake_Update");
db.AddInParameter(dbCommand, "#PhoneMakeID", DbType.String, PhoneMakeID);
db.AddInParameter(dbCommand, "#PhoneMakeDesc", DbType.String, PhoneMakeDesc);
db.AddInParameter(dbCommand, "#BillingDesc", DbType.String, BillingDesc);
db.ExecuteNonQuery(dbCommand);
}
//Transports
var transpPhoneMake = {
read: function (options) {
$.ajax({
type: "POST",
url: "webmethods/phones.asmx/GetPhoneMakes",
contentType: "application/json; charset=utf-8",
data: jdPhoneMake,
dataType: 'json',
success: function (msg) {
options.success(msg);
}
});
},
update: function (options) {
url: "webmethods/phones.asmx/UpdatePhoneMakes/";
contentType: "application/json; charset=utf-8";
type: "POST";
},
parameterMap: function (data, operation) {
if (operation != "read") {
return JSON.stringify({ products: data.models })
}
else {
data = $.extend({ sort: null, filter: null }, data);
return JSON.stringify(data);
}
}
};
//DataSources
var dsPhoneMake = new kendo.data.DataSource({
transport: transpPhoneMake,
schema:
{
data: "d",
total: "d.length",
model:
{
id: "PhoneMakeID",
fields:
{
PhoneMakeID: { type: "string", editable: false, nullable: true },
PhoneMakeDesc: { type: "string", editable: true },
BillingDesc: { type: "string", editable: true }
}
}
},
pageSize: 10,
sort:
{
field: "PhoneMakeDesc",
dir: "asc"
}
});
//Grids
var gridPhoneMakes = $("#gridPhoneMakes").kendoGrid({
dataSource: dsPhoneMake,
columns:
[
{ command: ["edit", "destroy"], title: " ", width: "175px" },
{
field: "PhoneMakeID",
title: "Make ID",
filterable: false,
editable: false,
width: 75
},
{
field: "PhoneMakeDesc",
title: "Make Description",
editable: true
},
{
field: "BillingDesc",
title: "Make Code",
editable: true
}
],
toolbar: kendo.template($("#tmplPhoneMakeToolbar").html()),
selectable: "row",
sortable: true,
groupable: true,
pageable: true,
filterable: true,
autoBind: false,
editable: "inline",
batch: false
});

Answer 1

Your transport definition says:
update: function (options) {
url: "webmethods/phones.asmx/UpdatePhoneMakes/";
contentType: "application/json; charset=utf-8";
type: "POST";
},
When you are actually not defining a function. It should be something like:
update: {
url: "webmethods/phones.asmx/UpdatePhoneMakes/",
contentType: "application/json; charset=utf-8",
type: "POST",
},
But all transport definitions must be consistent (Excerpt from KendoUI documentation)
Note: transport methods should be consistent - create, update and
destroy should be specified as functions too
(Thanks #LindsySimon for the remark)
You should do as you did for read:
read: function (options) {
$.ajax({
url: "webmethods/phones.asmx/UpdatePhoneMakes/",
contentType: "application/json; charset=utf-8",
type: "POST",
success: function (result) {
...
}
});
}