jQuery UI Widgets Forums Grid JqxGrid Checkbox Selection Error

This topic contains 4 replies, has 2 voices, and was last updated by  bora 8 years, 11 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • JqxGrid Checkbox Selection Error #72855

    bora
    Participant

    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

    JqxGrid Checkbox Selection Error #72873

    Dimitar
    Participant

    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,
    Dimitar

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

    JqxGrid Checkbox Selection Error #72876

    bora
    Participant

    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

    JqxGrid Checkbox Selection Error #72877

    Dimitar
    Participant

    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,
    Dimitar

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

    JqxGrid Checkbox Selection Error #72880

    bora
    Participant

    Thank you Dimitar,
    I will separate my initialization and data bound methods.

    Best Regards

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

You must be logged in to reply to this topic.