Available in the Full Version

Data Grid - KnockoutJS Configuration

Customer IDContact NameCityCountry
Add new row
ALFKIMaria AndersBerlinGermany
ANATRAna TrujilloMéxico D.F.Mexico
ANTONAntonio MorenoMéxico D.F.Mexico
AROUTThomas HardyLondonUK
BERGSChristina BerglundLuleåSweden
BLAUSHanna MoosMannheimGermany
BLONPFrédérique CiteauxStrasbourgFrance
BOLIDMartín SommerMadridSpain
BONAPLaurence LebihanMarseilleFrance
BOTTMElizabeth LincolnTsawassenCanada
BSBEVVictoria AshworthLondonUK
API Explorer
Edit Selected Row ALFKI



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 support of knockout.js bindings with the igGrid widget. In this implementation, the selected row of the grid is bound using a standard two-way binding.

Code View

Copy to Clipboard 
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		body {
			padding: 0px !important;
			margin: 0px !important;
		}
	</style>

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

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

	<script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/extensions/infragistics.datasource.knockoutjs.js"></script>
	<script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/extensions/infragistics.ui.grid.knockout-extensions.js"></script>

	<!-- Used to add markup and provide logging
	functionality for the API Explorer and API Viewer UI -->
	<script src="/js/apiviewer.js"></script>

	<script src="/data-files/nw-customers-with-orders.js"></script>
</head>
<body>

	<div id="error-message" style="color: #FF0000; font-weight: bold;"></div>

	<table id="gridKO" data-bind="igGrid: {
		dataSource: data,
		primaryKey: 'ID',
		width: '100%',
		autoCommit: true,
		features: [
			{
				name: 'Updating',
				editMode: 'row',
				columnSettings: [
					{
						columnKey: 'ID',
						readOnly: true
					}
				],
				generatePrimaryKeyValue: function ( evt, ui )
				{
					// setting a primary key for the new row
					ui.value = 'PK' + ui.value;
				},
				rowDeleting: function (evt, ui) {
					var rowID = ui.rowID;
					var selectedRow = $('#gridKO').igGridSelection('selectedRow');
					if (selectedRow == null || rowID != selectedRow.id) {
						$('#error-message').html('You should select the row before deleting it!').stop(true, true).fadeIn(500).delay(3000).fadeOut(500);
						return false;
					}
				}
			},
			{
				name: 'Selection',
				mode: 'row',
				multipleSelection: false,
				activation: false,
				rowSelectionChanged: selectionChanged
			}
		],
		autoGenerateColumns: false,
		columns: [
			{ headerText: 'Customer ID', key: 'ID', dataType: 'string', width: '25%'},
			{ headerText: 'Contact Name', key: 'ContactName', dataType: 'string', width: '25%' },
			{ headerText: 'City', key: 'City', dataType: 'string', width: '25%' },
			{ headerText: 'Country', key: 'Country', dataType: 'string', width: '25%' }
		],
		rendered: function (evt, ui) {
			$('#gridKO').igGridSelection('selectRow', 0);
		}
	}"></table>

	<div class="api-explorer">
		<fieldset>
			<legend>Edit Selected Row</legend>
			<label><b>Customer ID:</b> </label>
			<span id="idEditor" data-bind="text: (selectedItemID() > -1 && selectedItemID() < data().length && data().length>0) ? data()[selectedItemID()].ID : '', valueUpdate: 'input'"></span>
			<br />
			<label><b>Contact Name:</b> </label>
			<input id="nameEditor" type="text" data-bind="value: (selectedItemID() > -1 && selectedItemID() < data().length) ? data()[selectedItemID()].ContactName : '', valueUpdate: 'input'" />
			<br />
			<label><b>City:</b> </label>
			<input id="cityEditor" type="text" data-bind="value: (selectedItemID() > -1 && selectedItemID() < data().length) ? data()[selectedItemID()].City : '', valueUpdate: 'input'" />
			<br />
			<label><b>Country:</b> </label>
			<input id="countryEditor" type="text" data-bind="value: (selectedItemID() > -1 && selectedItemID() < data().length) ? data()[selectedItemID()].Country : '', valueUpdate: 'input'" />
			<br />
		</fieldset>
	</div>

	<script>
		var itemsModel, db = nwCustomersWithOrders;

		var Item = function (ID, ContactName, City, Country) {
			var self = this;
			this.ID = ko.observable(ID);
			this.ContactName = ko.observable(ContactName);
			this.City = ko.observable(City);
			this.Country = ko.observable(Country);
		}

		function ItemsViewModel() {
			var self = this;
			self.data = ko.observableArray([]);
			self.selectedItemID = ko.observable(0);

			for (var i = 0; i < db.length; i++) {
				self.data.push(new Item(db[i].ID, db[i].ContactName, db[i].City, db[i].Country));
			}

			self.selectionChanged = function (evt, ui) {
				var rowdata = ui.row;
				// find it in the array so we don't lose the observables
				var selectedItemInArray = ko.utils.arrayFirst(self.data(), function (item) {
					return item.ID() === rowdata.id;
				});

				if (selectedItemInArray != null) {
					self.selectedItemID(parseInt(rowdata.index));
				}
				else {
					self.selectedItemID(0);
				}
			};
		}

		$(function () {
			// Used to show output in the API Viewer at runtime,
			// defined in external script 'apiviewer.js'
			var apiViewer = new $.ig.apiViewer();

			itemsModel = new ItemsViewModel();
			ko.applyBindings(itemsModel);
		});
	</script>

</body>
</html>