CODEWITHSUNDEEP
asp.net-mvc-4kendo-gridkendo-asp.net-mvc
giparekh
giparekh

Reputation: 307

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

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"

Upvotes: 1

Views: 5118

Answers (4)

giparekh
giparekh

Reputation: 307

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", "&"))
}

Upvotes: 3

Swapnil Mahajan
Swapnil Mahajan

Reputation: 271

facing similar kind of issue.

I am trying to bind the column with my model.

columns.Bound(p => p.reportname).Title("Report Name").ClientTemplate("#= reportname#").Encoded(false);

When my reportname is "Test & Test" (or any special character).It is passing only "Test" to my action method. I have tried with encoded(false/true) it didn't work.

So is there is any way so that I can pass column value (with special character &,*,# etc) to my action method.

Thanks

Upvotes: 0

Always Learning
Always Learning

Reputation: 302

It is not a bug. There cannot be special characters or spaces in field names.

It is stated clearly here in the Kendo documentation.

To summarize, and I quote: "The field name should be a valid Javascript identifier and should contain no spaces, no special characters, and the first character should be a letter."

One thing you could do is prefix the field name(s) in question with a valid identifier.

Upvotes: 2

JamieD77
JamieD77

Reputation: 13949

You can try wrapping your column name in brackets []

columns.Bound(string.Format("[\"{0}\"]",col.ColumnName).Title(col.Caption).ClientTemplate("#=kendo.toString(" + col.ColumnName + ", \"n0\")#");

Upvotes: 0

Related Questions