jQuery UI Widgets › Forums › Grid › JqxGrid Checkbox Selection Error
Tagged: ajax, angular grid, Cannot read property parentNode of undefined, checkbox, grid, jquery grid, jqxgrid, json, parentNode error, selectionmode
This topic contains 4 replies, has 2 voices, and was last updated by bora 9 years, 8 months ago.
-
Author
-
Hello,
I’ve already downloaded 3.8.0 library of JQWidgets.
I’m using ASP.NET MVC as platform.Data Binding code (JS) :
function InitForm() {
var dataP = null;$.ajax({
url: ‘url’,
type: ‘GET’,
data: null,
dataType: “json”,
async: false,
success: function (response, textStatus, jqXHR) {
if (response.Response) {
dataP = response.ObjectList;
}
else {
alert(response.Message);
}
},
error: function (jqXHR, textStatus, errorThrown) {
alert(“Error, ” + errorThrown);
}
});var activerenderer = function (row, datafield, value) {
if (value == true) {
return ‘<center></center>’;
}
else {
return ‘<center></center>’;
}
}
var sourceP =
{
localdata: dataP,
datatype: “array”,
datafields:
[
{ name: ‘ID’, type: ‘number’ },
{ name: ‘IsPaid’, type: ‘bool’ },
{ name: ‘SupplierName’, type: ‘string’ },
{ name: ‘ChannelName’, type: ‘string’ },
{ name: ‘InvoiceNumber’, type: ‘string’ },
{ name: ‘DeliveryNumber’, type: ‘string’ },
{ name: ‘InvoiceStateName’, type: ‘string’ },
{ name: ‘Total’, type: ‘number’ }
],
id: ‘ID’,
};
var dataAdapterP = new $.jqx.dataAdapter(sourceP);
$(“#gridPurchaseInvoice”).jqxGrid(
{
width: ‘100%’,
height: 400,
source: dataAdapterP,
sortable: true,
filterable: true,
pageable: true,
selectionmode: ‘checkbox’,
columnsresize: true,
localization: getLocalization(‘tr’),
pagesizeoptions: [’10’, ’20’, ’50’, ‘100’, ‘200’, ‘400’],
pagesize: 100,
theme: ‘energyblue’,
columns: [
{ text: ‘payment’, datafield: ‘IsPaid’, width: ’60px’, cellsrenderer: activerenderer },
{ text: ‘supplier’, datafield: ‘SupplierName’ },
{ text: ‘channel’, datafield: ‘ChannelName’, width: ‘200px’ },
{ text: ‘invoice’, datafield: ‘InvoiceNumber’, width: ’80px’ },
{ text: ‘deliveryform’, datafield: ‘DeliveryNumber’, width: ’80px’ },
{ text: ‘state’, datafield: ‘InvoiceStateName’, width: ‘150px’ },
{ text: ‘total’, datafield: ‘Total’, width: ’80px’ }
]
});$(“#gridPurchaseInvoice”).unbind(“rowdoubleclick”);
$(‘#gridPurchaseInvoice’).bind(‘rowdoubleclick’, function (event) {
var args = event.args;
var boundIndex = args.rowindex;
var visibleIndex = args.visibleindex;
var data = $(‘#gridPurchaseInvoice’).jqxGrid(‘getrowdata’, boundIndex);
OpenModal(‘url_here’, ‘title’, 1200); //==> OpenModal is a function in another js file.
});
$(“#gridPurchaseInvoice”).jqxGrid(‘clearselection’);
}JSON Response of url :
{“ObjectList”:[{“Details”:[],”ID”:25,”InvoiceNumber”:”lkjh”,”DeliveryNumber”:”gfd”,”InvoiceDate”:”\/Date(1434834000000)\/”,”DelayDate”:”\/Date(1435525200000)\/”,”IsPaid”:false,”PaymentDate”:”\/Date(1435611600000)\/”,”InvoiceState”:4,”SupplierID”:2,”ChannelID”:5,”Description”:””,”CreateBy”:2,”CreateDate”:”\/Date(1434918385277)\/”,”ModifiedBy”:2,”ModifiedDate”:”\/Date(1435005170840)\/”,”Active”:true,”ChannelName”:”sale channel”,”SupplierName”:”supplier company name”,”InvoiceStateName”:”Not Finished”,”Total”:0},{“Details”:[],”ID”:23,”InvoiceNumber”:”A123″,”DeliveryNumber”:”B456″,”InvoiceDate”:”\/Date(1434834000000)\/”,”DelayDate”:”\/Date(1434747600000)\/”,”IsPaid”:false,”PaymentDate”:”\/Date(1434834000000)\/”,”InvoiceState”:2,”SupplierID”:2,”ChannelID”:1,”Description”:””,”CreateBy”:2,”CreateDate”:”\/Date(1434900301760)\/”,”ModifiedBy”:2,”ModifiedDate”:”\/Date(1435005069910)\/”,”Active”:true,”ChannelName”:”other channel name”,”SupplierName”:”other supplier name”,”InvoiceStateName”:”wrong invoice”,”Total”:0}],”Response”:true}As you can see my response contains two major property. The property named ObjectList is contains data.
I’m calling InitForm function in $(document).ready()When i click on row selection checkbox in jqxgrid i get error message : “Uncaught TypeError: Cannot read property ‘parentNode’ of undefined”
What is the cause of this error ?
Could you please help me ?
Regards
Hello bora,
Is the grid populated as expected with the data from dataP? Make sure you call InitForm only once. We tested a modified version of your page, but no errors were thrown on row selection:
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.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/jqxmenu.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.filter.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.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="../../scripts/demos.js"></script> <script type="text/javascript"> $(document).ready(function () { function InitForm() { var dataP = [{ "Details": [], "ID": 25, "InvoiceNumber": "lkjh", "DeliveryNumber": "gfd", "InvoiceDate": "\/Date(1434834000000)\/", "DelayDate": "\/Date(1435525200000)\/", "IsPaid": false, "PaymentDate": "\/Date(1435611600000)\/", "InvoiceState": 4, "SupplierID": 2, "ChannelID": 5, "Description": "", "CreateBy": 2, "CreateDate": "\/Date(1434918385277)\/", "ModifiedBy": 2, "ModifiedDate": "\/Date(1435005170840)\/", "Active": true, "ChannelName": "sale channel", "SupplierName": "supplier company name", "InvoiceStateName": "Not Finished", "Total": 0 }, { "Details": [], "ID": 23, "InvoiceNumber": "A123", "DeliveryNumber": "B456", "InvoiceDate": "\/Date(1434834000000)\/", "DelayDate": "\/Date(1434747600000)\/", "IsPaid": false, "PaymentDate": "\/Date(1434834000000)\/", "InvoiceState": 2, "SupplierID": 2, "ChannelID": 1, "Description": "", "CreateBy": 2, "CreateDate": "\/Date(1434900301760)\/", "ModifiedBy": 2, "ModifiedDate": "\/Date(1435005069910)\/", "Active": true, "ChannelName": "other channel name", "SupplierName": "other supplier name", "InvoiceStateName": "wrong invoice", "Total": 0}]; // $.ajax({ // url: 'url', // type: 'GET', // data: null, // dataType: "json", // async: false, // success: function (response, textStatus, jqXHR) { // if (response.Response) { // dataP = response.ObjectList; // } else { // alert(response.Message); // } // }, // error: function (jqXHR, textStatus, errorThrown) { // alert("Error, " + errorThrown); // } // }); var activerenderer = function (row, datafield, value) { if (value == true) { return '<center>1</center>'; } else { return '<center>2</center>'; } } var sourceP = { localdata: dataP, datatype: "array", datafields: [{ name: 'ID', type: 'number' }, { name: 'IsPaid', type: 'bool' }, { name: 'SupplierName', type: 'string' }, { name: 'ChannelName', type: 'string' }, { name: 'InvoiceNumber', type: 'string' }, { name: 'DeliveryNumber', type: 'string' }, { name: 'InvoiceStateName', type: 'string' }, { name: 'Total', type: 'number' }], id: 'ID' }; var dataAdapterP = new $.jqx.dataAdapter(sourceP); $("#gridPurchaseInvoice").jqxGrid({ width: '100%', height: 400, source: dataAdapterP, sortable: true, filterable: true, pageable: true, selectionmode: 'checkbox', columnsresize: true, // localization: getLocalization('tr'), pagesizeoptions: ['10', '20', '50', '100', '200', '400'], pagesize: 100, theme: 'energyblue', columns: [{ text: 'payment', datafield: 'IsPaid', width: '60px', cellsrenderer: activerenderer }, { text: 'supplier', datafield: 'SupplierName' }, { text: 'channel', datafield: 'ChannelName', width: '200px' }, { text: 'invoice', datafield: 'InvoiceNumber', width: '80px' }, { text: 'deliveryform', datafield: 'DeliveryNumber', width: '80px' }, { text: 'state', datafield: 'InvoiceStateName', width: '150px' }, { text: 'total', datafield: 'Total', width: '80px' }] }); $("#gridPurchaseInvoice").unbind("rowdoubleclick"); $('#gridPurchaseInvoice').bind('rowdoubleclick', function (event) { var args = event.args; var boundIndex = args.rowindex; var visibleIndex = args.visibleindex; var data = $('#gridPurchaseInvoice').jqxGrid('getrowdata', boundIndex); OpenModal('url_here', 'title', 1200); //==> OpenModal is a function in another js file. }); $("#gridPurchaseInvoice").jqxGrid('clearselection'); } InitForm(); }); </script> </head> <body class='default'> <div id="gridPurchaseInvoice"> </div> </body> </html>
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Sorry my fault,
I get error when i call InitForm() method second time.
I have to rebind grid in the page after delete operation or after add new entity operation.
So i have to call InitForm method many times on page.If you call InitForm() manually after page fully loaded you will get error like mine i think.
Thank you for your interest.
Regards
Hi bora,
The grid initialization code should be called only once. If you wish, you can reset the grid’s source or another property (or update the data with the method updatebounddata), but calling the initialization code multiple times may lead to unexpected behaviour.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Thank you Dimitar,
I will separate my initialization and data bound methods.Best Regards
-
AuthorPosts
You must be logged in to reply to this topic.