关键词：
【中文标题】如何在运行时将 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。
【讨论】：
感谢您的回复。你能详细说明一下吗？ 我有同样的要求，列是动态的，需要在剑道网格中呈现。我需要你的代码来解释你可以做哪些改变来实现这个功能。如何将 JSON 数据与 Kendo Grid 绑定
】如何将JSON数据与KendoGrid绑定【英文标题】：HowtobindJSONdatawithKendoGrid【发布时间】：2014-03-2109:24:01【问题描述】：使用我的WCF服务我正在公开JSON数据：[OperationContract][WebGet(ResponseFormat=WebMessageFormat.Json)]List<ProductDetails>GetProduc... 查看详情
如何在 kendo.ui.grid 中创建自定义 kendo.ui.Window 以进行编辑
】如何在kendo.ui.grid中创建自定义kendo.ui.Window以进行编辑【英文标题】：howtocreatecustomkendo.ui.Windowforeditinkendo.ui.grid【发布时间】：2013-08-1112:09:11【问题描述】：我是kendo.Ui的初学者，我编写此代码用于创建网格@(Html.Kendo().Grid<Bran... 查看详情
如何在 Kendo UI Grid 上执行服务器端过滤
】如何在KendoUIGrid上执行服务器端过滤【英文标题】：HowtoperformserversidefilteringonKendoUIGrid【发布时间】：2018-08-1502:48:12【问题描述】：我正在尝试为KendoUI网格实现服务器端过滤（仅限客户端）。我不确定如何传递过滤器运算符和... 查看详情
如何在页面加载时将 Kendo 网格高度设置为固定值
】如何在页面加载时将Kendo网格高度设置为固定值【英文标题】：HowtoSetKendogridheighttoafixedvalueonpageload【发布时间】：2014-11-2000:52:44【问题描述】：我正在尝试获得具有静态高度和宽度的剑道网格。当我翻页时，它绝对不能改变高... 查看详情
如何在 Kendo Grid MVC 中设置列宽以自动调整
】如何在KendoGridMVC中设置列宽以自动调整【英文标题】：HowtosetcolumnwidthtoautofitinKendoGridMVC【发布时间】：2015-04-1615:24:00【问题描述】：我使用具有多列的剑道网格页面。我想将列宽设置为自动调整并自动更改宽度。请帮帮我... 查看详情
如何在 Kendo Grid 中隐藏列组
】如何在KendoGrid中隐藏列组【英文标题】：HowtoHideColumnGroupinKendoGrid【发布时间】：2017-04-2613:50:15【问题描述】：我想在我的剑道网格中隐藏一个列组，我的列组下面有五列，我想隐藏所有五列以及列组。任何帮助将不胜感激。... 查看详情
如何在 Kendo UI Grid 中获得行号
】如何在KendoUIGrid中获得行号【英文标题】：HowCanIHaveRowNumberInKendoUIGrid【发布时间】：2014-02-0210:34:51【问题描述】：我在asp.netmvc中有剑道网格，我使用服务器包装器。我想要名为“行号”的附加列，它是简单的计数器(1,2,3,...)。... 查看详情
如何在 Kendo UI Grid 中定义数据绑定，语法非常混乱？
】如何在KendoUIGrid中定义数据绑定，语法非常混乱？【英文标题】：HowcanidefinedataboundinKendoUIGrid,syntaxisveryconfusing?【发布时间】：2020-09-0323:29:51【问题描述】：我有一个Kedno-Grid，详细信息如下：这是数据源：vardata=$scope.salesgroups;va... 查看详情
如何使用 JQuery 在 Kendo Ui Grid 上刷新“页脚”
】如何使用JQuery在KendoUiGrid上刷新“页脚”【英文标题】：HowcanIrefresh"footer"onKendoUiGridusingJQuery【发布时间】：2021-09-1601:31:51【问题描述】：我设置了KendoUi网格和页脚，页脚将获得总价，但它总是无法获得最后的数据。希... 查看详情
如何使用 AngularJS 在 Kendo Grid Column Template 中使用函数
】如何使用AngularJS在KendoGridColumnTemplate中使用函数【英文标题】：HowtousefunctioninKendoGridColumnTemplatewithAngularJS【发布时间】：2014-07-3115:10:53【问题描述】：我在Kendo网格中有一个列，我想在渲染时执行一些特定的逻辑，并且正在使... 查看详情
如何在 Kendo Grid 中设置列优先级
】如何在KendoGrid中设置列优先级【英文标题】：HowtosetColumnPriorityinKendoGrid【发布时间】：2021-03-1816:18:40【问题描述】：我正在使用剑道网格，并且我有如下所示的列数组columns:[field:"Column1",title:"Column1",width:"120px",field:"Column2",t... 查看详情
Kendo Grid 如何更新、创建、删除数据源
】KendoGrid如何更新、创建、删除数据源【英文标题】：KendoGridhowtodatasourceupdate,create,delete【发布时间】：2014-05-1423:59:03【问题描述】：由于某些原因，我不能使用Kendo网格的MVC包装器。所以我正在尝试在JavaScript上构建剑道网格。... 查看详情
如何在 Kendo Grid MVC 中编辑外部模型数据表单视图
】如何在KendoGridMVC中编辑外部模型数据表单视图【英文标题】：howtoedittheexternalmodeldataformviewinKendoGridMVC【发布时间】：2016-04-1217:34:59【问题描述】：我在弄清楚如何在KendoGridMVC编辑弹出窗口中实现多模型编辑时遇到问题？我有一... 查看详情
Kendo UI Grid：如何使单元格在条件下只读
】KendoUIGrid：如何使单元格在条件下只读【英文标题】：KendoUIGrid:howtomakecellreadonlyoncondition【发布时间】：2014-07-3106:17:30【问题描述】：在KendoUIGrid（使用Angularjs）中，我有以下网格：<divkendo-gridk-data-source="Table"k-options="thingsOptio... 查看详情
如何将 Kendo UI Grid 与 ToDataSourceResult()、IQueryable<T>、ViewModel 和 AutoMapper 一起使用？
】如何将KendoUIGrid与ToDataSourceResult()、IQueryable<T>、ViewModel和AutoMapper一起使用？【英文标题】：HowtouseKendoUIGridwithToDataSourceResult(),IQueryable<T>,ViewModelandAutoMapper?【发布时间】：2013-05-0506:22:15【问题描述】：什么是负载/滤波... 查看详情
与 Kendo-ui Grid 反应 - 错误的列标题
】与Kendo-uiGrid反应-错误的列标题【英文标题】：ReactwithKendo-uiGrid-Wrongcolumnheader【发布时间】：2019-02-0818:20:02【问题描述】：我有一个使用redux作为状态管理器的React应用程序。在这个应用程序中，我们决定使用KendoUi网格。第一个... 查看详情
MVC Grid 的 Kendo UI 如何隐藏 ID 列
】MVCGrid的KendoUI如何隐藏ID列【英文标题】：KendoUIforMVCGridHowdoIhidetheIDcolumn【发布时间】：2012-06-2723:40:52【问题描述】：我想隐藏Kendo网格的ID列，但仍然可以在其他操作中引用它。我尝试使Width=0但这只会使它变得非常宽。@(Html.Ken... 查看详情
如何在 Kendo Grid + Angular 4 中以编程方式设置选定行？
】如何在KendoGrid+Angular4中以编程方式设置选定行？【英文标题】：HowtosetselectedrowprogrammaticallyinKendoGrid+Angular4?【发布时间】：2017-09-2017:43:00【问题描述】：我在Angular4+TypeScript+KendoUI上有应用程序。我还有一个包含用户表的页面。... 查看详情