Wijmo 5 - Multi-Column ComboBoxes

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://cdn.wijmo.com/5.latest/styles/wijmo.min.css">
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.input.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.grid.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.chart.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/interop/angular/wijmo.angular.min.js"></script>
 <div id="combobox"></div>

CSS

td, th {
    /*margin-left: 0 !important;*/
    width: 80px !important;
}
/* Header */

#table_header_div{ /* <DIV> */    
    pointer-events: none;
    cursor: default;
    //position: fixed;
    background-color: #ddd;
    border: 1px solid black;
}

.fixed_header_table{ /* <table> */
   
}

tbody tr .header{  
    border: 1px solid black;
    font-weight:bold;
    text-align:center;
}

/* Data Cells */
table :not(.fixed_header_table){
    margin-bottom: 30px;
}

tbody tr .combo_data{
    text-align:center;
}

JavaScript

window.onload = function () { 
var products='Computer,Stereo,Phone,Camera'.split(","),
countries='US,Germany,UK,Japan,Spain,Estonia,Egypt,Canada'.split(',');
var data = [
        { id: "", country: "", sales: "", expenses: "", product: "" }, // Empty Row for the header
      
    ];
for(var i=0;i<1000;i++){
  data.push({
  id:i,
  country:countries[i%countries.length],
  product:products[i%products.length],
  sales:Math.round(Math.random()*100),
  expenses:Math.round(Math.random()*100)
  })
}


var combobox = new wijmo.input.ComboBox('#combobox', { 
        headerPath: 'id',
        itemsSource: data 
    });

    combobox.formatItem.addHandler(function (s, e) { 
        e.item.innerHTML = '<table id="customTable"><tr>' +
            '<td class="combo_data id" >' + e.data.id + '</td>' + 
  	        '<td class="combo_data" >' + e.data.country + '</td>' +
            
  	        '<td class="combo_data" >' + e.data.product + '</td>' +
  	        '<td class="combo_data" >' + e.data.sales + '</td>' +
            '<td class="combo_data" >' + e.data.expenses + '</td>' +
            '</tr></table>';
    });

    combobox.refresh();
    
    combobox.isDroppedDownChanged.addHandler(function (s, e) { 
       addHeader(s);        
    });
    window.onresize=function(){
    
     addHeader(combobox);
    }
  function addHeader(s){
  if (s.isDroppedDown) { 
            var table = document.getElementById("customTable");

            table.parentElement.setAttribute("id", "table_header_div"); // Set the id for Element div tag
            table.setAttribute("class", "fixed_header_table"); // Set class for First Table tag
            
            var row = table.insertRow(0);

            row.innerHTML = '<tr><td colspan="6"> <span class="glyphicon glyphicon-fast-backward"></span> <span class="glyphicon glyphicon-step-backward"></span> <span class="paginationtext">Page 1 of 10</span>  <span class="glyphicon glyphicon-step-forward"></span><span class="glyphicon...