Available in the OSS Version
Combo Box - KnockoutJS Binding

My Favourite Actors

Selected Actor:
This sample is designed for a larger screen size.
On mobile, try rotating your screen, view full size, or email to another device.
Note: The Knockout extensions do not work with the ASP.NET MVC Helpers.
This sample demonstrates how to bind igCombo to data managed by KO data bindings. Binding an array to combo's drop-down and model property to the combo selected items is implemented.
Code View

Show In JsFiddle
Copy to Clipboard
HTML
                    <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

    <!-- Ignite UI for jQuery Required Combined CSS Files -->
    <link href="http://cdn-na.infragistics.com/igniteui/2024.1/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="http://cdn-na.infragistics.com/igniteui/2024.1/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.1/latest/js/infragistics.core.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2024.1/latest/js/infragistics.lob.js"></script>
</head>
<body>
    <style>
        label { display: inline-block; }
        .title {margin-left: 10px;}
        .horizontal-container { padding: 10px; margin-left:10px;}
		.horizontal-container .input-add-actor { width: 196px; height: 22px; border-radius: 4px; border: 1px solid #4F4F4F; font-size: 17px; }
		.horizontal-container input[type=button] { margin-left: 20px; font-size: 14px; vertical-align: top; }
        .horizontal-container select { border-radius: 4px; border: 1px solid #4F4F4F; width: 200px; }
    </style>

    <script src="/js/external/knockout-latest.js" type="text/javascript"></script>
    <script src="/js/external/knockout.mapping-latest.js" type="text/javascript"></script>
    <script type="text/javascript" src="http://cdn-na.infragistics.com/igniteui/2024.1/latest/js/extensions/infragistics.ui.combo.knockout-extensions.js"></script>

    <script type="text/javascript">
        //  http://www.imdb.com/find?q=Ivan+Ivanov&s=nm
        var model = [
                { name: "Adam Sandler", id: "nm0001191" },
                { name: "Brooke Shields", id: "nm0000222" },
                { name: "Charles Chaplin", id: "nm0000122" },
                { name: "Charlize Theron", id: "nm0000234" },
                { name: "Dustin Hoffman", id: "nm0000163" },
                { name: "Hristo Shopov", id: "nm0794885" },
                { name: "Jeremy Irons", id: "nm0000460" },
                { name: "Noomi Rapace", id: "nm0636426" },
                { name: "Nicole Kidman ", id: "nm0000173" },
                { name: "Robert De Niro", id: "nm0000134" },
                { name: "Tom Cruise", id: "nm0000129" },
                { name: "Tom Hanks", id: "nm0000158" }
        ];

        var viewModel = new ViewModel(model);
        function ViewModel(actorsList) {
            var self = this;
            this.actorsList = actorsList;

            //  The array of actor objects and a computed array of actor names 
            //  for the plain SELECT which cannot work with objects
            this.actors = ko.observableArray(self.actorsList);

            //  The name of the currently selected actor.
            this.selectedActor = ko.observableArray([self.actors()[0].id]);
            this.index = ko.observable(0);
            this.selectedActorName = ko.computed(function () {
            	var id = self.selectedActor()[0]
            	for (i = 0; i < self.actorsList.length; i++) {
            		if (self.actorsList[i].id === id) {
            			return self.actorsList[i].name;
            		}
            	}
            });

            //  Members that facilicate actor list manipulations
            this.newActor = ko.observable("");
            this.addActor = function () {
            	var newActObj;
            	if (self.newActor() !== "" && !self.findActorRecord(self.newActor())) {
            		newActObj = {
            			id: "new" + self.index(),
            			name: self.newActor()
            		};
            		self.index(self.index() + 1);
            		self.actors.push(newActObj);
            		self.selectedActor([newActObj.id]);
            		self.newActor("");
                }
            }

            this.removeActor = function () {
                self.actors.remove(function (item) {
                    return item.id === self.selectedActor()[0];
                });
                self.newActor("");

                if (self.actors().length > 0) {
                    self.selectedActor([self.actors()[0].id]);
                }
                else {
                    self.selectedActor("");
                }
            }

            //  Members that facilitte IMDB hyperlinks
            this.findActorRecord = function (selectedActor) {
                for (var i = 0; i < self.actors().length; i++) {
                    if (self.actors()[i].name === selectedActor) {
                        return self.actors()[i];
                    }
                }
            }

            this.imdb_url = ko.computed(function () {
                var actor = self.findActorRecord(self.selectedActor());
                if (actor && actor.id) {
                    return "http://www.imdb.com/name/" + actor.id + "/";
                }
                else {
                	return "http://www.imdb.com/find?q=" + encodeURIComponent(self.selectedActorName()) + "&s=nm";
                }
            });

            this.actorName_imdb = ko.computed(function () {
            	return self.selectedActorName() + " at IMDB";
            });
        }

        $(function () {
            ko.applyBindings(viewModel);
            setListLength();
            viewModel.actors.subscribe(setListLength);
            $(".horizontal-container input[type=button]").each(function () {
                $(this).igButton({
                    labelText: $(this).val(),
                    centerLabel: true,
                    width: 80,
                    height: 32
                });
            });
        });

        function setListLength() {
            $("#listboxActors").attr("size", viewModel.actors().length);
        }
    </script>

    <h2 class="title">My Favourite Actors</h2>
    <div class="horizontal-container">
        <label>Selected Actor:</label>
        <a data-bind="attr: { href: imdb_url, title: actorName_imdb }, text: selectedActorName" href="#" target="_blank"></a>
    </div>

    <div class="horizontal-container">
        <input data-bind="value: newActor" type="text" class="input-add-actor"/>
        <input data-bind="click: addActor" type="button" value="Add"/>
    </div>


    <div class="horizontal-container">
		<span id="comboActors" data-bind="igCombo: {
                dataSource: actors,
                textKey: 'name',
                valueKey: 'id',
	            selectedItems: selectedActor,
                width: '200',
                mode: 'dropdown',
                enableClearButton: false
            }"></span>
        <input data-bind="click: removeActor" type="button" value="Remove"/>
    </div>
    <div class="horizontal-container">
		<select id="listboxActors" data-bind="options: actors, selectedOptions: selectedActor, optionsValue: 'id', optionsText: 'name'"></select>
    </div>
</body>
</html>
Ignite UI for jQuery | Samples

Search Results

Combo Box - KnockoutJS Binding

My Favourite Actors

Code View
