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，即您 可以 有一个像

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

但你不能有一个喜欢的

var myObject = {
    Dosage.Dosage: someValue
}

如果你不做任何事情，Kendo 基本上会像第二个例子一样从 MVC 帮助程序生成 javascript，你会在控制台中得到一个 javascript 错误，比如

无法读取未定义的属性“剂量”

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

因此，您需要通过为您的网格配置足够的信息来强制使用 [] 表示法，从而“手动”将您的虚线字段名称映射到一个有效的 javascript 标识符。

您可以通过在网格定义中自定义 Columns 和 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>

这是在说“如果字段名称包含麻烦的点字符，请格式化 javascript 列和模型架构定义以使用带引号的 [] 表示法，否则字段名称是有效的 javascript 名称，我们可以将其保留为-是”

参考见：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