Multi-Column Combo Box

[Shawn]

Is it possible to show multiple columns in the combo box?  For example if I want to show a list of users with user name, first name and last name.  Is that possible?

[John DeVight]

Hi Shawn,

Yes, you can show multiple columns in the combobox.

Let's say I have a JSON array defined as follows:

var people =

            [

                { Id: 1, FirstName: "John", LastName: "Doe" },

                { Id: 2, FirstName: "Jayne", LastName: "Smith" }

            ];

And I want to display the FirstName and LastName in the dropdown.  I can do so using a template.  Here is the combobox:

$('#comboBox').kendoComboBox({

    dataTextField: 'FirstName',

    dataValueField: 'Id',

    template: "<table><tr><td width='100px'>${ FirstName}</td><td width='100px'>${ LastName }</td></tr></table>",

    dataSource: { data: people }

});

Hope this helps...

Regards,

John DeVight

[Patrick Rioux]

Works very good but how you do it if you need a title to these columns?

[John DeVight]

Hi Patrick,

The list of items is rendered in a div.  The name of the div is the name of the ComboBox + "-list".  So, in the example above, the div would be called "comboBox-list".  This div contains an unordered list of the items.  To add a title to these columns, you could prepend a div to the "comboBox-list" div with the column titles like this:

$('<div/>')

  .html("<table><tr><td width='100px'>First Name</td><td width='100px'>Last Name</td></tr></table>")

  .prependTo('#comboBox-list');

Regards,

John DeVight

[Patrick Rioux]

Thank you for the answer. I would rather wants a native widget way to do it since the way you have indicated works but affect the control rendering. The DropDownList is definitely not supporting multiple columns 'out of the box'.

[beauXjames]

To open this topic back up, having a Multi-Column ComboBox & DropDownList with the ability to customize the header and the footer would be most useful. Has there been any work on these topics with any of the latest releases to facilitate the implementation of the element? 

[Patrick Rioux]

From my knowledge there is nothing done to easily support multiple columns out of the box.
Maybe we should add this item to the user voice forum.

[Shawn]

I have used some other libraries in the past from a company called common controls that had a nice multi column combo box which worked pretty well.  They don't update the product anymore but here is a link

http://www.common-controls.com/en/index.php

I know it is doable and I have not tried the solution below as I have been focussing on the mobile aspects of my solutions, but it sounds like some have and it is not the best or graceful solution.

We should add it to the wish list - I can do that unless someone else wants to.

[VINO]

Hi John ,
Thank you for the answer
 
I have a multi column with template combo box, and the combo having two columns. when i try to use the combo box filter that time i need to work that filter on that two columns at a time or change the columns filter in run time . how can i achieve this.. 


Please help.

$("#cboLocation").kendoComboBox({

               dataTextField: "name",

               dataValueField: "locationid",

               filter: "contains",

               placeholder: "Select Location",

               template: "<table><tr><td width='100px'>${ locationid }</td><td width='100px'>${ name }</td></tr></table>",

               suggest: true,

               dataSource: {

                   type: "json",

                   data : jdataLocation,

                  // contentType: "application/json; charset=utf-8",

                  // serverFiltering: true,

                  // serverPaging: true,

                   pageSize: 20           

               },