Ignite UI™ API Documentation

ig.KnockoutDataSource

Overview
Options
Events
Methods

The KnockoutDataSource extends the DataSource class and is a client-side component which adds Knockout.js support for both Ignite UI controls as well as plain DOM elements. The KnockoutDataSource allows you to synchronize your page’s model and views by creating bindings for adding, updating and deleting rows. Also data binding (reading data) is completely transparent, meaning you can use an observable array as a data store and it works seamlessly with knockout.js requiring no extra code. Both arrays of rows, as well as individual cells can set up as observable objects. The data source features support for filtering, paging, sorting, column summaries and updating data. Further information regarding the classes, options, events, methods and themes of this API are available under the associated tabs above.

Code Sample

        <!doctype html>
        <html>
        <head>
            <!-- jQuery Core -->
            <script src="js/jquery.js" type="text/javascript"></script>
            <!-- jQuery UI -->
            <script src="js/jquery-ui.js" type="text/javascript"></script>
            <!-- Infragistics Loader Script -->
            <script src="js/infragistics.loader.js" type="text/javascript"></script>
            <script src="js/adventureWorks.min.js" type="text/javascript"></script>
            <!-- Infragistics Loader Initialization -->
            <script type="text/javascript">
		        var itemsModel, 
		        db = [{"Name": "Bread","Rating": 4,"Price": "2.5"}, 
		              {"Name": "Milk", "Rating": 3, "Price": "3.5"},
			        {"Name": "Vint soda", "Rating": 3, "Price": "20.9"}];
		        function Item(name, price, rating) {
		            return {
		                name: ko.observable(name),
		                price: ko.observable(price),
		                rating: ko.observable(rating)
		            };
		        };
		        function ItemsViewModel() {
		                var self = this;
		                self.data = ko.observableArray([ ]);
		                for (var i = 0; i < 3; i++) {
		                    self.data.push(new Item(db[i].Name, db[i].Price, db[i].Rating));
		                }		
		        }
		        var ds, render = function (success, error) { 
			        if (success) { 				
				        ds.addRow(4, {name : "CD Player", price : "40", rating : 4}, true); 
				         $($.ig.tmpl("<tr><td>Name: ${name}</td><td>Price: ${price}</td><td>Rating: ${rating}</td></tr>", ds.dataView())).appendTo("#table1"); 
		 
			        } else { 
				        alert(error); 
			        } 
		        }
		        $.ig.loader(function () {
		        var model = new ItemsViewModel();
		        ko.applyBindings(model);
			        ds = new $.ig.KnockoutDataSource({ 
				        callback: render,  
				        dataSource: model,
				        type: 'json',
				        responseDataKey: 'data'
			        }); 
			        ds.dataBind();   		 
		        });   
	        </script>
            </head>
        <body>
            <table id="table1"></table>
        </body>
        </html>

Dependencies

jquery-1.9.1.js

ig.util.js

ig.datasource.js

The current widget has no options.

The current widget has no events.

Show Details

ig.KnockoutDataSource
Constructor

new $.ig.KnockoutDataSource( options:object );

options
Type:object

Code Sample

 
             		var itemsModel, 
		db = [{"Name": "Bread","Rating": 4,"Price": "2.5"}, 
		      {"Name": "Milk", "Rating": 3, "Price": "3.5"},
			{"Name": "Vint soda", "Rating": 3, "Price": "20.9"}];
		function Item(name, price, rating) {
		    return {
		        name: ko.observable(name),
		        price: ko.observable(price),
		        rating: ko.observable(rating)
		    };
		};
		function ItemsViewModel() {
		        var self = this;
		        self.data = ko.observableArray([ ]);
		        for (var i = 0; i < 3; i++) {
		            self.data.push(new Item(db[i].Name, db[i].Price, db[i].Rating));
		        }		
		}
		var ds, render = function (success, error) { 
			if (success) { 
				 $($.ig.tmpl("<tr><td>Name: ${name}</td><td>Price: ${Price}</td><td>Rating: ${Rating}</td></tr>", ds.dataView())).appendTo("#table1"); 
		 
			} else { 
				alert(error); 
			} 
		}
		$.ig.loader(function () {
		var model = new ItemsViewModel();
		ko.applyBindings(model);
			ds = new $.ig.KnockoutDataSource({ 
				callback: render,  
				dataSource: model,
				type: 'json',
				responseDataKey: 'data'
			}); 
			ds.dataBind();   		 
		});

addRow

.addRow( rowId:object, rowObject:object, autoCommit:object );

Adds a new row to the data source. Creates a transaction that can be committed / rolled back.

