Special Characters in an inline dropdown

[Cody]

I'm trying to add a bullet point to my dropdown entries and while it works when it displays in the dropdown, when I try to edit it it reverts back to the character code.

Here is the code I'm using for my dropdown and it's in a grid with inline editing.

 $('<input required name="' + options.field + '"/>')
        .appendTo(container)
        .kendoDropDownList({
            dataTextField: "Details",
            dataValueField: "Id",
            dataSource: dataSource,
            optionsLabel: {
                Details: "Choose an item...",
                Id: -1
            },
            template: "#= data.Details #"
        });

Any help would be appreciated.

 

[Cody]

Looking at the problem a bit more here is a better question to ask.

How do I encode the selected value of a dropdown list?

The template works just fine but once an item is selected the encoding is gone.

[Dimitar]

Hello Cody,

In general, the special Kendo UI Templates syntax(#) allows to specify how the output is displayed:

• 1. Render values as HTML: #= #.
  2. 1. Use HTML encoding to display values: #: #.

Taking the above into consideration, to resolve the currently described scenario, just use the required syntax in the DropDownList's value template:

$("#color").kendoDropDownList({
  ...
  valueTemplate: "#= data.text #",
});

The above is also demonstrated on the following DropDownList example.

In case you have any additional questions, please let me know.

Regards,
Dimitar
Progress Telerik