ListView Invalid Template When Using Apostrophes

7 posts, 0 answers
  1. Michael
    Michael avatar
    23 posts
    Member since:
    Sep 2014

    Posted 10 Jan 2018 Link to this post

    I am getting an invalid template error when I am creating a ListView in which the Editor Template contains a select list that is bound to a datasource that contains elements with an apostrophe.  It looks like the text is getting escaped, as the error message shows it being created as "<option value="Conveners&#x27; Corner (New)">Conveners&#x27; Corner (New)</option>", but I don't know if it's Kendo doing the escaping or MVC or something else.  This encode contains a # sign though, and that doesn't get escaped, which causes the error.

    Is this a bug with the ListView control?  Is there some other event where I can escape the escaped text to put a \\ before an # characters?

  2. Stefan
    Admin
    Stefan avatar
    2491 posts

    Posted 12 Jan 2018 Link to this post

    Hello, Michael,

    Thank you for the details.

    I tried reproducing the issue, but the apostrophe was rendered with no issue inside the template.

    Could you please share a record value containing the apostrophe in the real example, so I can use it for reference.

    Also, share the editor initialization, so we can inspect if we are not missing an important part of the configuration.

    Ideally, providing a runnable example will help us directly to locate the issue and provide a suggestion best suited for it.

    Thank you in advance.

    Regards,
    Stefan
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Michael
    Michael avatar
    23 posts
    Member since:
    Sep 2014

    Posted 16 Jan 2018 in reply to Stefan Link to this post

    I have attached a sample project which should demonstrate the issue.  Thanks!
  4. Stefan
    Admin
    Stefan avatar
    2491 posts

    Posted 18 Jan 2018 Link to this post

    Hello, Michael,

    Thank you for the example.

    After inspecting it I noticed that the issue is caused by the select tag helper. Even if I use a standard value as "test" instead of the value with apostrophes the same issue occurs.

    I can assume that some of the code which is automatically generated by the tag helper is causing an issue with the template syntax.

    For now, we can suggest using an HTML DropDownList helper and I will forward this to the developers' team, to check if we can offer a permanent solution with the TagHelpers:

    https://www.telerik.com/forums/listview-editing-with-dropdownlist

    Apologies for the inconvenience this may have caused you.

    Regards,
    Stefan
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. Michael
    Michael avatar
    23 posts
    Member since:
    Sep 2014

    Posted 18 Jan 2018 in reply to Stefan Link to this post

    Pretty sure it's specifically tied into the apostrophe being in the Text or Value field assigned to the SelectListItem.  If you replace the GetCategories() method with the method below, it works fine, but as soon as you put an apostrophe in one of those fields, you get the error.  If you look at the error generated, the apostrophe is being escaped as a "&#x27;" character, and I think the # character in that sequence causes the problem because that is a special character in Kendo when binding to data.  I'm guessing it is part of the Kendo framework that is doing the escaping, because if I put the same dropdown by itself in a view, the select tag helper doesn't escape the apostrophe.

    private IEnumerable<SelectListItem> GetCategories()
    {
        List<SelectListItem> a = new List<SelectListItem>();
        a.Add(new SelectListItem()
        {
            Text = "test",
            Value = "test"
        });
        return a;
    }

     

    Using a regular HTML DropDownListFor TagHelper instead of the select tag helper causes the same error to occur.  I can get it to work using the Kendo DropDownListFor TagHelper, but I'd prefer to not have to use the Kendo dropdown.  If you could let me know when this gets resolved, I'd appreciate it.

  6. Stefan
    Admin
    Stefan avatar
    2491 posts

    Posted 19 Jan 2018 Link to this post

    Hello, Michael,

    Indeed, the apostrophe with combination with the built-in select TagHelper is causing the issue.

    The developers' team inspected this and confirm that this is how to TagHelper is formatting the values. The Kendo UI team has to control over the generated code by the built-in TagHelpers and this is the reason why we suggest using our DropDown widget.

    I used the provided example and it is working as expected with a DropDown list. I attached the modified example for reference.

    Regards,
    Stefan
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  7. Miguel Angel
    Miguel Angel avatar
    1 posts
    Member since:
    Oct 2016

    Posted 12 Feb in reply to Stefan Link to this post

    Hello,

    I have the same problem with apostrophes. I changed the kendo.all.js to solve that.

    PD:La Gente de Mucha miel es la mejor que hay.

Back to Top