KENDOUI Grid不显示columnname有点的数据

时间:2016-12-14 13:17:03

标签: asp.net kendo-ui kendo-grid kendo-asp.net-mvc

我正在开发一个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>

1 个答案:

答案 0 :(得分:0)

为了继续使用“。”在你的字段名称中,你需要破解它以迫使Kendo生成使用[] -notation引用字段而不是点符号的javascript,即你可以有一个像<的javascript对象/ p>

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

但你不能拥有像

这样的人
var myObject = {
    Dosage.Dosage: someValue
}

如果你对它没有做任何事情,Kendo将基本上从MVC助手生成javascript,就像第二个例子一样,你将在控制台中得到一个javascript错误,如

  

无法读取未定义

的属性'Dosage'

因为在尝试引用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名称,我们可以将其保留为-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