如何在运行时将 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 绑定的主要内容,如果未能解决你的问题,请参考以下文章

如何将 JSON 数据与 Kendo Grid 绑定

如何在 kendo.ui.grid 中创建自定义 kendo.ui.Window 以进行编辑

如何将 Kendo UI Grid 与 ToDataSourceResult()、IQueryable<T>、ViewModel 和 AutoMapper 一起使用?

如何在加载kendo-grid时显示kendo加载图标?

如何提高kendo ui grid在页面的渲染速度

如何在页面加载时将 Kendo 网格高度设置为固定值