[英]Kendo Grid how to datasource update,create,delete
for some reasons i cannot use MVC-wrapper of Kendo grid.So i am trying to build Kendo grid on Javascript. 由于某些原因,我无法使用Kendo grid的MVC包装器。因此,我正在尝试在Javascript上构建Kendo网格。
There are 2 main problems when trying to update or create records on grid. 尝试在网格上更新或创建记录时有两个主要问题。
1-)All operations(destroy,update,create) on grid just go to create action by Datasource's of Kendo grid.For example after update a record , datasource send data to this url to many times(number of columns): http://localhost:63186/Administrator/DefinitionDetailCreate
.It should pass values to : 1-)网格上的所有操作(销毁,更新,创建)都将由Kendo网格的数据源创建动作。例如,更新记录后,数据源将数据多次发送到此url(列数):
http://localhost:63186/Administrator/DefinitionDetailCreate
值传递给:
http://localhost:63186/Administrator/DefinitionDetailUpdate
2-)After operation(update or create) Grid sends all data to Action Method instead of new or updated data.So it sends requests the number of columns on grid 2-)操作(更新或创建)后,网格将所有数据而不是新的或更新的数据发送到操作方法,因此它发送请求以显示网格上的列数
JS: JS:
var dataItem = this.dataItem($(e.target).closest("tr"));
var code = dataItem.CODE;
// alert(code);
var crudServiceBaseUrl = "/Administrator/",
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: '@Url.Action("DefinitionDetailRead", "Administrator")',
data: { DefinitionCode: code },
dataType: "json"
},
update: {
url: '@Url.Action("DefinitionDetailUpdate", "Administrator")' ,
type: "POST",
dataType: "text"
},
destroy: {
url: '@Url.Action("DefinitionDetailDelete", "Administrator")',
type: "POST",
dataType: "text",
},
create: {
url: '@Url.Action("DefinitionDetailCreate", "Administrator")',
type: "POST",
dataType: "text",
} },
// batch: true,
pageSize: 9,
schema: {
data: "Data",
model: {
ID: "ID",
fields: {
ID: { editable: false, nullable: true },
DESCRIPTION: { validation: { required: true } }
}
}
}
});
$("#detailsGrid").kendoGrid({
dataSource: dataSource,
attributes: { style: "padding-left: 0px; font-size: 14px"},
pageable: {refresh: false, pageSizes: false, buttonCount: 5},
toolbar: ["create"],
columns: [
{field: "DESCRIPTION", title: "DESCRIPTION", width: "200px"},
{ command: ["edit", "destroy"], title: "Operasyon", width: "100px" }],
editable: "popup"
});
Controller: 控制器:
[HttpPost]
public ActionResult DefinitionDetailUpdate(Guid ID,Guid REFERENCEID,string DESCRIPTION)
{
return null;
}
[HttpPost]
public ActionResult DefinitionDetailCreate(Guid ID, Guid REFERENCEID, string DESCRIPTION)
{
return null;
}
First you might need to add parameterMap , this will help identify server side methods: 首先,您可能需要添加parameterMap ,这将有助于识别服务器端方法:
parameterMap: function (options, operation) {
var out = null;
switch (operation) {
case "create":
out = '{ "param":' + options.somevalue + '}';
break;
case "read":
out = '{ "id":' + options.somevalue + '}';
break;
case "update":
out = '{ "id":' + options.somevalue + '}';
break;
case "destroy":
out = '{ "id": ' + options.somevalue + '}';
break;
}
return out;
} }
I would also suggest to keep all the dataTypes as dataType: "json"
我还建议将所有dataTypes保留为
dataType: "json"
Also you seem to be missing contentType
in your transports definitions : 另外,您似乎在传输定义中缺少
contentType
:
update: {
url: _op.serviceBaseUrl + "Update",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
complete: function (jqXhr, textStatus) {
}
},
i have posted answer for the same type of question, you may have a check 我已经发布了针对同一类型问题的答案 ,您可能已经查看了
or 要么
you may Use this code 您可以使用此代码
js JS
var dataItem = this.dataItem($(e.target).closest("tr"));
var code = dataItem.CODE;
// alert(code);
var crudServiceBaseUrl = "/Administrator/",
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: '@Url.Action("DefinitionDetailRead", "Administrator")',
type: "POST",
dataType: "json"
},
update: {
url: '@Url.Action("DefinitionDetailUpdate", "Administrator")' ,
type: "POST",
dataType: "json"
},
destroy: {
url: '@Url.Action("DefinitionDetailDelete", "Administrator")',
type: "POST",
dataType: "json",
},
create: {
url: '@Url.Action("DefinitionDetailCreate", "Administrator")',
type: "POST",
dataType: "json",
},
parameterMap: function (options, operation) {
if (operation !== "read" && options.models) {
return { models: kendo.stringify(options.models) };
}
} },
// batch: true,
pageSize: 9,
schema: {
data: "Data",
model: {
ID: "ID",
fields: {
ID: { editable: false, nullable: true },
DESCRIPTION: { validation: { required: true } }
}
}
}
});
$("#detailsGrid").kendoGrid({
dataSource: dataSource,
attributes: { style: "padding-left: 0px; font-size: 14px"},
pageable: {refresh: false, pageSizes: false, buttonCount: 5},
toolbar: ["create"],
columns: [
{field: "DESCRIPTION", title: "DESCRIPTION", width: "200px"},
{ command: ["edit", "destroy"], title: "Operasyon", width: "100px" }],
editable: "popup"
});
Controller 调节器
[HttpPost]
public ActionResult DefinitionDetailUpdate(string models)
{
//Deserialize to object
IList<UrObjectType> objName= new JavaScriptSerializer().Deserialize<IList<UrObjectType>>(models);
return Json(objName)
}
[HttpPost]
public ActionResult DefinitionDetailCreate(string models)
{
//Deserialize to object
IList<UrObjectType> objName= new JavaScriptSerializer().Deserialize<IList<UrObjectType>>(models);
return Json(objName)
}
Note that parameterMap: function() send updated data in serialize string format with name models so you should use " models " as parameter name in your action 请注意,parameterMap:function()使用名称模型以序列化字符串格式发送更新的数据,因此您应在操作中使用“ models ”作为参数名称
i hope this will help you:) 我希望这能帮到您:)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.