This is a migrated thread and some comments may be shown as answers.

Escape "#" in Kendo UI DropDownList

2 Answers 110 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
Elaine
Top achievements
Rank 1
Elaine asked on 11 Mar 2014, 09:06 PM
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.

2 Answers, 1 is accepted

Sort by
0
Daniel
Telerik team
answered on 13 Mar 2014, 03:39 PM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Stephen
Top achievements
Rank 2
answered on 21 Mar 2014, 03:14 PM
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.
Tags
DropDownList
Asked by
Elaine
Top achievements
Rank 1
Answers by
Daniel
Telerik team
Stephen
Top achievements
Rank 2
Share this question
or