jQWidgets Forums

Tagged: datatable grouping and updaterow

This topic contains 3 replies, has 2 voices, and was last updated by Peter Stoev 10 years, 11 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)

Author

Uncaught TypeError: Cannot set property 'xxx' of undefined Posts
June 23, 2014 at 3:12 am Uncaught TypeError: Cannot set property 'xxx' of undefined #56196

Marto Isworo
Participant

Hi Peter Stoev,

I got an error message “Uncaught TypeError: Cannot set property ‘xxx’ of undefined” when trying to update a row of jqxDataTable with the rows grouping enabled.

The table was created using the following codes
==================================
var dataSource = {
dataType: “json”,
url: “getFruits.php”,
id: “fruitID”,
dataFields: [
{ name: ‘fruitCategory’, type: ‘string’ },
{ name: ‘name’, type: ‘string’ },
{ name: ‘modifiedDate’, type: ‘date’ },
{ name: ‘qty’, type: ‘int’ },
{ name: ‘price’, type: ‘float’ }
]
};

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: ‘Fruit Category’, dataField: ‘fruitCategory’, hidden: true, width: 150 },
{ text: ‘Name’, dataField: ‘name’, width: 150 },
{ text: ‘Modified Date’, dataField: ‘modifiedDate’, width: 200 },
{ text: ‘Qty’, dataField: ‘qty’, columngroup: ‘testGrp’, width: 100 },
{ text: ‘Price’, dataField: ‘price’, columngroup: ‘testGrp’, width: 150 }
],
columnGroups: [
{ text: ‘Group’, name: ‘testGrp’, align: ‘center’ }
]
});
==================================================

Then I tried to update the first row using the following codes
==================================================
var selection = $(‘#tblFruits’).jqxDataTable(‘getSelection’);
var rowData = selection[0];
rowData.qty = 10;
rowData.price = 10.5f;
$(‘#tblFruits’).jqxDataTable(‘updateRow’, 0, rowData); // It failed here !!!
==================================================

I could update the row (no error), If I commented out the following lines:
// groups: [‘fruitCategory’],
// groupsRenderer: function(value, rowData, level) {
// return “Fruit Category: ” + value;
// },

My question:
– Is this a bug?
– Is the rowUpdate method can not be used against a table with the rows grouping enabled?
– Am I missing something?
– How to work around this issue?

Thank’s
Marto Isworo

June 23, 2014 at 8:20 am Uncaught TypeError: Cannot set property 'xxx' of undefined #56206

Peter Stoev
Keymaster

Hi Marto Isworo,

Well, I am glad that you’re asking me for support. Unfortunately, the provided information is insufficient for testing your scenario. Please, provide a full sample which we would be able to run locally and which demonstrates your issue.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

June 23, 2014 at 9:18 am 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

June 23, 2014 at 9:30 am Uncaught TypeError: Cannot set property 'xxx' of undefined #56224

Peter Stoev
Keymaster

Hi Marto Isworo,

The issue is confirmed. Thank you for the feedback. Workaround is unfortunately unavailable.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/
Author

Posts

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.