KendoUI Autocomplete template using tables

Question

I'm trying to change the HTML rendered by the Kendo UI autocomplete MVC helper, but it seems Kendo has hard coded it to be a UL. Here's my code sample:

@(Html.Kendo().AutoComplete()
        .Name("clientsAutoComplete")
        .DataTextField("ClientCode")
        .DataSource(source => source.Read(read => read.Action("GetClients", "Profile").Type(HttpVerbs.Post)))
            .Template("<table style='width:600px'>" +
                 "<thead>" +
                     "<tr><th>Client</th><th>Code</th></tr>" +
                 "</thead>" +
                 "<tbody>" +
                     "<tr><td> " +
                         "${ data.Firstname }asdfasdfasdf</td><td>${ data.ClientCode }</td></tr>" +
                 "</tbody>" +
             "</table>")
        //.TemplateId("javascriptTemplate")
     ))

What you end up with is a table repeated for each record. If you change the template value to have only the row definitions of a table as in the following:

.Template("<tr><td>${ data.Firstname }asdfasdfasdf</td><td>${ data.ClientCode }</td></tr>")

Then Kendo removes the TR and TD tags altogether and leaves you with the LI's.

I've even tried using a client side template using a script element as suggested by Kendo, but it has pretty much the same erratic results.

I need a table to render in the drop down, which will have a headers row (THead) and the content in the TBODY section. Anyone know how to achieve this scenario?

Regards, Jacques

Answer 1

As far as I can tell, tables aren't supported by the templating system. There's a HeaderTemplate property, but no FooterTemplate that you can use to close your table with.

Source link: http://docs.kendoui.com/api/web/autocomplete#configuration-headerTemplate