How to bind columns having special characters (space and comma) in a column name to a Kendo UI Grid?

Question

I am getting error while bind a datatable to a Kendo Grid. My datatable column names may contains special characters such as spaces and comma.

View:

@(Html.Kendo().Grid(Model)
        .Name("Test1Grid")
                .Columns(columns =>
                    {
                        foreach (System.Data.DataColumn col in GridData.Columns)
                        {
                          columns.Bound(col.ColumnName).Title(col.Caption).ClientTemplate("#=kendo.toString(" + col.ColumnName + ", \"n0\")#");
                        }
                    }
                     )
                .DataSource(dataSource => dataSource
                        .Ajax()
                            .Read(read => read.Action("GridData", "abc"))
                        .Model(model =>
                        {
                            foreach (System.Data.DataColumn column in GridData.Columns)
                            {
                                model.Field(column.ColumnName, column.DataType);
                            }
                        })
                    )
        )

DataTable:

Name      London      New York      Pittsburgh, PA      Tokyo
order1    100         150           300                 300 
order2    500         650           800                 350

The java script error i am getting here is "0x800a1391 - JavaScript runtime error: 'PA' is undefined"

Answer 1

Here is the detailed answer how i handled special charecters. once received the data from database, loop through columns and replace the columnname with valid identifier as:

string col_new;
foreach (DataColumn col in dt.Columns)
{
StringBuilder sb = new StringBuilder(col.ColumnName.ToString().Trim()); 
col_New = sb.Replace(" ", "SPACE").Replace(",", "COMMA").ToString();
}
dt.Columns[ColumnName].ColumnName = col_New;
return dt;

Then when bound the columns in Kendo grid in a headertemplate just replace back the the words "SPACE" and "COMMA" with the signs " " and "," respectively.

foreach (System.Data.DataColumn col in Model.Columns)
{
 columns.Bound(col.ColumnName)
 .Title(col.ColumnName)  
 .HeaderTemplate("col.ColumnName.ToString().Trim().Substring(3).Replace("SPACE", " ").Replace("AND", "&"))
}