How to display a Table as the results of the AutoComplete

8 posts, 0 answers
  1. 1zias01
    1zias01 avatar
    12 posts
    Member since:
    Sep 2012

    Posted 11 Feb 2012 Link to this post

    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
  2. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3706 posts

    Posted 13 Feb 2012 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. Benjamin
    Benjamin avatar
    1 posts
    Member since:
    Sep 2012

    Posted 13 Sep 2012 Link to this post

    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?
  5. David
    David avatar
    2 posts
    Member since:
    Mar 2013

    Posted 15 Apr 2013 Link to this post

    I have the same issue.  Need to put the table tags outside the list loop
  6. Prabakaran
    Prabakaran avatar
    2 posts
    Member since:
    Aug 2013

    Posted 17 Aug 2013 Link to this post

    Can you please post the code?

    How to do it?

    Thanks,
    Praba
  7. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3706 posts

    Posted 20 Aug 2013 Link to this post

    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!
  8. s
    s avatar
    4 posts
    Member since:
    Aug 2010

    Posted 08 Oct 2013 Link to this post

    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

  9. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3706 posts

    Posted 11 Oct 2013 Link to this post

    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!
Back to Top
Kendo UI is VS 2017 Ready