rowId
Type:object
rowObject
Type:object
autoCommit
Type:object

Code Sample

 
        		var itemsModel, 
		db = [{"Name": "Bread","Rating": 4,"Price": "2.5"}, 
		      {"Name": "Milk", "Rating": 3, "Price": "3.5"},
			{"Name": "Vint soda", "Rating": 3, "Price": "20.9"}];
		function Item(name, price, rating) {
		    return {
		        name: ko.observable(name),
		        price: ko.observable(price),
		        rating: ko.observable(rating)
		    };
		};
		function ItemsViewModel() {
		        var self = this;
		        self.data = ko.observableArray([ ]);
		        for (var i = 0; i < 3; i++) {
		            self.data.push(new Item(db[i].Name, db[i].Price, db[i].Rating));
		        }		
		}
		var ds, render = function (success, error) { 
			if (success) { 
				//$("#table1 tbody").empty(); 
				ds.addRow(4, {name : "CD Player", price : "40", rating : 4}, true); 
				 $($.ig.tmpl("<tr><td>Name: ${name}</td><td>Price: ${Price}</td><td>Rating: ${Rating}</td></tr>", ds.dataView())).appendTo("#table1"); 
		 
			} else { 
				alert(error); 
			} 
		}
		$.ig.loader(function () {
		var model = new ItemsViewModel();
		ko.applyBindings(model);
			ds = new $.ig.KnockoutDataSource({ 
				callback: render,  
				dataSource: model,
				type: 'json',
				responseDataKey: 'data'
			}); 
			ds.dataBind();   		 
		});

dataAt

.dataAt( path:string, keyspath:string );

Searches the hierarchial data based on the path of ids and layouts. Returns the data for the child from the related layout.

path
Type:string
path - a string that lists the expanded records' keys in the format "pk:value", separted via the specified pathSeparator, for example: "ID:0/ID:1".
keyspath
Type:string
keyspath - a string that lists the parent layouts hierarchy, for example: "Layout1/Layout2".

Code Sample

 
			var data = [
				{
					ID: 1,
					Name: "Food",
					Products: [
						{ ID: 0, Name: "Bread", Price: 33.89, DateOfManifacture: new Date("08/12/2017"), ExpirationDate: new Date("08/18/2017") },
						{ ID: 1, Name: "Pizza", Price: 4.45, DateOfManifacture: new Date("08/18/2017"), ExpirationDate: new Date("08/20/2017") }
					]
				},
				{
					ID: 2,
					Name: "Beverages",
					Products: [
						{ ID: 2, Name: "Milk", Price: 189.456, DateOfManifacture: new Date("08/14/2017"), ExpirationDate: new Date("08/22/2017"), Brands: [
							{
								Name: "Milk0",
								Name: "Milk1",
								Name: "Milk2"
							}
							] },
						{ ID: 3, Name: "Fruit punch", Price: 479, DateOfManifacture: new Date("08/08/2017"), ExpirationDate: new Date("04/24/2018") }
					]
				}
			];
			var ds, Records = [];

			var Item = function (ID, Name, Products) {
				var self = this;
				this.ID = ko.observable(ID);
				this.Name = ko.observable(Name);
				this.Products = ko.observable(Products);
			}
			function ItemsViewModel() {
				var self = this;
				self.Records = ko.observableArray([]);
				for (var i = 0; i < data.length; i++) {
					self.Records.push(new Item(data[i].ID, data[i].Name, data[i].Products));
				}
			}
			$(function() {
				var itemsVM = new ItemsViewModel();
				ko.applyBindings(itemsVM);
				ds = new $.ig.KnockoutDataSource({
					dataSource: itemsVM.Records(),
					type:'json',
				});
				ds.dataBind();
				//get the data based on the following path:	ID:2 > Products > ID:2 > Brands
				var dataAt = ds.dataAt("ID:2/ID:2", "Products/Brands");
			});

deleteRow

.deleteRow( rowId:object, autoCommit:object );

Deletes a row from the data source.

rowId
Type:object
autoCommit
Type:object

