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

How to display a Table as the results of the AutoComplete

7 Answers 878 Views
AutoComplete
This is a migrated thread and some comments may be shown as answers.
1zias01
Top achievements
Rank 2
1zias01 asked on 11 Feb 2012, 06:55 AM
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

7 Answers, 1 is accepted

Sort by
0
Georgi Krustev
Telerik team
answered on 13 Feb 2012, 03:29 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Benjamin
Top achievements
Rank 1
answered on 13 Sep 2012, 11:14 PM
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?
0
David
Top achievements
Rank 1
answered on 15 Apr 2013, 07:13 PM
I have the same issue.  Need to put the table tags outside the list loop
0
Prabakaran
Top achievements
Rank 1
answered on 18 Aug 2013, 01:53 AM
Can you please post the code?

How to do it?

Thanks,
Praba
0
Georgi Krustev
Telerik team
answered on 20 Aug 2013, 08:09 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
s
Top achievements
Rank 1
answered on 08 Oct 2013, 07:54 PM
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

0
Georgi Krustev
Telerik team
answered on 11 Oct 2013, 09:09 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
AutoComplete
Asked by
1zias01
Top achievements
Rank 2
Answers by
Georgi Krustev
Telerik team
Benjamin
Top achievements
Rank 1
David
Top achievements
Rank 1
Prabakaran
Top achievements
Rank 1
s
Top achievements
Rank 1
Share this question
or