How to display a Table as the results of the AutoComplete

[1zias01]

Using the template property of the AutoComplete,  I would like to somehow display a table that contains the results of the json query.

Like in your standard ComboBox control.  Is there an easy way to accomplish this.

Thanks

[Georgi Krustev]

Hello Chris,

 
Check this online demo. It shows how to define template for combobox item. You will need to use the appropriate HTML elements and style them in order to achieve your goal.

Greetings,
Georgi Krustev
the Telerik team

[Benjamin]

I know this is old but I've further question.
try this to display a table as the results of the autocomplete:

<input id="autocomplete" />

<script id="template" type="text/x-kendo-tmpl">
 <div class="k-widget k-grid" id="Grid">
                     <div class="k-grid-content">
                  
                      <table cellspacing="0">
                       <td> ${data.field_Name1} </td>                                             
                       <td> ${data.field_Name2} </td>
                       <td>${ data.field_Name3 } </td>
                        </table>
 </div></div>
</script>

<script >
          $(document).ready(function () {
                $("#autocomplete").kendoAutoComplete({
                    minLength: 3,
                    template: kendo.template($("#template").html()),
                     dataSource: {
                        .
                        .
                        .
my question is i need a table header at the top for the whole Autocomplete result. I tried to put <th> header </th> tag in the table but this obviously adds a header in each table returned. any ideas?

[David]

I have the same issue.  Need to put the table tags outside the list loop

[Prabakaran]

Can you please post the code?

How to do it?

Thanks,
Praba

[Georgi Krustev]

Hello,

 
Here is a simple jsFiddle demo, which shows how to use template option to format data as table. Please note that this functionality is not built-in and if you need other modifications than you will need to implement them manually.

Regards,
Georgi Krustev
Telerik

[s]

Hi, 
 how can this be done when using the ASP.NET MVC wrappers in a razor view?

    @(Html.Kendo().AutoComplete()
          .Name("Funds")
          .DataTextField("Name").DataTextField("Name2").DataTextField("Name3")
          .DataSource(source =>
          {
              source.Read(read =>
              {
                  read.Action("get", "api/fund");
              })
              .ServerFiltering(true);

          })
          .HtmlAttributes(new { style = "width:400px" })
          .Filter("contains")
          .MinLength(1)
          .Height(370)
          .Suggest(true)
          .Template("<span>Name:${ data.Name }</span>" +
                       "<span>Name2:${ data.Name2 }</span>" +
                       "<span>Name3:${ data.Name3 }</span>"
                   )
    )

Thanks for your help

[Georgi Krustev]

Hello,

 
You will need to use the TemplateId method to define the custom template:

.TemplateId("template")

Once the template is defined, just use the rest of the implementation shown in the jsFiddle demo.

As a side note, the trial version of Kendo UI for ASP.NET MVC is intended only for evaluating our product and dedicated support. It cannot be used for commercial purposes.

Regards,
Georgi Krustev
Telerik