ig.KnockoutDataSource

ig.KnockoutDataSource_image
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.

  • 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:object );

    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:object
    • keyspath - a string that lists the parent layouts hierarchy, for example: "Layout1/Layout2".

  • 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();   		 
		});

Copyright © 1996 - 2024 Infragistics, Inc. All rights reserved.