Configuration

KoGrid is very configurable. You can pass the following objects/values into KoGrid to toggle the behavior that you desire!

Option	Default	Description
rowHeight	30	The height of each row in the grid (px)
columnWidth	100	The default width of each column in the grid
headerRowHeight	30	The height of the header
footerRowHeight	45	The height of the footer
filterRowHeight	30	The height of the filters (when showing)
rowTemplate	'kgRowTemplate'	Row template to use for rendered rows (overrideable with your own custom template
headerTemplate	'kgHeaderRowTemplate'	Header Template to use
headerCellTemplate	'kgHeaderCellTemplate'	Header Cell Template to use
footerTemplate	'kgFooterTemplate'	Footer Template to use
footerVisible	ko.observable(true)	Toggles whether the Footer appears or hides (it will keep a small amount of chrome)
autogenerateColumns	true	Autogenerates the grid columns using a `for in` statement of your data’s first array item
data	null	The observableArray to bind the grid to
columnDefs	[]	Column definitions to use if not autogenerating columns
enablePaging	false	Enables a paging control in the footer of the grid
pageSizes	[250, 500, 1000]	If paging enabled, these are the page size choices the user is shown
pageSize	ko.observable(250)	If paging enabled, this is the page size the user has selected
totalServerItems	ko.observable(null)	If paging enabled, the total items on the server to page through
currentPage	ko.observable(1)	If paging enabled, the current page the user is on
isMultiSelect	true	Toggles whether the grid allows multi-row selection or single-row selection
selectedItem	ko.observable()	If not multi-select, the item currently selected in the grid (null if nothing selected)
selectedItems	ko.observableArray([])	If multi-select, the items currently selected in the grid
displaySelectionCheckbox	true	Shows checkboxes on left-side of each grid row to indicated selected item(s)
displayRowIndex	true	Shows the row index on left side of each grid row
useExternalFiltering	false	Toggles whether filtering is handled inside grid or by external code (such as server side filtering)
useExternalSorting	false	Toggles whether sorting is handled inside grid or by external code (such as server side sorting)
filterInfo	ko.observable()	Observable that is kept in sync with filtering input from user (to be used with external filtering)
sortInfo	ko.observable()	Observable that is kept in sync with sorting input from user (to be used with external sorting)
filterWildcard	"*" or "%"

Indicates which character the column filters should use as a wildcard

Example data-bind with multiple configuration options

<div data-bind="koGrid: { data: myObsArray,
                           isMultSelect: false,
                           selectedItem: mySelectedObj,
                           columnDefs: [ { field: 'firstName', displayName: 'First Name' }]"></div>