Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
110
Cannot set property 'myPropertyName' of null. Table not recognizing child view model components.
posted

Hi,

I have a hierarchical grid that I am binding using knockout. The datasource I am using is made up of nested ViewModel objects, child tables represented as lists withing the parent record. I think I may be doing something incorrectly when binding the child tables and setting up the parent-child relationship. This seems to work file between the root level and the first level of children but from the second level on there seems to be issues. Included below is the table and view model source.

The specific error I'm getting is "Uncaught TypeError: Cannot set property 'SubMatrixId' of null".

The View Model objects are being created as:

 

MatrixRecord(RootLevel)

SubMatrixRecord(Level 1)

PlanningItemRecord(Level 2)

 

Table Definition

--------------------------------------------------------------------

 

<table id="gridMatrix" data-bind="

    igHierarchicalGrid: {

        dataSource: matrixData,

        primaryKey: 'MatrixId',

        loadOnDemand: false,

        width: 'auto',

        autoGenerateColumns: false,

        columns: [

            { key: 'MatrixId', headerText: 'Id', dataType: 'number' },

            { key: 'MatrixDesc', headerText: 'Description', dataType: 'string' }

        ],

        features: [

            {

                name: 'Selection',

            },

            {

                name: 'Paging',

                type: 'local',

                pageSize: 5,

            },

            {

                name: 'Updating',

                editMode: 'none'

            }

        ],

        columnLayouts: [

            {

                key: 'SubMatrices',

                primaryKey: 'SubMatrixId',

                foreignKey: 'MatrixId',

                autoGenerateColumns: false,

                autoGenerateLayouts: false,

                columns: [

                    { key: 'SubMatrixId', headerText: 'Id', dataType: 'number' },

                    { key: 'SubMatrixDesc', headerText: 'Description', dataType: 'string' },

                    { key: 'MatrixId', headerText: 'Matrix Id', dataType: 'number' }

                ],

                features: [

                    {

                        name: 'Selection',

                    },

                    {

                        name: 'Updating',

                        editMode: 'none'

                    }

                ],

                columnLayouts: [

                    {

                        key: 'Items',

                        primaryKey: 'ItemId',

                        foreignKey: 'SubMatrixId',

                        autoGenerateColumns: false,

                        columns: [

                            { key: 'ItemId', headerText: 'Id', dataType: 'number' },

                            { key: 'ItemDesc', headerText: 'Description', dataType: 'string' },

                            { key: 'SubMatrixId', headerText: 'Sub Matrix Id', dataType: 'number' }

                        ],

                        features: [

                            { name: 'Selection'},

                            {

                                name: 'Updating',

                                editMode: 'none'

                            }

                        ]

                    }      

                ]

            }      

        ]

    }">

View Model Definitions

--------------------------------------------------------------------

function MatrixRecord(matrixId, matrixDesc, subMatrices) {

   

    ///<summary>

    /// Represents a single root level

    /// record entry in the matrix grid.

    ///</summary>

 

    return {

        MatrixId: ko.observable(matrixId),

        MatrixDesc: ko.observable(matrixDesc),

        SubMatrices: ko.observableArray(subMatrices)

    };

};

 

function SubMatrixRecord(subMatrixId, subMatrixDesc, parentMatrixId, items) {

   

    ///<summary>

    /// Represents a single root level

    /// record entry in the Sub-Matrix grid. Also

    /// represents a child level entry of the Matrix grid.

    ///</summary>

 

    return {

        SubMatrixId: ko.observable(subMatrixId),

        SubMatrixDesc: ko.observable(subMatrixDesc),

        MatrixId: ko.observable(parentMatrixId),

        Items: ko.observableArray(items)

    };

};

 

function PlanningItemRecord(itemId, itemDesc, subMatrixId,

        availableQty, sellingPrice, rotationCd, falloutPct,

        ftcRegulatedInd, frozenInd) {

   

    ///<summary>

    /// Represents a child level entry to the sub-matrix

    /// record entry in both the Matrix and Sub-Matrix grids.

    ///</summary>

 

    return {

        ItemId: ko.observable(itemId),

        ItemDesc: ko.observable(itemDesc),

        SubMatrixId: ko.observable(subMatrixId),

        AvailableQty: ko.observable(availableQty),

        SellingPrice: ko.observable(sellingPrice),

        RotationCd: ko.observable(rotationCd),

        FalloutPct: ko.observable(falloutPct),

        FtcRegulatedInd: ko.observable(ftcRegulatedInd),

        FrozenInd: ko.observable(frozenInd)

    };

};

 

var MatrixViewModel = function() {

 

    var self = this;

 

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

};

Thanks,

Chris.