I have an igGrid bound to a knockout view model's observable array. Separately, there is a combo box that users can select an item from. When an item is selected, a new object is pushed to the observable array. I can see a new row in the grid with the correct data in it, but I also see a "TypeError: rec is null" error and am then unable to add another row or edit the existing rows. The error seems to be coming from infragistics.ui.grid.knockout-extensions.js, but I haven't the foggiest idea what the cause is. I've been able to validate that the new HoldingsModel is getting created correctly and being appended to the holdings observable array. Not sure what the grid is doing after that, but I wonder if some of the bindings for individual cells is getting messed up.

I'd appreciate any help that could point me in the right direction.

Here are the relevant details of my code:

HTML:
<table id="accountAddHoldings" data-bind="igGrid: holdingsGridOptions"></table>

JS:

//Main view model

var AccountCreationViewModel = function() {
    var self = this;

    //Array of table for the data

    self.holdings = ko.observableArray([]);

    //Config for the igGrid

    self.holdingsGridOptions = {

        primaryKey: "securityId",
        dataSource: holdings,
        width : "100%",
        autoCommit : true,
        autoGenerateColumns : false,

        columns : [
            {headerText: "Name", key: "securityName", width: "120px"},
            {headerText: "Id", key: "securityId"},
            {headerText: "Segment", key: "segment"},
            {headerText: "Quantity", key: "quantity"},
            {headerText: "Value", key: "value"},
            {headerText: "Expected Quantity", key: "expectedQuantity"},
            {headerText: "Expected Value", key: "expectedValue"},
            {headerText: "Quantity Drift", key: "quantityDrift"},
            {headerText: "Value Drift", key: "valueDrift"},
            {headerText: "Price", key: "securityLastPrice"}
        ],
        features : [
            {
                name: "Selection",
                editMode: "row"
            },
            {
                name: "Updating",
                editMode: "row",
                enableDeleteRow: true,
                columnSettings: [
                    {
                        columnKey: "securityId",
                        readOnly: true
                    },
                    {
                        columnKey: "securityName",
                        readOnly: true
                    },
                    {
                        columnKey: "segment",
                        readOnly: true
                    },
                    {
                        columnKey: "quantityDrift",
                        readOnly: true
                    },
                    {
                        columnKey: "value",
                        readOnly: true
                    },
                    {
                        columnKey: "valueDrift",
                        readOnly: true
                    },
                    {
                        columnKey: "securityLastPrice",
                        readOnly: true
                    },
                    {
                        columnKey: "quantity",
                        editorType: "numeric",
                        readOnly: false
                    },
                    {
                        columnKey: "expectedQuantity",
                        editorType: "numeric",
                        readOnly: false
                    },
                    {
                        columnKey: "expectedValue",
                        editorType: "currency",
                        readOnly: false
                    }
                ]
            }
        ]
}

Thanks for your help!

}

//Model for items in AccountCreationViewModel().holdings

    var HoldingModel = function(securityName, securityId, segment, securityLastPrice) {
        var self = this;

        self.securityName = securityName;
        self.securityId = securityId;
        self.segment = segment;
        self.securityLastPrice = securityLastPrice;
        self.quantity = ko.observable(0);
        self.expectedQuantity = ko.observable(0);
        self.expectedValue = ko.observable(0);

        self.quantityDrift = ko.pureComputed(function() {
            return Math.abs(this.expectedQuantity() - this.quantity());
        }, self);
        self.valueDrift = ko.pureComputed(function() {
            return Math.abs(this.expectedValue() - this.value());
        }, self);
        self.value = ko.pureComputed(function() {
            return this.quantity() * this.securityLastPrice;
        }, self);
    };

// Called on the "selectionChanged" event of the combo; theoretically adds a new item to the grid

selectionChanged: function(evt, ui) {
            var security = ui.items[0].data;

            viewModel.holdings.push(new HoldingModel(security.ticker, security.pk, security.segment, security.last_price));
        }