Available in the OSS Version

Combo Box - Templating

This sample demonstrates the use of templates in the igCombo control.

This sample is designed for a larger screen size.

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

There are three places to use custom template points in the igCombo control: header, footer, and item. The header template displays above the drop-down list and the footer displays below the list. Item templates are repeated for each item within the igCombo control. This sample shows how header and footer templates can provide more information about the list as a whole and how the item templates can provide more information about each individual item. This sample accesses the Northwind Service API.

Code View

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/2024.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="http://cdn-na.infragistics.com/igniteui/2024.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/2024.2/latest/js/infragistics.core.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2024.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>