Available in the OSS Version
Templating Engine - Overview
The Ignite UI for jQuery® Templating Engine is a JavaScript library used to apply a content template to a set of HTML elements.
This sample uses CTP (Community Technical Preview) features. The API and behavior may change when these features are released with full support.
This sample is designed for a larger screen size.
On mobile, try rotating your screen, view full size, or email to another device.
The engine supports conditional logic and also nested templates.
See the complete list of samples in the menu.
Code View
Copy to Clipboard
$("#comboIG").igCombo({
highlightMatchesMode: "contains",
responseDataKey: "d.results",
valueKey: "Name",
width: "325px",
closeDropDownOnBlur: false,
visibleItemsCount: 3,
dataSource: "https://www.igniteui.com/api/employees?callback=?",
headerTemplate: "<div id='comboHeaderTemplate' class='comboTemplates'>Employees</div>",
footerTemplate: "<div id='comboFooterTemplate' class='comboTemplates'>More information at <a href='https://www.infragistics.com' target='_blank'>https://www.infragistics.com</div>",
itemTemplate: "<div class='comboItemContainer'><div class='empImage'><a href='https://www.infragistics.com' target='_blank'><img src='${ImageUrl}' width='64px' /></a></div><div class='empInfo'><span class='empName'>${Name}</span><p>${BirthDate}</p><div>${Address}</div></div></div>"
});
<div id="comboIG"></div>
#comboContainer
{
margin-bottom: 30px;
}
.comboTemplates
{
text-align: center;
padding: 2px;
}
#comboHeaderTemplate
{
font-size: large;
font-weight: bold;
background-color: rgb(185, 9, 11);
color: White;
}
#comboFooterTemplate
{
font-size: small;
background-color: rgb(245, 245, 164);
}
.empImage
{
float: left;
width: 64px;
padding-top: 3px;
}
.empInfo
{
float: left;
padding-left: 5px;
width: 240px;
}
.empName
{
font-weight: bold;
}
.comboItemContainer
{
width: 325px;
white-space: normal;
height: 70px;
}
li.ui-igcombo-listitem div.empImage a
{
border: none
}
.igsb-running-sample > div:first-of-type
{
width : 50% !important;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- Ignite UI for jQuery Required Combined CSS Files -->
<link href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/structure/infragistics.css" rel="stylesheet" />
<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<!-- Ignite UI for jQuery Required Combined JavaScript Files -->
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.lob.js"></script>
</head>
<body>
<style type="text/css">
#comboContainer
{
margin-bottom: 30px;
}
.comboTemplates
{
text-align: center;
padding: 2px;
}
#comboHeaderTemplate
{
font-size: large;
font-weight: bold;
background-color: rgb(185, 9, 11);
color: White;
}
#comboFooterTemplate
{
font-size: small;
background-color: rgb(245, 245, 164);
}
.empImage
{
float: left;
width: 64px;
padding-top: 3px;
}
.empInfo
{
float: left;
padding-left: 5px;
width: 240px;
}
.empName
{
font-weight: bold;
}
.comboItemContainer
{
width: 325px;
white-space: normal;
height: 70px;
}
li.ui-igcombo-listitem div.empImage a
{
border: none
}
.igsb-running-sample > div:first-of-type
{
width : 50% !important;
}
</style>
<div id="comboIG"></div>
<script>
$(function () {
$("#comboIG").igCombo({
highlightMatchesMode: "contains",
responseDataKey: "d.results",
valueKey: "Name",
width: "325px",
closeDropDownOnBlur: false,
visibleItemsCount: 3,
dataSource: "https://www.igniteui.com/api/employees?callback=?",
headerTemplate: "<div id='comboHeaderTemplate' class='comboTemplates'>Employees</div>",
footerTemplate: "<div id='comboFooterTemplate' class='comboTemplates'>More information at <a href='https://www.infragistics.com' target='_blank'>https://www.infragistics.com</div>",
itemTemplate: "<div class='comboItemContainer'><div class='empImage'><a href='https://www.infragistics.com' target='_blank'><img src='${ImageUrl}' width='64px' /></a></div><div class='empInfo'><span class='empName'>${Name}</span><p>${BirthDate}</p><div>${Address}</div></div></div>"
});
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Ignite UI for jQuery Required Combined CSS Files -->
<link href="/igniteui/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="/igniteui/css/structure/infragistics.css" rel="stylesheet" />
<style type="text/css">
#comboContainer {
margin-bottom: 30px;
}
.comboTemplates {
text-align: center;
padding: 2px;
}
#comboHeaderTemplate {
font-size: large;
font-weight: bold;
background-color: rgb(185, 9, 11);
color: White;
}
#comboFooterTemplate {
font-size: small;
background-color: rgb(245, 245, 164);
}
.empImage {
float: left;
width: 64px;
padding-top: 3px;
}
.empInfo {
float: left;
padding-left: 5px;
width: 240px;
}
.empName {
font-weight: bold;
}
.comboItemContainer {
width: 325px;
white-space: normal;
height: 70px;
}
li.ui-igcombo-listitem div.empImage a {
border: none;
}
.igsb-running-sample > div:first-of-type {
width: 50% !important;
}
</style>
</head>
<body>
<my-app>Loading...</my-app>
<!-- 1. Load libraries -->
<script src="/js/modernizr.min.js"></script>
<script src="/js/jquery.min.js"></script>
<script src="/js/jquery-ui.min.js"></script>
<!-- IE required polyfills, in this exact order -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.0/es6-shim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.20/system-polyfills.js"></script>
<script src="https://unpkg.com/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
<script src="https://unpkg.com/zone.js@0.6.23?main=browser"></script>
<script src="https://unpkg.com/typescript@2.0.2/lib/typescript.js"></script>
<script src="https://unpkg.com/reflect-metadata@0.1.3"></script>
<script src="https://unpkg.com/systemjs@0.19.27/dist/system.src.js"></script>
<!-- Ignite UI for jQuery Required Combined JavaScript Files -->
<script src="/igniteui/js/infragistics.core.js"></script>
<script src="/igniteui/js/infragistics.lob.js"></script>
<script>
System.config( {
paths: {
'npm:': 'https://unpkg.com/'
},
map: {
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
'igniteui-angular-wrappers': 'npm:igniteui-angular-wrappers',
'rxjs': 'npm:rxjs'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
rxjs: {
defaultExtension: 'js'
},
'igniteui-angular-wrappers': {
main: './index.js',
defaultExtension: 'js'
}
},
transpiler: 'typescript',
typescriptOptions: { emitDecoratorMetadata: true }
} );
System.import( 'basic-usage.ts' ).then( null, console.error.bind( console ) );
</script>
</body>
</html>
import { Component, NgModule } from '@angular/core';
import { IgComboComponent } from 'igniteui-angular-wrappers';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
declare var jQuery: any;
@Component({
selector: 'my-app',
templateUrl: `<ig-combo widgetId="comboIG" [options]="combo.options"></ig-combo>`
})
export class AppComponent {
public combo: any;
constructor() {
this.combo = {
options: {highlightMatchesMode: "contains", responseDataKey: "d.results", valueKey: "Name", width: "325px", closeDropDownOnBlur: false, visibleItemsCount: 3, dataSource: "https://www.igniteui.com/api/employees?callback=?", headerTemplate: "<div id='comboHeaderTemplate' class='comboTemplates'>Employees</div>", footerTemplate: "<div id='comboFooterTemplate' class='comboTemplates'>More information at <a href='https://www.infragistics.com' target='_blank'>https://www.infragistics.com</div>",
itemTemplate: "<div class='comboItemContainer'><div class='empImage'><a href='https://www.infragistics.com' target='_blank'><img src='${ImageUrl}' width='64px' /></a></div><div class='empInfo'><span class='empName'>${Name}</span><p>${BirthDate}</p><div>${Address}</div></div></div>"}
};
}
}
@NgModule({
imports: [ BrowserModule ],
declarations: [ AppComponent, IgComboComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule {}
platformBrowserDynamic().bootstrapModule(AppModule);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Ignite UI for jQuery Required Combined CSS Files -->
<link href="/igniteui/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="/igniteui/css/structure/infragistics.css" rel="stylesheet" />
<!-- 1. Load libraries -->
<script src="/js/modernizr.min.js"></script>
<script src="/js/jquery.min.js"></script>
<script src="/js/jquery-ui.min.js"></script>
<!-- ReactJS library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.16/browser.js"></script>
<!-- Ignite UI for jQuery Required Combined JavaScript Files -->
<script src="/igniteui/js/infragistics.core.js"></script>
<script src="/igniteui/js/infragistics.lob.js"></script>
<script src="/js-data/nw-products"></script>
<!-- Ignite UI for jQuery ReactJS Files -->
<script src="https://unpkg.com/igniteui-react@1.0.1/igniteui-react.js"></script>
</head>
<body>
<style type="text/css">
#comboContainer {
margin-bottom: 30px;
}
.comboTemplates {
text-align: center;
padding: 2px;
}
#comboHeaderTemplate {
font-size: large;
font-weight: bold;
background-color: rgb(185, 9, 11);
color: White;
}
#comboFooterTemplate {
font-size: small;
background-color: rgb(245, 245, 164);
}
.empImage {
float: left;
width: 64px;
padding-top: 3px;
}
.empInfo {
float: left;
padding-left: 5px;
width: 240px;
}
.empName {
font-weight: bold;
}
.comboItemContainer {
width: 325px;
white-space: normal;
height: 70px;
}
li.ui-igcombo-listitem div.empImage a {
border: none;
}
.igsb-running-sample > div:first-of-type {
width: 50% !important;
}
</style>
<div id="app"></div>
<script type="text/babel">
var App = React.createClass({
render: function() {
let comboControl = {
highlightMatchesMode: "contains",
responseDataKey: "d.results",
valueKey: "Name",
width: "325px",
closeDropDownOnBlur: false,
visibleItemsCount: 3,
dataSource: "https://www.igniteui.com/api/employees?callback=?",
headerTemplate: "
<div id='comboHeaderTemplate' class='comboTemplates'>$$(employees)</div>",
footerTemplate: "
<div id='comboFooterTemplate' class='comboTemplates'>$$(more_info) <a href='$$(more_info_url)' target='_blank'>$$(more_info_url)</div>",
itemTemplate: "
<div class='comboItemContainer'><div class='empImage'><a href='$$(more_info_url)' target='_blank'>
<img src='${ImageUrl}' width='64px' /></a></div><div class='empInfo'>
<span class='empName'>${Name}</span><p>${BirthDate}</p><div>${Address}</div></div></div>"
};
return (
<IgCombo id="igCombo" highlightMatchesMode={comboControl.highlightMatchesMode}
responseDataKey={comboControl.responseDataKey}
valueKey={comboControl.valueKey}
width={comboControl.width}
closeDropDownOnBlur={comboControl.closeDropDownOnBlur}
visibleItemsCount={comboControl.visibleItemsCount}
dataSource={comboControl.dataSource}
headerTemplate={comboControl.headerTemplate}
footerTemplate={comboControl.footerTemplate}
itemTemplate={comboControl.itemTemplate} />
);
}
});
ReactDOM.render(
<App />, document.getElementById("app"));
</script>
</body>
</html>