KENDO UI Grid 不显示列名有点的数据

Question

我正在开发一个 ASP.net MVC 项目，我需要使用 KendoUI Grid 功能显示来自数据库的数据。它运行良好，但每当我在我的数据表列名称中放置点时，它什么都不显示。我已尝试将它们序列化以避免此问题，但仍然无法正常工作。这是我的代码，

     public ActionResult Read([DataSourceRequest] DataSourceRequest request)
    {
        DataTable products = Products();          
        var result = JsonConvert.SerializeObject(products.ToDataSourceResult(request));
        return Json(result, JsonRequestBehavior.AllowGet);
    }    

    public DataTable Products()
    {
        // Here we create a DataTable with four columns.
        DataTable table = new DataTable();
        table.Columns.Add("Dosage.Dosage", typeof(int));
        table.Columns.Add("Drug", typeof(string));
        table.Columns.Add("Patient", typeof(string));
        table.Columns.Add("Date", typeof(DateTime));

        // Here we add five DataRows.
        table.Rows.Add(25, "Indocin", "David", DateTime.Now);
        table.Rows.Add(50, "Enebrel", "Sam", DateTime.Now);
        table.Rows.Add(10, "Hydralazine", "Christoff", DateTime.Now);
        table.Rows.Add(21, "Combivent", "Janet", DateTime.Now);
        table.Rows.Add(100, "Dilantin", "Melanie", DateTime.Now);
        return table;

    }

这是我的网格，

@model System.Data.DataTable

<div class="container-fluid">
<div class="row">
    <div class="col-xs-18 col-md-12">
        @(Html.Kendo().Grid<dynamic>()
    .Name("grid")
    .Columns(columns =>
    {

    })
    .Pageable()
    .Sortable()
    .Scrollable()
    .Filterable()
    .HtmlAttributes(new { style = "height:550px;" })
    .DataSource(dataSource => dataSource
    .Ajax()
    .PageSize(20)
    .Read(read => read.Action("Read", "Home"))
    )
    )
  </div>
</div>

Answer 1

为了继续使用“.”在您的字段名称中，您需要稍微修改一下以强制 Kendo 生成 javascript，它使用 []-notation 来引用字段而不是点符号，即您可以有一个像

这样的 javascript 对象

var myObject = {
    "['Dosage.Dosage']": someValue
}

但你不能拥有这样的人

var myObject = {
    Dosage.Dosage: someValue
}

如果你什么都不做，Kendo 基本上会像第二个例子一样从 MVC 助手生成 javascript，你会在控制台喜欢

Cannot read property 'Dosage' of undefined

因为基本上 myObject.Dosage 是在尝试引用 myObject.Dosage 时未定义。剂量....这是解释 [= 实际发生的事情Kendo 生成的 43=]。

因此，您需要 "manually" 从您的虚线字段名称映射到一个有效的 javascript 标识符，方法是使用足够的信息配置您的网格以强制使用 []-notation。

您可以通过自定义列和网格定义中的 DataSource.Model 配置来做到这一点：

@model System.Data.DataTable

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-18 col-md-12">
            @(Html.Kendo().Grid<dynamic>()
                .Name("grid")
                .Columns(columns =>
                {
                    foreach (System.Data.DataColumn column in Model.Columns)
                    {
                        if (column.ColumnName.Contains('.'))
                        {
                            var convertedColumnName = "['" + column.ColumnName + "']";
                            columns.Bound(convertedColumnName).Title(column.ColumnName);
                        }
                        else
                        {
                            columns.Bound(column.ColumnName);
                        }
                    }
                })
                .Pageable()
                .Sortable()
                .Scrollable()
                .Filterable()
                .HtmlAttributes(new { style = "height:550px;" })
                .DataSource(dataSource => dataSource
                    .Ajax()
                    .PageSize(20)
                    .Read(read => read.Action("Read", "Home"))
                    .Model(model =>
                    {
                        foreach (System.Data.DataColumn column in Model.Columns)
                        {
                            if (column.ColumnName.Contains('.'))
                            {
                                var convertedColumnName = "['" + column.ColumnName + "']";
                                model.Field(convertedColumnName, column.DataType);
                            }
                            else
                            {
                                model.Field(column.ColumnName, column.DataType);
                            }
                        }
                    })
                )
            )
    </div>
</div>

这是在说什么 "If the field name contains the troublesome dot character, format the javascript column and model schema definition to use quoted [] notation, otherwise the field name is a valid javascript name and we can leave it as-is"

有关参考资料，请参阅：http://www.telerik.com/forums/bug-with-field-name-with-dot-or-space http://docs.telerik.com/aspnet-mvc/helpers/grid/how-to/Binding/grid-bind-to-datatable

KENDO UI Grid 不显示列名有点的数据

KENDOUI Grid does not show data where columnname has dot

asp.net

kendo-ui

kendo-grid

kendo-asp.net-mvc