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

Multi-Column Combo Box

8 Answers 452 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
Shawn
Top achievements
Rank 2
Shawn asked on 15 Dec 2011, 06:39 PM
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?

8 Answers, 1 is accepted

Sort by
0
John DeVight
Top achievements
Rank 1
answered on 18 Jan 2012, 05:13 PM
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
0
Patrick Rioux
Top achievements
Rank 1
answered on 20 Feb 2012, 06:07 PM
Works very good but how you do it if you need a title to these columns?
0
John DeVight
Top achievements
Rank 1
answered on 21 Feb 2012, 05:34 AM
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
0
Patrick Rioux
Top achievements
Rank 1
answered on 21 Feb 2012, 03:28 PM
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'.
0
beauXjames
Top achievements
Rank 2
answered on 01 Nov 2012, 07:13 PM
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? 
0
Patrick Rioux
Top achievements
Rank 1
answered on 01 Nov 2012, 10:06 PM
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.
0
Shawn
Top achievements
Rank 2
answered on 02 Nov 2012, 12:25 AM
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.
0
VINO
Top achievements
Rank 1
answered on 09 Nov 2012, 06:35 AM
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           
               },



Tags
ComboBox
Asked by
Shawn
Top achievements
Rank 2
Answers by
John DeVight
Top achievements
Rank 1
Patrick Rioux
Top achievements
Rank 1
beauXjames
Top achievements
Rank 2
Shawn
Top achievements
Rank 2
VINO
Top achievements
Rank 1
Share this question
or