Formatting autocomplete like a table

[Robert]

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");
       })
 )

[Aleksandar]

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