Using KnockoutJS with jqxGrid

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) });
this.removeItem = function () {
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.
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 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" />
When the user clicks the “Add” button, the ‘addItem’ function is called and the ‘removeItem’ function is called when the ‘Remove’ button is clicked. Grid-Knockout

About admin

This entry was posted in JavaScript, JavaScript Plugins, JavaScript Widgets, jQuery, jQuery Plugins, jQuery UI, jQuery UI Plugins, jQuery UI Widgets, jQuery Widgets, jQWidgets, jqxGrid and tagged , , , , , , , , , , , , , , . Bookmark the permalink.

10 Responses to Using KnockoutJS with jqxGrid

  1. Dimitri says:

    Wow, I’m very glad to learn the existence of a such library

  2. Lars Morten says:

    Thanks a lot

    Any plans for native Knockout support, with automatic Grid refresh on changes in the ObservableArray without the ‘updatebounddata’ operations.


  3. Matt says:

    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()’


    • admin says:

      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,

  4. michael_asj2004 says:

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

    • admin says:

      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

  5. alma22 says:

    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.

Leave a Reply