Skip to content


Subversion checkout URL

You can clone with
Download ZIP
Tree: c52dde659f
Fetching contributors…

Cannot retrieve contributors at this time

56 lines (42 sloc) 2.12 KB

jgGrid Binding

A grid binding plugin for Knockout.js provides basic integration with the JqGrid plugin for jQuery.

Features include: Binding to an observable array of items, progressive enhancement of an existing table (using an extension of the jqgrid tabletogrid feature), selected item and mulit-select items binding, and templated column support.


The grid binding plug uses the markup of the table to internally derive an appropriate column model for jqgrid to work upon. The data-field attribute denotes the property of each array item to bind a column to, and its header text will carry into the rendered table. A th element is required for each column desired in the rendered table. Optionally, a template can be specified for any column by providing a binding template for the column inside of the tbody element. NB: any inline column widths/styles will be carried into jqgrids column model, and applied to the resultant grid.


<div id="pager"></div>
<table id="animals" data-bind="grid: { data: animals }" >
    <caption>Amazing Animals</caption>
            <th data-field="actions" style="width:27px;"></th>
            <th data-field="name" width="150px">Item Name</th> 
            <th data-field="sales">Sales Count</th> 
            <th data-field="price">Price</th> 
            <td data-field="actions">
                <a class="grid-edit" data-bind="attr:{ href: 'animals/' + id, title: name }, text: id"></a>


$(function () {
    var dataService = //some service to load data
    var viewModel = {
        animals: ko.observableArray([]),

    dataService.GetAnimals(function (result) {



For more info and usage examples, see the examples directory.


  • Knockout 2.0
  • Jquery 1.6+
  • jqGrid
Jump to Line
Something went wrong with that request. Please try again.