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.

Parents
No Data
Reply
  • 25665
    Offline posted

    Hello Dusan,

    Thank you for contacting Infragistics!

    When I put your code in a knockout sample of my own I am able to run and expand without issue. I have some questions concerning this matter. What are the Infragistics scripts you are loading? What are the scripts you load for knockout? What other scripts are you loading?

    Please let me know if you have any questions concerning this matter.

Children