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

Formatting autocomplete like a table

1 Answer 18 Views
AutoComplete
This is a migrated thread and some comments may be shown as answers.
Robert
Top achievements
Rank 1
Veteran
Robert asked on 30 Aug 2019, 05:25 PM

I have an autocomplete that populates with several pieces of information (Name, Type, Market Value - see attached image).  I would like to format this more like a table where each column lines up under the appropriate header.  I tried adding html table, tr, td etc. tags, but it did not work.  Is there an example of this being done or perhaps another way of using a grid control that is populated by the autocomplete?

 

@(Html.Kendo().AutoComplete()
       .Name("accounts")
       .DataTextField("DisplayNameExtendedDetails")
       .Filter("contains")
       .MinLength(2)
       .Placeholder("Type a name or account number")
       .HtmlAttributes(new { style = "width:100%" })
       .DataSource(source => source
             .Custom()
             .Group(g => g.Add("EntityType", typeof(string)))
             .Transport(transport => transport
                 .Read(read =>
                 {
                     read.Action("ServerFiltering_GetAccounts", "Account")
                     .Data("onAdditionalData");
                 }))
                 .ServerFiltering(true))
 
         .HeaderTemplate("<div class=\"dropdown-header k-widget k-header\">" +
                                 "<span>Name</span>" +
                                 "<span>Type</span>" +
                                 "<span>Market Value</span>" +
                             "</div>")
         .FooterTemplate("Total <strong>#: instance.dataSource.total() #</strong> items found")
         .Template("<span class=\"k-state-default\">#: data.MarketValueFormatted #    </span>" +
                     "<span class=\"k-state-default\"> #: data.DisplayName #</span>" +
                     "<span class=\"k-state-default\"> #: data.AccountType #</span>")
       .Events(e =>
       {
           e.Change("onAccountChange").Select("onAccountSelect");
       })
 )

1 Answer, 1 is accepted

Sort by
0
Accepted
Aleksandar
Telerik team
answered on 03 Sep 2019, 12:34 PM

Hello Robert,

A more suitable widget for the task would be the MulticolumnComboBox. It is used to visualize data sets in a grid-like table. You can check the available examples for the widget and the API reference section for further details on setting up the widget.

I hope this helps. Let me know if you have further questions.

Regards,
Aleksandar
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
AutoComplete
Asked by
Robert
Top achievements
Rank 1
Veteran
Answers by
Aleksandar
Telerik team
Share this question
or