This is driving me crazy. I am building a Hot Towel/SPA app. I'm successfully retrieving data from our server and filling an observable array. I cannot figure out how to bind it to the igGrid.

I am trying to use a KnockoutDataSource.

In the view model, I have datasource, and I define the vm:

    var datasource;

    var vm = {
        activate: activate,
        title: 'ig Item Details',
        itemNumber: ko.observable(),
        companyNumber: ko.observable(""),
        warehouse: ko.observable(""),
        histories: ko.observableArray([]),
        viewAttached: function (view) {
            $("#tabs").tabs();

            setupTransactionHistoryGrid();
            getTransactionHistory({ pageNum: 0, pageSize: 25 }, vm.itemNumber, vm.warehouse);
            
        }



setupTransactionHistoryGrid:

    function setupTransactionHistoryGrid() {
        
        datasource = new $.ig.KnockoutDataSource(
            {
                dataSource: vm.histories,
                type: 'json',
                callback: 'render'
            });

        datasource.dataBind();
        
        $("#transactionHistoryGrid").igGrid({
            columns: [
                { headerText: "Transaction Code", key: "IATRCD", type: "string" },
            ],
            width: "500px",
            dataSource: datasource
        });
    }

HTML:

<table id="transactionHistoryGrid"></table>

When I run this, I get this exception when attempting to create the datasource:

Unhandled exception at line 13, column 221 in http://localhost:58210/Scripts/ig/js/extensions/infragistics.datasource.knockoutjs.js

0x800a138f - Microsoft JScript runtime error: Unable to get value of the property 'toJS': object is null or undefined

That line:

options.dataSource=ko.mapping.toJS(options.dataSource)