Question

我需要在Button Click上弹出一个 Kendo Grid 。在按钮上单击服务器返回 DataTable ，其中包含动态列（即1到n个列）。单击按钮，单击 DataTable ，使用 jQuery ajax 打电话。但是我无法绑定那些数据。如何解决此问题

Answer 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);
                         }
                     }
                 )

            )
           )

如果这不是您想要的，请告诉我？

Answer 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

如果您有任何疑虑，请告诉我。

Answer 3

首先，您需要序列化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。

如何在运行时将Kendo Grid与System.Data.DataTable绑定

3 个答案: