Autocomplete with multiple columns

[Dan]

I need to display a table for the autocomplete (like the multicombobox).

I have already done this on a previous version of telerik with the code:

                              .HeaderTemplate("<div class=\"k-grid-header\" style=\"padding-right: 17px;\">" +
                                                "<div class=\"k-grid-header-wrap\">" +
                                                   "<table>" +
                                                      "<colgroup>" +
                                                         "<col>" +
                                                         "<col>" +
                                                         "<col>" +
                                                         "<col>" +
                                                      "</colgroup>" +
                                                      "<tbody>" +
                                                         "<tr>" +
                                                            "<th class=\"k-header\">P1</th>" +
                                                            "<th class=\"k-header\">P2</th>" +
                                                            "<th class=\"k-header\">P3</th>" +
                                                            "<th class=\"k-header\">P4</th>" +
                                                         "</tr>" +
                                                      "</tbody>" +
                                                   "</table>" +
                                                "</div>" +
                                             "</div>")
                              .Template("<span class=\"k-cell\">#: data.P1#</span>" +
                                        "<span class=\"k-cell\">#: data.P2#</span>" +
                                        "<span class=\"k-cell\">#: data.P3#</span>" +
                                        "<span class=\"k-cell\">#: data.P4#</span>")

but this one does not work anymore in the current version. I do not remember from where I took this example and I cannot find an example anymore. Is this because the multicombobox was created?

[Eyup]

Hi Dan,

 

Thank you for contacting us.

Yes, this is the idea of the MultiColumnComboBox and I think that you will find it most suitable for this scenario:
https://demos.telerik.com/aspnet-mvc/multicolumncombobox/clientfiltering

And if you insist on using the Autocomplete component, you can still use Templates:
https://demos.telerik.com/aspnet-mvc/autocomplete/template

A table-like visualization can be achieved using span elements, too, similar to this sample:
https://demos.telerik.com/aspnet-mvc/combobox/template

Feel free to check these available options and let me know which one you like the most. Is there any other info or requirement you'd like to add?

 

Regards,
Eyup
Progress Telerik

[Dan]

Hi Eyup,

Unfortunately the multicolumncombobox does not look and behave like an autocomplete so it is not exactly a valid solution for us at the moment.

Also I do not see why did you provided the links to the autocomplete template and combobox template since I already have seen them and they do not help me at all hence the reason I asked this question.

Basically I have to copy back the configurations for the classes k-grid-header and k-cell in order to make the autocomplete display the table again

[Eyup]

Hi Dan,

I am sorry to hear that. Next time I will know that you are already familiar with these samples.

I could help you with this Autocomplete requirement. Can you just send me a sample image or drawing to demonstrate how exactly you expect the end result to look like? I will then prepare a new MVC project with the complete template and javascript implementation and send it to you.

[Dan]

Hi Eyup,

If you do not have already an example then I guess I will have to do what I said: copy the old css styles in order to make the table.

The layout has to be similar with the multicombobox just that the dropdown popup list has to have the same width as the main control.

 

[Eyup]

Yeah, I am afraid we don't have a ready example for that. Feel free to try the approach with the old css styles and let me know how it goes.

[Dan]

Hi Eyup,

I am trying to copy the old css style but I have found a problem. In the old version between the <li> and the cell there was no intermediate tag. But in the current version a new div has been inserted with the class "k-list-item-text". Is there a way to remove this?

The reason I need this is to use the display: table, table-row and table-cell. The ul can be display table, the li can be display table-row any my cell to be table-cell but I have found out that now there is an extra div that breaks the layout

[Eyup]

Hi Dan,

Generally, jQuery provides a convenient method to remove unwanted classes from elements:
https://api.jquery.com/removeclass/

But since the case is getting more specific, for more detailed assistance, I would kindly ask you to open a formal support ticket and send us a very basic runnable sample.

[Dan]

Hi Eyup,

BTW: I was asking to remove the entire tag not just the class cause that does not influence the table display

The case is not really specific. I just want to have the same functionality as the multicombobox in the autocomplete but with the exception that I do not want to set the width of columns, I need for them to be equally spaced like a table.

I will open a support ticket.