如何在运行时将 Kendo Grid 与 System.Data.DataTable 绑定
Posted
技术标签:
【中文标题】如何在运行时将 Kendo Grid 与 System.Data.DataTable 绑定【英文标题】：How to bind Kendo Grid with System.Data.DataTable at runtime 【发布时间】：2014-09-14 14:04:20 【问题描述】：我需要在按钮单击的弹出窗口中打开 Kendo Grid。在按钮单击服务器返回 DataTable 具有动态列（即 1 到 n 列数）。在按钮单击我得到 DataTable 使用 jQuery ajax 打电话。但我无法绑定该数据。 如何解决此问题
【问题讨论】：
请发布您到目前为止所做的代码。所以我们可以为您提供帮助。 我没有代码...请告诉我，如何使用 jquery 绑定它 查看我的帖子，如果您有任何疑问，请告诉我。 @桑迪 【参考方案1】：其实也很简单快捷，见下图：
@model System.Data.DataTable
@(html.Kendo().Grid(Model)
.Name("DayViewGrid")
.Columns(columns =>
foreach (System.Data.DataColumn column in Model.Columns)
columns.Bound(column.ColumnName).Title(column.Caption);
)
.Scrollable(scr => scr.Height(600))
.DataSource(dataSource => dataSource
.Ajax()
.Model(model =>
model.Id(Model.Columns[0].ColumnName);
foreach (System.Data.DataColumn column in Model.Columns)
if(column.Ordinal > 0)
model.Field(column.ColumnName, column.DataType);
)
)
)
如果这不是您要找的，请告诉我？
【讨论】：
感谢您的回复。就我而言，我没有模型。我必须使用 jQuery 绑定 Grid。 使用上述代码创建另一个视图并调用 Action 从控制器获取上述视图并将结果直接分配给一个 div，该 div 将整理您的值。所以我要说的是，不是让 DataTable 将 Dattable 返回到您创建的上述新视图，然后将视图 html 代码分配给 div @D_Learning：太好了……你节省了我的时间【参考方案2】：这样试试，
脚本
<script type="text/javascript">
$(function ()
schmebind();
);
function schmebind()
var schemaModel = ;
var type;
var IsEditable = false;
var dateColumnArray = [];
$.each(JaiminField, function (index, da)
type = (da.type == undefined || da.type == 'number' || da.type == 'date') ? 'string' : da.type;
schemaModel[da.field] = type: type, editable: false ;
if (da.type == 'date')
dateColumnArray.push(da.field);
);
var schemaModelNew = kendo.data.Model.define(
id: "$id",
fields: schemaModel,
nullable: true
);
var knownOutagesDataSource = new kendo.data.DataSource(
data: Jaimin,
pageSize: 10,
batch: true,
schema:
model: schemaModelNew
);
CreateGrid("#DynamicGrid", knownOutagesDataSource, dateColumnArray, null, null)
function CreateGrid(targetId, data, columnModel, detailTemplate, detailInit)
$(targetId).kendoGrid(
dataSource: data,
selectable: "row",
detailTemplate: detailTemplate,
detailInit: detailInit,
columns: columnModel,
filterable: false,
sortable: true,
dataBound: function (e)
if (e.sender._data.length == 0)
var mgs, col;
mgs = "No results found for";
col = 9;
var contentDiv = this.wrapper.children(".k-grid-content"),
dataTable = contentDiv.children("table");
if (!dataTable.find("tr").length)
dataTable.children("tbody").append("<tr><td colspan='" + col + "'><div style='color:red;width:500px'>" + mgs + "</div></td></tr>");
if (navigator.userAgent.match(/MSIE ([0-9]+)\./))
dataTable.width(this.wrapper.children(".k-grid-header").find("table").width());
contentDiv.scrollLeft(1);
,
pageable:
previousNext: true,
numeric: false,
messages:
empty: "No data"
,
navigatable: true,
scrollable: true,
resizable: true
);
</script>
查看
<div id="DynamicGrid">
</div>
Json 文件
var Jaimin = [
$id: "3", ActiveFlag: "1", CreatedBy: "Admin", TriageTypeId: 3, TriageTypeKey: "DATAUSAGE_PROVISIONING", TriageTypeName: "Data usage Provisioning", TriageTypeOrder: 3 ,
$id: "4", ActiveFlag: "1", CreatedBy: "Admin", TriageTypeId: 4, TriageTypeKey: "DATAUSAGE_PROVISIONING", TriageTypeName: "Device Issues", TriageTypeOrder: 4 ,
$id: "5", ActiveFlag: "1", CreatedBy: "Admin", TriageTypeId: 5, TriageTypeKey: "DATAUSAGE_PROVISIONING", TriageTypeName: "Known Outages", TriageTypeOrder: 5 ,
$id: "6", ActiveFlag: "1", CreatedBy: "Admin", TriageTypeId: 6, TriageTypeKey: "DATAUSAGE_PROVISIONING", TriageTypeName: "Coverage", TriageTypeOrder: 6 ,
$id: "7", ActiveFlag: "1", CreatedBy: "Admin", TriageTypeId: 7, TriageTypeKey: "DATAUSAGE_PROVISIONING", TriageTypeName: "Known Issues", TriageTypeOrder: 7 ,
$id: "8", ActiveFlag: "1", CreatedBy: "Admin", TriageTypeId: 8, TriageTypeKey: "DATAUSAGE_PROVISIONING", TriageTypeName: "SIVR", TriageTypeOrder: 8 ,
$id: "9", ActiveFlag: "1", CreatedBy: "Admin", TriageTypeId: 9, TriageTypeKey: "DATAUSAGE_PROVISIONING", TriageTypeName: "Grand Central - Device", TriageTypeOrder: 9 ,
$id: "10", ActiveFlag: "1", CreatedBy: "Admin", TriageTypeId: 10, TriageTypeKey: "DATAUSAGE_PROVISIONING", TriageTypeName: "Grand Central - Coverage", TriageTypeOrder: 10 ,
$id: "11", ActiveFlag: "1", CreatedBy: "Admin", TriageTypeId: 11, TriageTypeKey: "DATAUSAGE_PROVISIONING", TriageTypeName: "Grand Central - Account", TriageTypeOrder: 11 ,
$id: "12", ActiveFlag: "0", CreatedBy: "Admin", TriageTypeId: 12, TriageTypeKey: "DATAUSAGE_PROVISIONING", TriageTypeName: "Network Type", TriageTypeOrder: 12 ,
$id: "13", ActiveFlag: "1", CreatedBy: "Admin", TriageTypeId: 13, TriageTypeKey: "DATAUSAGE_PROVISIONING", TriageTypeName: "Known outages", TriageTypeOrder: 13 ,
$id: "14", ActiveFlag: "1", CreatedBy: "Admin", TriageTypeId: 14, TriageTypeKey: "DATAUSAGE_PROVISIONING", TriageTypeName: "Local Site Issues", TriageTypeOrder: 14 ,
$id: "15", ActiveFlag: "1", CreatedBy: "Admin", TriageTypeId: 15, TriageTypeKey: "DATAUSAGE_PROVISIONING", TriageTypeName: "Previous Complaints", TriageTypeOrder: 15 ,
$id: "16", ActiveFlag: "1", CreatedBy: "Admin", TriageTypeId: 16, TriageTypeKey: "DATAUSAGE_PROVISIONING", TriageTypeName: "IMEI blocked", TriageTypeOrder: 16 ,
$id: "17", ActiveFlag: "1", CreatedBy: "Admin", TriageTypeId: 17, TriageTypeKey: "DATAUSAGE_PROVISIONING", TriageTypeName: "High Speed Data Throttled", TriageTypeOrder: 17 ,
$id: "18", ActiveFlag: "1", CreatedBy: "Admin", TriageTypeId: 18, TriageTypeKey: "DATAUSAGE_PROVISIONING", TriageTypeName: "Tethering / Hotspot Blocked", TriageTypeOrder: 18 ,
$id: "19", ActiveFlag: "1", CreatedBy: "Admin", TriageTypeId: 19, TriageTypeKey: "DATAUSAGE_PROVISIONING", TriageTypeName: "Retrieving on-device diagnostics", TriageTypeOrder: 19 ,
$id: "20", ActiveFlag: "1", CreatedBy: "Admin", TriageTypeId: 20, TriageTypeKey: "DATAUSAGE_PROVISIONING", TriageTypeName: "Retrieving Device Settings", TriageTypeOrder: 20 ,
$id: "21", ActiveFlag: "1", CreatedBy: "Admin", TriageTypeId: 21, TriageTypeKey: "DATAUSAGE_PROVISIONING", TriageTypeName: "Scanning Applications", TriageTypeOrder: 21 ,
$id: "22", ActiveFlag: "1", CreatedBy: "Admin", TriageTypeId: 22, TriageTypeKey: "DATAUSAGE_PROVISIONING", TriageTypeName: "Checking Software Version", TriageTypeOrder: 22]
var JaiminField = [
field: "$id", type: "int" ,
field: "ActiveFlag", type: "int" ,
field: "CreatedBy", type: "string" ,
field: "TriageTypeId", type: "int" ,
field: "TriageTypeKey", type: "string" ,
field: "TriageTypeName", type: "string" ,
field: "TriageTypeOrder", type: "number"
]
演示： http://jsbin.com/honavive/1
如果您有任何问题，请告诉我。
【讨论】：
【参考方案3】：首先，您需要使用 Newtonsoft.Json 库对 DataTable 进行序列化。这会将数据创建为键值对中的 json 字符串。
完成后，在客户端将数据绑定到剑道网格并使用第一行数据生成列。
columns: generateColumns(gridData[0])
function generateColumns(firstRow)
var colums = [];
for (var property in firstRow)
var col =
field: property,
title: property,
width: 0,
template:""//specify your template here,
attributes:''//specify your td attributes here
colums.push(col);
return colums;
如果这对您有帮助，请告诉我。如果你有的话，我可以更新你的 jsfiddle。
【讨论】：
感谢您的回复。你能详细说明一下吗？ 我有同样的要求，列是动态的，需要在剑道网格中呈现。我需要你的代码来解释你可以做哪些改变来实现这个功能。以上是关于如何在运行时将 Kendo Grid 与 System.Data.DataTable 绑定的主要内容，如果未能解决你的问题，请参考以下文章
如何在 kendo.ui.grid 中创建自定义 kendo.ui.Window 以进行编辑
如何将 Kendo UI Grid 与 ToDataSourceResult()、IQueryable<T>、ViewModel 和 AutoMapper 一起使用？