Custom editor template window not opening

[José]

Hi all,

I've got a new Grid question for you guys. I'm using a grid with Ajax Binding. For editing, I want to use a custom editor template. The problem is that the editor window is not opening when clicking on edit in the grid. Here is the code of my grid:

01.@(Html.Kendo().Grid<ServiorInventaire.Shared.Models.Dynamic.ColumnDescription>()

02.    .Name("Columns")

03.    .NoRecords(Language.NoRecords)

04.    .Columns(columns =>

05.    {

06.        columns.Bound(p => p.ColumnName).Title(Language.ColumnsColumnName).Width(250);

07.        columns.Bound(p => p.Type).Title(Language.ColumnsType).Width(250);

08.        columns.Command(command => { command.Edit(); }).Width(250);

09.    })

10.    .ToolBar(toolbar =>

11.    {

12.        toolbar.Create().Text(Language.Create);

13.    })

14.    .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("ColumnDescription").Window(w => w.Title(Language.ItemsPageTitle)))

15.    .DataSource(dataSource => dataSource

16.        .Ajax()

17.        .Model(m =>

18.        {

19.            m.Id(p => p.ColumnName);

20.        })

21.        .PageSize(20)

22.        .Read(read => read.Action("ReadColumnDescriptions", "Item").Data("getTableName"))

23.        .Create(create => create.Action("EditingPopup_Create", "Grid"))

24.        .Update(update => update.Action("EditingPopup_Update", "Grid"))

25.        )

26.)

 

Here is my custom template:

01.@using Kendo.Mvc.UI;
02.
03.@model ServiorInventaire.Shared.Models.Dynamic.ColumnDescription
04.
05.<div class="k-edit-label">
06.    @Html.LabelFor(model => model.ColumnName)
07.</div>
08.<div class="k-edit-field">
09.    @Html.Kendo().TextBoxFor(model => model.ColumnName).HtmlAttributes(new { @class = "k-input" })
10.</div>
11.
12.<div class="k-edit-label">
13.    @Html.LabelFor(model => model.Type)
14.</div>
15.<div class="k-edit-field">
16.    @Html.Kendo().TextBoxFor(model => model.Type).HtmlAttributes(new { @class = "k-input" })
17.</div>

 

So you see, there is nothing special in my template and in my grid. Still the window is not opening. If I remove ".TemplateName("ColumnDescription")" to specify a custom template, the default editor template opens without problem. Could anybody help me with this?

Thank you very much,

Sascha

[José]

Hi,

I think I found the problem and I think this is a bug in Kendo UI. My application is multi-language and I am using resource files for static translations. Here is a snippet of my ColumnDescription model:

1.[Display(ResourceType = typeof(Language), Name = "ColumnsColumnName")]
2.public string ColumnName { get; set; }

 

So this code snippet means that the DisplayLabel of the "ColumnName" property is defined in the "ColumnsColumnName" Value in the "Language.resx" file.

By trial and error, I found that if the string value of "ColumnsColumnName" is only one word like "Name" the editor popup opens without any problem but if I change the value to "Property name" it does not work anymore, the editor popup does not open. The code which displays the label is the following:

1.<div class="k-edit-label">
2.    @Html.LabelFor(model => model.ColumnName)
3.</div>

 

Is there really something I'm doing wrong? By the way, this is not my first multilanguage web project where I'm using this code like this, the only thing that changed with this project is that I used Kendo UI.

Thank you for your help,

Sascha

[José]

Hi,

It seems that I've been wrong about my assumption that there cannot be any spaces in the string value. It seems that Kendo UI does not support special characters like German Umlaut (ö,ä or ü) and French special characters (é, è, à...).

In my opinion, this is an encoding problem with Kendo UI. U can use special characters if you use the Html.Raw method in Razor like this:

1.<div class="k-edit-label">
2.    @Html.Raw(Language.ColumnsColumnName)
3.</div>

 

I hope this helps somebody else who has the same problem. Still I think Kendo UI should deal with this kind of characters.

Sascha

[Pavlina]

Hi,

The field name of the column should be a valid JavaScript identifier and should contain no special characters, no spaces, and the first character should be a letter. This is documented in the following help article:
http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-columns.field

If any other questions arise on this matter, feel free to contact us again.

Regards,
Pavlina
Progress Telerik

[José]

Hi Pavlina,

Thank you for your answer but I think you misunderstood. I know that an identifier should be valid an no special chars, spaces and so on, but this was about the label of the Property. My Property name is "ColumnName" (which is a valid JavaScript identifier afaik) but the label for was in french "Nom de la proprieté" which contains a special character.

To be able to show the character, you need to use the Html.Raw method.

Sascha

[Pavlina]

Hello,

Excuse me for misleading you in the previous post. Indeed in order to prevent encoding the value HTML.Raw method could be used. Another solution you could try is to set the column's Encoded option to false, this should be also enough.
http://docs.telerik.com/aspnet-mvc/api/Kendo.Mvc.UI.Fluent/GridBoundColumnBuilder#methods-Encoded(System.Boolean) 

Regards,
Pavlina
Progress Telerik