This is a migrated thread and some comments may be shown as answers.

Custom editor template window not opening

5 Answers 105 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Claude
Top achievements
Rank 1
Claude asked on 28 Jun 2017, 06:47 AM

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

5 Answers, 1 is accepted

Sort by
0
Claude
Top achievements
Rank 1
answered on 28 Jun 2017, 02:07 PM

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

0
Claude
Top achievements
Rank 1
answered on 29 Jun 2017, 11:48 AM

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

0
Pavlina
Telerik team
answered on 30 Jun 2017, 08:47 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Claude
Top achievements
Rank 1
answered on 30 Jun 2017, 08:59 AM

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

0
Accepted
Pavlina
Telerik team
answered on 04 Jul 2017, 09:37 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Grid
Asked by
Claude
Top achievements
Rank 1
Answers by
Claude
Top achievements
Rank 1
Pavlina
Telerik team
Share this question
or