In this post, we will show you how to use the jqxGrid with Knockout.
Knockout is a JavaScript library that helps you to create rich, responsive display with a clean underlying data model. To create a view model with Knockout, we declare the following JavaScript object:
var initialData = [ { name: "Well-Travelled Kitten", sales: 352, price: 75.95 }, { name: "Speedy Coyote", sales: 89, price: 190.00 }, { name: "Furious Lizard", sales: 152, price: 25.00 }, { name: "Indifferent Monkey", sales: 1, price: 99.95 }, { name: "Brooding Dragon", sales: 0, price: 6350 }, { name: "Ingenious Tadpole", sales: 39450, price: 0.35 }, { name: "Optimistic Snail", sales: 420, price: 1.50 }];
Then, we create the following Model:
var GridModel = function (items) { this.items = ko.observableArray(items); this.addItem = function () { this.items.push({ name: "New item", sales: Math.round(Math.random() * 100), price: Math.round(Math.random() * 100) }); $("#jqxgrid").jqxGrid('updatebounddata'); }; this.removeItem = function () { this.items.pop(); $("#jqxgrid").jqxGrid('updatebounddata'); };};
The model simply adds and removes items and calls the ‘updatebounddata’ method of the jqxGrid. To activate Knockout, we call the applyBindings method and pass the view model object that we want to use.
ko.applyBindings(new GridModel(initialData));
The next step is to create the Grid.
var source = { localdata: initialData, datatype: 'local'}// create jqxGrid.$("#jqxgrid").jqxGrid({ source: source, autoheight: true, pageable: true, theme: theme, columns: [ { text: 'Name', dataField: 'name', width: 200 }, { text: 'Sales', dataField: 'sales', width: 200, cellsalign: 'right' }, { text: 'Price', dataField: 'price', width: 200, cellsformat: 'c2', cellsalign: 'right' } ]});
When the user clicks a button, we want to ‘Add’ or ‘Remove’ an item. That’s why, we create ‘Add’ and ‘Remove’ buttons. We initialize them with the code below:
$('#addButton').jqxButton({ theme: theme });$('#removeButton').jqxButton({ theme: theme });
The HTML markup is shown below:
<body class='default'> <div id='jqxWidget'> <div id="jqxgrid"> </div> <div style="margin-top: 10px;"> <input id="addButton" type="button" data-bind='click: addItem' value="Add Item" /> <input id="removeButton" type="button" data-bind='click: removeItem' value="Remove Item" /> </div> </div></body>
When the user clicks the “Add” button, the ‘addItem’ function is called and the ‘removeItem’ function is called when the ‘Remove’ button is clicked.
Wow, I’m very glad to learn the existence of a such library
Thanks a lot
Any plans for native Knockout support, with automatic Grid refresh on changes in the ObservableArray without the ‘updatebounddata’ operations.
LarsM
Yes, of course. In the next version, we will provide native support for ObservableArray. When there’s a change in the bound collection, the Grid will be automatically updated.
Excellent
Is there a way to bind a grid column’s dataField to an observable property? For example, my view model contains an observable array of objects where each of those objects themselves have some observable properties. When I tried binding these observable properties to the grid it wouldn’t render the underlying values. I tried passing the property as a function but that didn’t work either. eg. dataField: ‘myObservableProperty’ or dataField: ‘myObservableProperty()’
Thanks
Matt
It is currently not possible to bind the grid datafields to observable properties. Could you send us a sample view model which demonstrates the required functionality, so we can create a new work item and consider implementing the functionality in the future versions? Looking forward to your reply.
Best Wishes,
Peter
as regards to handling the ajax requests to the server, i’m just curious if it is possible to assign these requests to knockout’s json-viewmodel auto-mapping, and json data loading/saving functionalities?
i would like to adopt knockout’s built in features to manage the dynamic data requests to and from the server, instead of jqxgrid’s components. i just find it unwieldy to use such functionalities. i mean is this possible for jqxgrid? given that i bind it’s data to knockout’s view model object?
i’ve checked over the page demonstrating how jqxwidgets can be harmonized with knockout…but sadly i haven’t found answers to my question. the grid only played on static data instead of dynamic. the demo isn’t presenting real-world sampling.
i’d wish to have you shed me some light with regards to my aforementioned issues. if possible, a little bit of sample code will be very much appreciated.. i would like to thank you in advance for your time and help! =)
Hi Michael,
jqxGrid handles the ajax requests only through the jqxDataAdapter plug-in. If you use Knockout, the Grid can be bound to an observable array and will also respond to changes in it like add, remove or update.
Best Regards,
Peter Stoev
Hy. I would like to ask, How am I able to bind to the value of an object. I have an Address object what has many values. for example Street
columns: [
{ text: ‘Street’, dataField: { name: ‘City’, map: ‘Address>City’ }, width: 200, cellsalign: ‘right’ },
If I bind Address.City the widget create an Address.Street object.
You may look at this help topic: http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxgrid/jquery-grid-datasources.htm. It illustrates how to display in the Grid values from nested Objects – See the “Example with nested JSON data” in the help topic