Custom editor template window not opening

6 posts, 1 answers
  1. Claude
    Claude avatar
    10 posts
    Member since:
    Jun 2017

    Posted 28 Jun Link to this post

    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

  2. Claude
    Claude avatar
    10 posts
    Member since:
    Jun 2017

    Posted 28 Jun Link to this post

    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

  3. Claude
    Claude avatar
    10 posts
    Member since:
    Jun 2017

    Posted 29 Jun Link to this post

    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

  4. Pavlina
    Admin
    Pavlina avatar
    6154 posts

    Posted 30 Jun Link to this post

    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.
  5. Claude
    Claude avatar
    10 posts
    Member since:
    Jun 2017

    Posted 30 Jun in reply to Pavlina Link to this post

    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

  6. Answer
    Pavlina
    Admin
    Pavlina avatar
    6154 posts

    Posted 04 Jul Link to this post

    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.
Back to Top