ig.KnockoutDataSource
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: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();
});