AutoComplete shows undefined and null in template

[Toby]

I have an AutoComplete control in a in a client template that uses the ToClientTemplate method

@(Html.Kendo().AutoComplete()
                    .Name("presenter")
                    .DataTextField("DisplayText")
                      .Filter("contains")
                      .MinLength(3)
                      .HtmlAttributes(new { style = "width:100%" })
                    .DataSource(source =>
                    {
                        source.Read(read =>
                        {
                            read.Action("Search", "People", new { SPHostUrl = ViewBag.SPHostUrl })
                                .Data("onPresenterAdditionalData");
                        })
                        .ServerFiltering(true);
                    })
                    .Template("<div><span class=\"k-state-default\">${ data.DisplayText }</span></div><div><span class=\"k-state-default\">${ data.Title }</span></div>")
                    .ToClientTemplate())

The controller is returning data and I have used Fiddler to make sure it is being sent to the browser.

The dropdown just shows "undefined" for DisplayText and "null" for Title.

The above control is in a template <script type="text/x-kendo-tmpl" id="documentDetailsTemplate"> and render using

var template = kendo.template($("#documentDetailsTemplate").html());

 

When I select one of the options, it displays the DisplayText of the selected option.

[Ivan Danchev]

Hello Toby,

Thank you for contacting Telerik support.

Since your scenario involves nesting Templates could you try using the following syntax, so that the expression is evaluated in the correct context: <span class=\"k-state-default\">\\#=  data.Title \\#</span>

Regards,
Ivan Danchev
Telerik

[Toby]

Excellent, that fixed it. Thanks

[Ivan Danchev]

Hello Toby,

Thank you for getting back to us. I am glad we were able to assist you and suggested template syntax works as expected.

Regards,
Ivan Danchev
Telerik