ListView Invalid Template When Using Apostrophes

[Michael]

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?

[Stefan]

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

[Michael]

I have attached a sample project which should demonstrate the issue.  Thanks!

[Stefan]

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

[Michael]

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.

[Stefan]

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

[Miguel Angel]

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.