Available in the OSS Version

Templating Engine - Basic

The Infragistics Templating Engine provides a consistent templating syntax for all of the Ignite UI for jQuery controls.

This sample is designed for a larger screen size.

On mobile, try rotating your screen, view full size, or email to another device.

This sample demonstrates the templating syntax in context when customizing the igCombo control's header, items, and footer.

Code View

Show In JsFiddle

Copy to Clipboard

                    <!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>

Ignite UI for jQuery | Samples

Search Results

Templating Engine - Basic

Code View