jQWidgets Forums

Forum Replies Created

Viewing 1 post (of 1 total)
  • Author
    Posts
  • June 23, 2014 at 9:18 am in reply to: Uncaught TypeError: Cannot set property 'xxx' of undefined Uncaught TypeError: Cannot set property 'xxx' of undefined #56221

    Marto Isworo
    Participant

    Hi Peter,

    Thank you for your reply. Please see below codes:

    <!DOCTYPE html>
    <html lang=”en”>
    <head>
    <meta charset=”utf-8″>

    <title>jqwidget_test</title>
    <link rel=”stylesheet” href=”jqwidgets/styles/jqx.base.css” />
    <link rel=”stylesheet” href=”jqwidgets/styles/jqx.darkblue.css” />
    <script type=”text/javascript” src=”js/jquery.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqxcore.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqxdata.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqxbuttons.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqxscrollbar.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqxlistbox.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqxdropdownlist.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqxdatatable.js”></script>
    </head>

    <body>
    <script type=”text/javascript”>
    $(document).ready(function() {
    $(‘[type=button]’).jqxButton({ theme:”darkblue” });
    $(‘#btnUpdate’).on(‘click’, function() {
    var rowData = {
    “id” : 5,
    “fruitCategory” : “Apple”,
    “name” : “Royal Gala”,
    “price” : 7.5,
    “qty” : 9
    };

    $(‘#tblFruits’).jqxDataTable(‘updateRow’, 0, rowData);
    });
    var fruitsData = [
    {
    “id” : 1,
    “fruitCategory” : “Apple”,
    “name” : “Fuji”,
    “price” : 20.5,
    “qty” : 5
    },
    {
    “id” : 2,
    “fruitCategory” : “Apple”,
    “name” : “SunDowner”,
    “price” : 5.5,
    “qty” : 3
    }
    ];

    var dataSource = {
    dataType: “json”,
    dataFields: [
    { name: ‘fruitCategory’, type: ‘string’ },
    { name: ‘name’, type: ‘string’ },
    { name: ‘price’, type: ‘float’ },
    { name: ‘qty’, type: ‘int’ }
    ],
    id: ‘id’,
    localdata : fruitsData
    };

    var dataAdapter = new $.jqx.dataAdapter(dataSource);

    $(‘#tblFruits’).jqxDataTable({
    pageable: true,
    pageSize: 10,
    altrows: true,
    sortable: true,
    selectionMode: ‘singleRow’,
    source: dataAdapter,
    theme: ‘darkblue’,
    //groups: [‘fruitCategory’],
    //groupsRenderer: function(value, rowData, level) {
    // return “Fruit Category : ” + value;
    //},
    columns: [
    { text: ‘Name’, dataField: ‘name’, hidden: false, width: 150 },
    { text: ‘Qty’, dataField: ‘qty’, width: 150, columngroup: ‘testGrp’ },
    { text: ‘Price’, dataField: ‘price’, width: 200, columngroup: ‘testGrp’ }
    ],
    columnGroups: [
    { text: ‘Test Group’, name: ‘testGrp’, align: ‘center’ }
    ]
    });
    });

    </script>
    <div id=”tblFruits”>
    </div>
    <br>
    <input id=”btnUpdate” type=”button” value=”Update Row” />
    </body>
    </html>

    The above codes will run find (no error).

    To see the error, you need to comment out the the groups and groupsRenderer section:

    groups: [‘fruitCategory’],
    groupsRenderer: function(value, rowData, level) {
    return “Fruit Category : ” + value;
    },

    And you need google Developer Tools to see the error and the error message would be “Uncaught TypeError: Cannot set property ‘name’ of undefined.

    Thank you.

    Regards,
    Marto Isworo

  • Author
    Posts
Viewing 1 post (of 1 total)