Editor inside Client Template - name problem

5 posts, 0 answers
  1. Jan
    Jan avatar
    37 posts
    Member since:
    Apr 2017

    Posted 27 Apr Link to this post

    Hello,

    I tried to create a TreeView with a custom ClientTemplate to instanciate an editor for each

    Example (I just broke it down to the required settings):

    01.@(Html.Kendo().TreeView()
    02.    .Name("treeview")
    03.    .TemplateId("treeview-template")
    04.    .Items(it1 =>
    05.    {
    06.        it1.Add().Id("1").Text("Test1")
    07.            .Items(it2 =>
    08.            {
    09.                it2.Add().Id("2").Text("Test2");
    10.            });
    11.    })
    12.)

     

    1.<script id="treeview-template" type="text/kendo-ui-template">
    2.    @(Html.Kendo().Editor()
    3.        .Name("editor_#=item.id#")
    4.        .Value("#=item.text# #=item.id#")
    5.        .ToClientTemplate())
    6.</script>

     

    In the browser console I get the script error "Error: Invalid template: ...". As soon as I remove the #=item.id# in the .Name-function, it is working, but I have a name conflict with multiple instances (therefore I need the id inside the name). The same error occurs if I try .Name("editor_#=item.text#"). The value output of text and id is correct. Is this a bug in the editor widget or what am I doing wrong?

  2. Dimitar
    Admin
    Dimitar avatar
    355 posts

    Posted 02 May Link to this post

    Hi,

    It seems that the template cannot evaluate the item.id, when inside the Name. Having a dot breaks the template structure. In order to workaround the issue, you may create a variable for the id and use it as follows:

    <script id="treeview-template" type="text/kendo-ui-template">
    #var id = 'editor_' + item.id;#
     
    @(Html.Kendo().Editor()
            .Name("#=id#")
            .Value("#=item.text# #=item.id#")
            .ToClientTemplate())
    </script>


    Regards,
    Dimitar
    Telerik by Progress
    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.
  3. Jan
    Jan avatar
    37 posts
    Member since:
    Apr 2017

    Posted 02 May Link to this post

    This is working as workaround, thank you!
  4. Jan
    Jan avatar
    37 posts
    Member since:
    Apr 2017

    Posted 04 May Link to this post

    There is another problem. I want the inline editor inside each TreeView item. But when I click on an item, the editor is not opening. When I add a click listener and call "...editor.toolbar.show()", I get the toolbar but no focus, and when I set the focus manually its always at the beginning of the text. It seems that some events on the TreeView are preventing the inline edit event (i.e. the 'select' event of the TreeView?). Do you think there is any possibility to get this working?
  5. Dimitar
    Admin
    Dimitar avatar
    355 posts

    Posted 04 May Link to this post

    Hi,

    As this is another problem, it is advisable to open a separate support ticket or forum thread for it. Thus, we would keep threads as short and concise as possible, which makes them better reference for the community.

    Thank you in advance for your understanding.

    Regards,
    Dimitar
    Telerik by Progress
    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