Forums Ignite UI for jQuery
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
Close
Dusan Grujic
135
Error: 'Unable to get property 'element' of undefined or null reference'
posted

Hi

When I click on an 'Expand' button (+), I get following error message:
'Unable to get property 'element' of undefined or null reference'


I using 'UIIgnite vol. 2014.2' and 'MVC 5'.

My code:

<body>
    <script>
        var modifiedDataSource, dataIGH = [], customerOrdersModel;

        $(function () {

            dataIGH = [
                   {
                       ID: 1,
                       Name: "Food",
                       Products: [
                           { ProductID: 1, CategoryID: 1, NameP: "Bread", Quantity: 3 },
                           { ProductID: 2, CategoryID: 1, NameP: "Pizza", Quantity: 4 }
                       ]
                   },
                   {
                       ID: 2,
                       Name: "Beverages",
                       Products: [
                           { ProductID: 3, CategoryID: 2, NameP: "Milk", Quantity: 1 },
                           { ProductID: 4, CategoryID: 2, NameP: "Fruit punch", Quantity: 4 }
                       ]
                   }
            ];

            modifiedDataSource = {};
            modifiedDataSource["dataIGHko"] = dataIGH;
            customerOrdersModel = ko.mapping.fromJS(modifiedDataSource);
            ko.applyBindings(customerOrdersModel, $("#hierarchicalGrid")[0]);
        });
    </script>

    <table id="hierarchicalGrid" data-bind="igHierarchicalGrid:
        {
            width: '100%' ,
            dataSource: dataIGHko,
            initialDataBindDepth: -1,
            primaryKey: 'ID',
            dataSourceType: 'json',
            autoGenerateColumns: false,
            autoGenerateLayots: false,
            childrenDataProperty: 'Products',
            autoCommit: true,

            columns: [
                { key: 'ID', headerText: 'ID', width: '10%', dataType: 'number' },
                { key: 'Name', headerText: 'Name', width: '90%', dataType: 'string' },
            ],
            columnLayouts: [
                {
                    key: 'Products',
                    primaryKey: 'ProductID',
                    foreignKey: 'CategoryID',
                    autoGenerateColumns: false,
                    width: '100%',
                 
                    autoCommit: true,
                    features: [
                       
                       
                    ],
                    columns: [
                        { key: 'ProductID', headerText: 'Product ID', width: '10%', dataType: 'number' },
                        { key: 'CategoryID', headerText: 'Category ID', width: '10%', dataType: 'number' },
                        { key: 'NameP', headerText: 'Name Product', width: '60%', dataType: 'string' },
                        { key: 'Quantity', headerText: 'Quantity', width: '20%', dataType: 'number' }
                    ]
                }
            ],
            features: [
               
                {
                    name: 'Selection',
                    mode: 'row',
                    multipleSelection: false,
                    activation: true
                }
            ]

        }"></table>

</body>

Thanks,

Dusan.