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

Environment

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

 

Description

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
    <style>
        .myGroup{
          float: right;
          border-radius: 5px;
          background: #999;
          font-size: 11px;
          padding: 0 5px;
          margin-top: -16px;
          line-height: 18px;
          color: #fff;
        }
    </style>
    <div id="example" >
      <div class="demo-section k-content">
        <h4>Search for shipping names</h4>
        <select id="customers"></select>
      </div>
      <script>
        var previousContactName = "";
        $(document).ready(function() {
          $("#customers").kendoListBox({
            selectable:true,
            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: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
              },
              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")
                if(groupDiv.length){
                  groupDiv.insertBefore($(lbItems[i]));
                }
              }
            }
          });
        });
      </script>
    </div>
In this article