Multi-Column Combo Box

9 posts, 0 answers
  1. Shawn
    Shawn avatar
    43 posts
    Member since:
    Dec 2011

    Posted 15 Dec 2011 Link to this post

    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?
  2. John DeVight
    John DeVight avatar
    209 posts
    Member since:
    Jan 2010

    Posted 18 Jan 2012 Link to this post

    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
  3. Kendo UI is VS 2017 Ready
  4. Patrick Rioux
    Patrick Rioux avatar
    53 posts
    Member since:
    Sep 2012

    Posted 20 Feb 2012 Link to this post

    Works very good but how you do it if you need a title to these columns?
  5. John DeVight
    John DeVight avatar
    209 posts
    Member since:
    Jan 2010

    Posted 20 Feb 2012 Link to this post

    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
  6. Patrick Rioux
    Patrick Rioux avatar
    53 posts
    Member since:
    Sep 2012

    Posted 21 Feb 2012 Link to this post

    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'.
  7. beauXjames
    beauXjames avatar
    20 posts
    Member since:
    Aug 2012

    Posted 01 Nov 2012 Link to this post

    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? 
  8. Patrick Rioux
    Patrick Rioux avatar
    53 posts
    Member since:
    Sep 2012

    Posted 01 Nov 2012 Link to this post

    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.
  9. Shawn
    Shawn avatar
    43 posts
    Member since:
    Dec 2011

    Posted 01 Nov 2012 Link to this post

    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.
  10. VINO
    VINO avatar
    1 posts
    Member since:
    Apr 2012

    Posted 09 Nov 2012 Link to this post

    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           
                   },



Back to Top
Kendo UI is VS 2017 Ready