用于 jquery 的 Telerik Kendo 网格不显示数据
Posted
技术标签:
【中文标题】用于 jquery 的 Telerik Kendo 网格不显示数据【英文标题】：Telerik Kendo grid for jquery does not show data 【发布时间】：2020-12-02 12:49:48 【问题描述】：我的剑道网格定义如下：
var dataSource = new kendo.data.DataSource(
batch: false,
autoSync: true,
transport:
read:
url: "/monitoring/matrix/routecontentrules?format=json",
contentType: "application/json; charset=utf-8",
dataType: "json",
type: "POST",
timeout: 30000
,
update:
url: "/monitoring/matrix/routecontentrules/updateroutecontentrule",
contentType: "application/json; charset=utf-8",
dataType: "json",
type: "PUT"
,
create:
url: "/monitoring/matrix/routecontentrules/createroutecontentrule",
contentType: "application/json; charset=utf-8",
dataType: "json",
type: "POST"
,
destroy:
url: "/monitoring/matrix/routecontentrules/deleteroutecontentrule",
contentType: "application/json; charset=utf-8",
dataType: "json",
type: "DELETE"
,
parameterMap: function (data, operation)
if (operation == "read")
return kendo.stringify(
RouteId: routeDataItem.RouteId
);
else if (operation == "destroy")
return kendo.stringify(
Id: data.Id,
);
else
return kendo.stringify(
Id: data.Id,
RouteId: routeDataItem.RouteId,
OrderId: data.OrderId,
SenderMatch: data.SenderMatch,
ContentMatch: data.ContentMatch,
SenderReplace: data.SenderReplace,
ContentReplace: data.ContentReplace,
);
,
schema:
model:
id: "Id",
fields:
Id: type: "number", defaultValue: 0 ,
OrderId: type: "number", defaultValue: 0 ,
SenderMatch: type: "string", defaultValue: "" ,
ContentMatch: type: "string", defaultValue: "" ,
SenderReplace: type: "string", defaultValue: "" ,
ContentReplace: type: "string", defaultValue: ""
);$("#Grid").kendoGrid(
dataSource: dataSource,
reorderable: false,
resizable: false,
sortable: false,
groupable: false,
scrollable: true,
navigatable: true,
editable: true,
columns: [
width: 150, field: "SenderMatch", title: "Sender match",
template: "<span><label class='SenderMatch'</label></span>",
headerAttributes: title: "Sender match", style: "text-align: right" , attributes: style: "text-align: right"
,
width: 150, field: "ContentMatch", title: "Content match",
template: "<span><label class='SenderMatch'</label></span>",
headerAttributes: title: "Content match", style: "text-align: right" , attributes: style: "text-align: right"
,
width: 150, field: "SenderReplace", title: "Sender replace",
template: "<span><label class='SenderMatch'</label></span>",
headerAttributes: title: "Sender replace", style: "text-align: right" , attributes: style: "text-align: right"
,
width: 150, field: "ContentReplace", title: "Content replace",
template: "<span><label class='SenderMatch'</label></span>",
headerAttributes: title: "Content replace", style: "text-align: right" , attributes: style: "text-align: right"
,
command: [
name: "destroy", template: "<a class='k-button k-grid-delete delete'><span class='k-sprite px-sprite px-i-sm-trash'></span></a>"
],
width: "50px"
],
toolbar: kendo.template('<span class="ReloadManipulationByCustomer" style=""><span class="k-icon k-i-refresh refresh-btn"></span></span><a class="k-button k-grid-add add-btn" href="javascript:void(0)"><span class="k-sprite px-sprite px-i-sm-new new" />Add</a>'));$(".ReloadManipulationByCustomer").click(function ()
$("#Grid").data("kendoGrid").dataSource.read(););
对于我使用 ServiceStack 的后端，请求定义如下：
[Route("/monitoring/matrix/routecontentrules/createroutecontentrule", "POST")]
[Route("/monitoring/matrix/routecontentrules/updateroutecontentrule", "PUT")]
public sealed class CreateUpdateRouteContentRuleRequest
public int Id get; set;
public int OrderId get; set;
public int RouteId get; set;
public string SenderMatch get; set;
public string ContentMatch get; set;
public string SenderReplace get; set;
public string ContentReplace get; set;
[Route("/monitoring/matrix/routecontentrules")]
public sealed class RouteContentRulesRequest
public int RouteId get; set;
[Route("/monitoring/matrix/routecontentrules/deleteroutecontentrule")]
public sealed class DeleteRouteContentRuleRequest
public int Id get; set;
public sealed class RouteContentRuleModel
public int Id get; set;
public int OrderId get; set;
public int RouteId get; set;
public string SenderMatch get; set;
public string ContentMatch get; set;
public string SenderReplace get; set;
public string ContentReplace get; set;
获取数据的代码如下：
public object Post(RouteContentRulesRequest request)
return _dbConnectionFactory
.OpenReadOnlyAndRun(dbConn => dbConn.Select<RouteContentRule>(r => r.RouteId == request.RouteId).OrderBy(r => r.OrderId));
public object Any(CreateUpdateRouteContentRuleRequest request)
RouteContentRule entity;
if (!Db.Exists<Route>(new Id = request.RouteId ))
throw new HttpError(HttpStatusCode.BadRequest, $"Route with id request.RouteId does not exist");
if (request.Id != 0)
var routeContentRule = _dbConnectionFactory.OpenReadOnlyAndRun(dbConn => dbConn.SingleById<RouteContentRule>(request.Id));
entity = request.ToEntity(routeContentRule);
Db.Update(entity, r => r.Id == routeContentRule.Id);
return entity.ToModel();
entity = request.ToEntity();
entity.OrderId = (_dbConnectionFactory.OpenReadOnlyAndRun(dbConn => dbConn.Scalar<RouteContentRule, int?>(x => Sql.Max(x.OrderId), x => x.RouteId == request.RouteId)) ?? 0) + 1;
var id = (int)Db.Insert(entity, true);
entity.Id = id;
return entity.ToModel();
public void Delete(DeleteRouteContentRuleRequest request)
Db.Delete<RouteContentRule>(new Id = request.Id);
读取请求时的数据如下：
[
"Id":35,
"OrderId":1,
"RouteId":72303,
"SenderMatch":"335",
"ContentMatch":"",
"SenderReplace":"",
"ContentReplace":""
,
"Id":36,
"OrderId":2,
"RouteId":72303,
"SenderMatch":"55",
"ContentMatch":"",
"SenderReplace":"",
"ContentReplace":""
]
以下是来自 Chrome 开发者工具的图片：
问题是网格没有显示这些数据。如果我单击网格单元格，我可以看到数据在这里。在这种情况下，单元格变为可编辑并显示数据的当前值。但是一旦我将编辑移动到一些新的单元格，以前的隐藏数据。我正在检查单元格，我发现当单元格不编辑时，它的描述如下：
<td style="text-align: right" aria-describedby="50349c08-da61-49d2-aa73-9c0823d4a4a4" role="gridcell">
<span><label class="SenderMatch" <="" label=""></label></span>
</td>
当单元格处于编辑模式时，它在 html 中描述如下：
<td style="text-align: right" aria-describedby="ccc2df23-b49a-4b00-820a-02a67c428a52" role="gridcell" id="Grid_active_cell" class="k-edit-cell" data-role="editable">
<input type="text" class="k-input k-textbox" name="SenderMatch" data-bind="value:SenderMatch">
</td>
我不知道为什么没有显示数据。据我所知，它应该显示数据，但它没有显示这些数据。
【问题讨论】：
【参考方案1】：你为什么要在你的类中添加[Route] 属性......？他们应该在Controller的Action上。
然后你可以打开Chrome的开发工具，查看network标签，查看数据是否正在发送到后端。
您认为应该获取数据时，可以粘贴network的图片给我们看，然后我们可以检查是什么问题。
【讨论】：
我从 chrome 开发工具上传了图片。关于 Route 属性。这是服务堆栈的约定。正如我在问题中所说，我在后端使用 Service Stack，而不是经典的 MVC。【参考方案2】：我知道问题出在哪里了。
columns: [
width: 150, field: "SenderMatch", title: "Sender match",
template: "<span><label class='SenderMatch'</label></span>",
headerAttributes: title: "Sender match", style: "text-align: right" , attributes: style: "text-align: right"
,
width: 150, field: "ContentMatch", title: "Content match",
template: "<span><label class='SenderMatch'</label></span>",
headerAttributes: title: "Content match", style: "text-align: right" , attributes: style: "text-align: right"
,
width: 150, field: "SenderReplace", title: "Sender replace",
template: "<span><label class='SenderMatch'</label></span>",
headerAttributes: title: "Sender replace", style: "text-align: right" , attributes: style: "text-align: right"
,
width: 150, field: "ContentReplace", title: "Content replace",
template: "<span><label class='SenderMatch'</label></span>",
headerAttributes: title: "Content replace", style: "text-align: right" , attributes: style: "text-align: right"
,
command: [
name: "destroy", template: "<a class='k-button k-grid-delete delete'><span class='k-sprite px-sprite px-i-sm-trash'></span></a>"
],
width: "50px"
],
模板有问题。我删除了它们，现在显示了数据。命令模板仍然有效。
【讨论】：
您在模板的标签中缺少大于号字符：...class='SenderMatch'><...以上是关于用于 jquery 的 Telerik Kendo 网格不显示数据的主要内容，如果未能解决你的问题，请参考以下文章
通过 JQuery 或服务器端获取 Kendo Recurrence Editor Pattern
Telerik/ Kendo MVC Grid，按需加载网格，而不是页面加载