New to Kendo UI for jQuery? Download free 30-day trial


Product Progress® Kendo UI® ListBox for jQuery
Created with version 2018.3.911



I'm trying to add a group in my listbox. 

Suggested Workarounds

Currently the Kendo UI ListBox does not offer such functionality out of the box but you can upvote this public feature request.

  1. Use the Kendo UI MultiSelect instead
  2. Use a custom approach to make the items look as if they are grouped
    • Sort by the propery that you would have grouped
    • Iterate the items on dataBound and insert a visual separator
          float: right;
          border-radius: 5px;
          background: #999;
          font-size: 11px;
          padding: 0 5px;
          margin-top: -16px;
          line-height: 18px;
          color: #fff;
    <div id="example" >
      <div class="demo-section k-content">
        <h4>Search for shipping names</h4>
        <select id="customers"></select>
        var previousContactName = "";
        $(document).ready(function() {
            placeholder: "Select customers...",
            template: function(e){
              var template = "";
              if(previousContactName != e.Country){
                previousContactName = e.Country;
                template += "<div class='group'><hr><span class='myGroup'>"+e.Country+"</span></div>"
              template += e.ContactName;
              return template;
            height: 400,
            dataSource: {
              type: "odata",
              transport: {
                read: ""
              sort: { field: "Country", dir: "asc" }
            dataBound: function(e){
              var lbItems = this.items();
              for(var i=0; i < lbItems.length; i++){
                var groupDiv = $(lbItems[i]).find(".group")
In this article