igCombo - multiple columns

by georgianastasov

HTML

<script src="https://igniteui.com/js/modernizr.min.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet"></link>

<div id="combo"></div>

CSS

/* style */
.header{
  display: flex; 
  justify-content: space-between;
  border-bottom:1px solid black;
}

.column{
  padding: 0.3rem;
}

.items{
  display: flex; 
  justify-content:space-between;
  text-align: center;
}

.name{
  margin-left:1.5rem;
}

JavaScript

$(function () {

	var data = [ 
  	{ID: 1, Name: 'John', City: 'New York'},
  	{ID: 2, Name: 'Bob', City: 'Detroit'},
  	{ID: 3, Name: 'Sam', City: 'Miami'},
  	{ID: 4, Name: 'Cole', City: 'Miami'},
  	{ID: 5, Name: 'Yan', City: 'Detroit'},
  ]

						//set your custom styles according to your custom logic
            $("#combo").igCombo({
            		valueKey: "Name",
                textKey: "Name", 
                width: "400px",
                visibleItemsCount: 6,
                dataSource: data,
                //header template
                headerTemplate: "<div class='header'><div class='column'>ID</div><div class='column'>Name</div><div class='column'>City</div></div>",
                //item template
                itemTemplate: "<div class='items'><div>${ID}</div><div class='name'>${Name}</div><div>${City}</div></div>"
            });

        });