Code Sample

 
        		var itemsModel, 
		db = [{"Name": "Bread","Rating": 4,"Price": "2.5"}, 
		      {"Name": "Milk", "Rating": 3, "Price": "3.5"},
			{"Name": "Vint soda", "Rating": 3, "Price": "20.9"}];
		function Item(name, price, rating) {
		    return {
		        name: ko.observable(name),
		        price: ko.observable(price),
		        rating: ko.observable(rating)
		    };
		};
		function ItemsViewModel() {
		        var self = this;
		        self.data = ko.observableArray([ ]);
		        for (var i = 0; i < 3; i++) {
		            self.data.push(new Item(db[i].Name, db[i].Price, db[i].Rating));
		        }		
		}
		var ds, render = function (success, error) { 
			if (success) { 
				ds.deleteRow(0, true);
				 $($.ig.tmpl("<tr><td>Name: ${name}</td><td>Price: ${Price}</td><td>Rating: ${Rating}</td></tr>", ds.dataView())).appendTo("#table1"); 
		 
			} else { 
				alert(error); 
			} 
		}
		$.ig.loader(function () {
		var model = new ItemsViewModel();
		ko.applyBindings(model);
			ds = new $.ig.KnockoutDataSource({ 
				callback: render,  
				dataSource: model,
				type: 'json',
				responseDataKey: 'data'
			}); 
			ds.dataBind();   		 
		});

setCellValue

.setCellValue( rowId:object, colId:object, val:object, autoCommit:object );

Sets a cell value for the cell denoted by rowId and colId. Creates a transaction for the update operation and returns it.

rowId
Type:object
colId
Type:object
val
Type:object
autoCommit
Type:object

Code Sample

 
        		var itemsModel, 
		db = [{"Name": "Bread","Rating": 4,"Price": "2.5"}, 
		      {"Name": "Milk", "Rating": 3, "Price": "3.5"},
			{"Name": "Vint soda", "Rating": 3, "Price": "20.9"}];
		function Item(name, price, rating) {
		    return {
		        name: ko.observable(name),
		        price: ko.observable(price),
		        rating: ko.observable(rating)
		    };
		};
		function ItemsViewModel() {
		        var self = this;
		        self.data = ko.observableArray([ ]);
		        for (var i = 0; i < 3; i++) {
		            self.data.push(new Item(db[i].Name, db[i].Price, db[i].Rating));
		        }		
		}
		var ds, render = function (success, error) { 
			if (success) { 
				ds.setCellValue(1, "Name", "DVD Player", true);
				 $($.ig.tmpl("<tr><td>Name: ${name}</td><td>Price: ${Price}</td><td>Rating: ${Rating}</td></tr>", ds.dataView())).appendTo("#table1"); 
		 
			} else { 
				alert(error); 
			} 
		}
		$.ig.loader(function () {
		var model = new ItemsViewModel();
		ko.applyBindings(model);
			ds = new $.ig.KnockoutDataSource({ 
				callback: render,  
				dataSource: model,
				type: 'json',
				responseDataKey: 'data'
			}); 
			ds.dataBind();   		 
		});

updateRow

.updateRow( rowId:object, rowObject:object, autoCommit:object );

Updates a record in the datasource. Creates a transaction that can be committed / rolled back.

rowId
Type:object
rowObject
Type:object
autoCommit
Type:object

Code Sample

 
        		var itemsModel, 
		db = [{"Name": "Bread","Rating": 4,"Price": "2.5"}, 
		      {"Name": "Milk", "Rating": 3, "Price": "3.5"},
			{"Name": "Vint soda", "Rating": 3, "Price": "20.9"}];
		function Item(name, price, rating) {
		    return {
		        name: ko.observable(name),
		        price: ko.observable(price),
		        rating: ko.observable(rating)
		    };
		};
		function ItemsViewModel() {
		        var self = this;
		        self.data = ko.observableArray([ ]);
		        for (var i = 0; i < 3; i++) {
		            self.data.push(new Item(db[i].Name, db[i].Price, db[i].Rating));
		        }		
		}
		var ds, render = function (success, error) { 
			if (success) { 
            ds.updateRow(1, {
	            Name: "DVD Player1",
	            Price: "10",
	            Rating: "5"
            }, true); 
				 $($.ig.tmpl("<tr><td>Name: ${name}</td><td>Price: ${Price}</td><td>Rating: ${Rating}</td></tr>", ds.dataView())).appendTo("#table1"); 
		 
			} else { 
				alert(error); 
			} 
		}
		$.ig.loader(function () {
		var model = new ItemsViewModel();
		ko.applyBindings(model);
			ds = new $.ig.KnockoutDataSource({ 
				callback: render,  
				dataSource: model,
				type: 'json',
				responseDataKey: 'data'
			}); 
			ds.dataBind();   		 
		});

Ignite UI | Samples

ig.KnockoutDataSource

Code Sample

Dependencies

ig.KnockoutDataSourceConstructor

Code Sample

addRow

Code Sample

dataAt

Code Sample

deleteRow

Code Sample

setCellValue

Code Sample

updateRow

Code Sample

ig.KnockoutDataSource
Constructor