Configuration

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

defaults = {
    afterSelectionChange: function () {}, // callback if you want to validate something after selection.
    beforeSelectionChange: function (rowItem) { return true; }, // callback if you want to inspect something before selection, return false if you want to cancel the selection. return true otherwise.
    canSelectRows: true, // enable selections
    columnDefs: undefined, // defitions of columns as an array [], if not defines columns are auto-generated.
    columnWidth: 100,
    data: ko.observableArray([]), // the data you want to display
    disableTextSelection: true, // disables text selection in the grid.
    displaySelectionCheckbox: true, // toggles whether row selection check boxes appear
    enableColumnResize: true, // enable or disable resizing of columns
    enableRowReordering: false, // enable row reordering.
    enableSorting: ko.observable(true),
    filterOptions: {
        filterText: ko.observable(""), // the actual filter text so you can use external filtering while using the builting search box.
        useExternalFilter: false, // bypass internal filtering for instance, server side-searching/paging
    },
    footerRowHeight: 55,
    footerVisible: true, // showing the footer is enabled by default
    groups: [], // initial fields to group data by. array of strings. field names, not displayName.
    headerRowHeight: 32,
    headerRowTemplate: undefined, // define a header row template for further customization.
    jqueryUIDraggable: false, // Enables non-HTML5 compliant drag and drop using the jquery UI reaggable/droppable plugin. requires jqueryUI to work if enabled.
    jqueryUITheme: false, // enable the jqueryUIThemes
    keepLastSelected: true, // prevent unselections when multi is disabled.
    maintainColumnRatios: undefined, // defaults to true when using *'s or undefined widths. can be ovverriden by setting to false.
    multiSelect: true, // set this to false if you only want one item selected at a time
    plugins: [], // array of plugin functions to register.ke
    rowHeight: 30,
    rowTemplate: undefined, // Define a row Template to customize output
    selectedItems: ko.observableArray([]), // array, if multi turned off will have only one item in array
    selectWithCheckboxOnly: false, // set to true if you only want to be able to select with the checkbox
    showColumnMenu: true, // enables display of the menu to choose which columns to display.
    showFilter: true, // enables display of the filterbox in the column menu.
    showGroupPanel: false, // whether or not to display the dropzone for grouping columns on the fly
    sortInfo: undefined, // similar to filterInfo
    tabIndex: -1, // set the tab index of the grid. 
    useExternalSorting: false,
    watchDataItems: false, // DANGER: setting this to true will allow the grid to update individual elements as they change. In large datasets this adversely affects performance. It is disabled by default.
    // Paging 
    enablePaging: false, // enables the paging feature
    pagingOptions: {
        currentPage: ko.observable(1), // what page they are currently on
        pageSize: ko.observable(250), // Size of Paging data
        pageSizes: ko.observableArray([250, 500, 1000]), // page Sizes
        totalServerItems: ko.observable(0) // how many items are on the server (for paging)
   }
}

Example data-bind with multiple configuration options

<div data-bind="koGrid: { data: myObsArray,
                           multiSelect: true,
                           selectedItems: mySelectedItems,
                           columnDefs: [ { field: 'firstName', displayName: 'First Name' }]"></div>