Escape "#" in Kendo UI DropDownList

[Elaine]

Hi

I have an EditorTemplate which contains a Kendo DropdownList as below and the editortemplate is called inside one of my kendo UI grid’s column.

@model int?
@{

   var controlName = ViewData.TemplateInfo.GetFullHtmlFieldName("");

}

@(

 Html.Kendo().DropDownListFor(m => m)

      .Name(controlName)

      .OptionLabel("Not Mapped")

      .BindTo((SelectList)ViewData[ViewData.TemplateInfo.GetFullHtmlFieldName("") + "_Data"])

      .HtmlAttributes(new { data_value_primitive = true })

)

In my data I have “#” which cause having Invalid Template error.

I checked the below link which explains we have to escape the “#” by using “\\#” in JavaScript and “\#” in Html Script:

http://docs.telerik.com/kendo-ui/getting-started/framework/templates/overview

 
I replaced the “#” in server side to “\\#” then the template was created without any issue but when I click on dropdown to select an item the text contains “\\#” .

How can I escape the “#” in above code without making any changes on server side.

Thanks.

[Daniel]

Hello Elaine,

Could you provide a little more detailed information about the setup? How is the editor "called inside one of my kendo UI grid’s column" and is the Grid used in a detail template? Also what editing mode are you using?
Generally speaking, you can avoid the error by loading the data via Ajax(so that the data is not part of the editor serialized string) or by escaping the characters in the raw output:

@(Html.Raw( Html.Kendo().DropDownListFor(m => m)
      .Name(controlName)
      .OptionLabel("Not Mapped")
      .BindTo((SelectList)ViewData[ViewData.TemplateInfo.GetFullHtmlFieldName("") + "_Data"])
      .HtmlAttributes(new { data_value_primitive = true })
      .ToHtmlString().Replace("#", "\\#")
    )
)

Regards,
Daniel
Telerik

 

 

[Stephen]

To add the details of how this occurs...

Simply add a ForeignKey() column to your grid where the source of the DropDownList has entries that contain a '#'.
This will use the kendo-provided GridForeignKey EditorTemplate which will throw the "Invalid Template" in the javascript console if any entries contain a '#'.

In this case, using ajax loading is not possible as the grid's ForeignKey() implementation can only bind to a whole SelectList/IEnumerable and does not support "dynamic" loading of the DropDownList.

Changing GridForeignKey.cshtml from:

@(
 Html.Kendo().DropDownListFor(m => m)
        .BindTo((SelectList)ViewData[ViewData.TemplateInfo.GetFullHtmlFieldName("") + "_Data"])
)

To:

@(Html.Raw(Html.Kendo().DropDownListFor(m => m)
      .BindTo((SelectList)ViewData[ViewData.TemplateInfo.GetFullHtmlFieldName("") + "_Data"])
      .HtmlAttributes(new { data_value_primitive = true })
      .ToHtmlString().Replace("#", "\\#")
    )
)

does not change a thing as far as I can tell and the the template is still invalid due to the '#' in the DropDownList.