如何在运行时将Kendo Grid与System.Data.DataTable绑定
我需要在Button Click上弹出一个Kendo Grid 。 在按钮上单击服务器返回DataTable ，其中包含动态列（即1到n个列）。单击按钮，我使用jQuery ajax调用获取DataTable 。 但是我无法绑定那些数据。 如何解决此问题
试试这样，
脚本
视图
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
如果您有任何疑虑，请告诉我。
它实际上非常简单快捷，见下文：
@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); } } ) ) )
如果这不是你想要的，请告诉我？
首先，您需要序列化DataTableusing Newtonsoft.Json库。 这将在键值对中将数据创建为json字符串。
完成后，在客户端将数据绑定到kendo网格并使用第一行数据生成列。
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。