KENDOUI Grid does not show data where columnname has dot

Question

I am working on an ASP.net MVC project where I need to show data from database using KendoUI Grid features. It works well but whenever I am putting dot in my datatable column name, it shows nothing. I have tried to serialize them to avoid this problem but still it is not working. Here is my code,

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

Here is my grid,

@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>

You should show your Grid definition to show the model/schema setup. Also, dots are not a valid character in a javascript field/variable name...and your data ultimately becomes a javascript object on the client side. — The Dread Pirate Stephen
– The Dread Pirate Stephen, Commented Dec 14, 2016 at 13:37
But in my database I have column name like "Dosage.Dosage" . In that case, how can I show data of this column ? @TheDreadPirateStephen — Mahbub
– Mahbub, Commented Dec 14, 2016 at 13:47
Please show what your current grid definition is so we can see where you are starting from. — The Dread Pirate Stephen
– The Dread Pirate Stephen, Commented Dec 14, 2016 at 13:49

The Dread Pirate Stephen · Accepted Answer · 2016-12-14 14:52:34Z

In order to continue to use the "." in your field names, you need to hack it a bit to force Kendo to generate javascript that uses []-notation to reference the fields instead of dot-notation, i.e. you can have a javascript object like

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

But you can't have one like

var myObject = { Dosage.Dosage: someValue }

And if you don't do anything about it, Kendo will essentially generate javascript from the MVC helper like the second example and you will get a javascript error in the console like

Cannot read property 'Dosage' of undefined

because essentially myObject.Dosage is undefined when trying to reference myObject.Dosage.Dosage....this is paraphrasing what is actually happening by the javascript that Kendo generates.

So, you need to "manually" map from your dotted field name to one that is a valid javascript identifier by configuring your grid with enough information to force []-notation to be used.

You can do this by customizing the Columns and the DataSource.Model configuration in your grid definition:

@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>

What this is doing is saying "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"

For references see: 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

Collectives™ on Stack Overflow

KENDOUI Grid does not show data where columnname has dot

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related