back: 028_jqgrid_binding.html

JqGrid Binding

A grid binding plugin for Knockout.js that 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.

Usage

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.

Markup

Javascript

Results

Amazing Animals
Item Name Sales Count Price

Options

Binding Options

Name Description Default
(default)

The default behavior of the plugin.

Grid specific overrides can be applied either passing options, or applying global defaults for jqgrid
  • datatype: "local"
  • isDropTarget : true
  • height: 'auto'
  • pager: '#pager'
    NB: if there is no element matching the pager target, no pager will be rendered.
  • rowNum: 10
  • rowList: [10, 20, 50]
  • altRows: true
  • width: matches table width
  • caption: matches table caption if provided.
onSelectRow: selectedItemIdBinds the selectedItemId property of the view model to the selected item using jqgrid’s onSelectRow option.
selectedItem: editModelBinds the item with an id that matches the id parameter from jqgrid’s onSelectRow option, to the edit model property of the view model
selectedItems: selectedItemsEnables jqgrid’s mutliselect option, and binds any selected items to the selectedItems property of the view modelfalse
pager: { target: '#pager', rowNum: 10, rowList: [10, 20, 50] }Overrides the default pager settings with the provided options.

ColModel Options

The plugin provides additional support for carrying across metadata into the internal colModel that is used by jqgrid. This allows many of the colModel options to be used, although only those options that take a string parameter are currently supported.

To provide additional column model options, a data-* attribute can be applied to the th element for the appropriate column.

For example, in an instance where a column is used to represent, the following markup can be specified:

This will apply the sortType and datefmt options against the colModel for the 'created' column.

Dependencies