jQuery UI Widgets Forums Grid Getting Error with Assembling N-Nested jQuery Grid

This topic contains 7 replies, has 3 voices, and was last updated by  Dimitar 9 years, 9 months ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author

  • alpesh
    Participant

    Hello,

    We are trying example like Assembling N-Nested jQuery Grid.But we are getting below error.
    “Uncaught Error: Invalid jQuery Selector! Please, check whether the used ID or CSS Class name is correct.”

    Could you please help us ??

    Thanks
    Alpesh


    Dimitar
    Participant

    Hello Alpesh,

    This means you are trying to initialize from or are calling a method on an incorrectly selected HTML element. For example, your grid div may have the id jqxgrid but you may be trying to call:

    $('#jqxGrid').jqxGrid('sortby', 'columndatafield', 'asc');

    when it should be:

    $('#jqxgrid').jqxGrid('sortby', 'columndatafield', 'asc');

    Best Regards,
    Dimitar

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


    alpesh
    Participant

    Hi Dimitar,

    Could you please check it below code ?? Is it correct or wrong ? because we are still facing error .

     var theme='';
                        var data = new Array();
                        var firstNames =
                            [
                            "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"
                        ];
                        var lastNames =
                            [
                            "Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"
                        ];
                        var productNames =
                            [
                            "Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"
                        ];
                        var priceValues =
                            [
                            "2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"
                        ];
                        for (var i = 0; i < 10; i++) {
                            var row = {};
                            var productindex = Math.floor(Math.random() * productNames.length);
                            var price = parseFloat(priceValues[productindex]);
                            var quantity = 1 + Math.round(Math.random() * 10);
                            row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
                            row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
                            row["productname"] = productNames[productindex];
                            row["price"] = price;
                            row["quantity"] = quantity;
                            row["total"] = price * quantity;
                            data[i] = row;
                        }
                        var source =
                            {
                            localdata: data,
                            datatype: "array"
                        };
                         $("#jqxgrid").bind('bindingcomplete', function (event) {
                            if (event.target.id == "jqxgrid") {
                                $("#jqxgrid").jqxGrid('beginupdate');
                                var datainformation = $("#jqxgrid").jqxGrid('getdatainformation');
                                for (i = 0; i < datainformation.rowscount; i++) {
                                    var hidden = i > 0 ? true : false;
                                    $("#jqxgrid").jqxGrid('setrowdetails', i, "<div id='grid" + i + "' style='margin: 10px;'></div>", 220, hidden);
                                }
                                $("#jqxgrid").jqxGrid('endupdate');
                            }
                        });
                        var dataAdapter = new $.jqx.dataAdapter(source);
                        // creage jqxgrid
                         // set rows details.
                      
                        // create nested grid.
                        var initlevel2 = function (index) {
                            console.log(index);
                            var grid = $($.find('#grid' + index));
                            grid.bind('bindingcomplete', function (event) {
                                if (event.target.id == "grid" + index) {
                                    grid.jqxGrid('beginupdate');
                                    var datainformation = grid.jqxGrid('getdatainformation');
                                    for (var i = 0; i < datainformation.rowscount; i++) {
                                        var hidden = true;
                                        grid.jqxGrid('setrowdetails', i, "<div id='subgrid" + i + "' style='margin: 10px;'></div>", 220, hidden);
                                    }
                                    grid.jqxGrid('endupdate');
                                }
                            });
                            if (grid != null) {
                               
                                var dataAdapter = new $.jqx.dataAdapter(source);
                                grid.jqxGrid({ rowdetails: true, initrowdetails: initlevel3, source: dataAdapter, theme: theme, width: 600, height: 200,
                                    columns: [
                                        { text: 'First Name', dataField: 'firstname', width: 100 },
                                        { text: 'Last Name', dataField: 'lastname', width: 100 },
                                        { text: 'Product', dataField: 'productname', width: 180 },
                                        { text: 'Quantity', dataField: 'quantity', cellsalign: 'right' }
                                    ]
                                });
                            }else{
                                console.log('test');
                            }
                        }
                     
                        var initlevel3 = function (index) {
                            var grid = $($.find('#subgrid' + index));
                            console.log(grid);
                            var dataAdapter = new $.jqx.dataAdapter(source);
                            if (grid != null) {
                                grid.jqxGrid({ source: dataAdapter, theme: theme, width: 530, height: 200,
                                    columns: [
                                        { text: 'First Name', dataField: 'firstname', width: 100 },
                                        { text: 'Last Name', dataField: 'lastname', width: 100 },
                                        { text: 'Product', dataField: 'productname', width: 180 },
                                        { text: 'Quantity', dataField: 'quantity', cellsalign: 'right' }
                                    ]
                                });
                            }
                        }
                        
                         
                          $("#jqxgrid").jqxGrid(
                        {
                            width: 670,
                            height: 365,
                            source: dataAdapter,
                            theme: theme,
                            rowdetails: true,
                            initrowdetails: initlevel2,
                            columns: [
                                { text: 'First Name', dataField: 'firstname', width: 100 },
                                { text: 'Last Name', dataField: 'lastname', width: 100 },
                                { text: 'Product', dataField: 'productname', width: 180 },
                                { text: 'Quantity', dataField: 'quantity', width: 80, cellsalign: 'right' },
                                { text: 'Unit Price', dataField: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
                                { text: 'Total', dataField: 'total', cellsalign: 'right', minwidth: 100, cellsformat: 'c2' }
                            ]
                        });
    

    Thanks,
    Alpesh


    Dimitar
    Participant

    Hi Alpesh,

    After the following line from initlevel2:

    var grid = $($.find('#grid' + index));

    please add this console log:

    console.log(grid.length);

    Is the logged value 0 or 1? Try the same for grid in initlevel3.

    Best Regards,
    Dimitar

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


    alpesh
    Participant

    Thanks for reply

    We have check with console log and getting log value 0 .

    And then after next line we are getting below error.
    Uncaught Error: Invalid jQuery Selector! Please, check whether the used ID or CSS Class name is correct.

    Thanks
    Alpesh


    Dimitar
    Participant

    Hi Alpesh,

    The method setrowdetails is no longer supported. Here is an updated example using rowdetailstemplate. Do you experience any issues with it?

    <!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.10.2.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.selection.js"></script>
        <script type="text/javascript" src="../../scripts/demos.js"></script>
        <script type="text/javascript" src="generatedata.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                // prepare the data
                var data = new Array();
                var firstNames =
                [
    	            "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"
                ];
                var lastNames =
                [
    	            "Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"
                ];
                var productNames =
                [
    	            "Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"
                ];
                var priceValues =
                [
    	            "2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"
                ];
                for (var i = 0; i < 10; i++) {
                    var row = {};
                    var productindex = Math.floor(Math.random() * productNames.length);
                    var price = parseFloat(priceValues[productindex]);
                    var quantity = 1 + Math.round(Math.random() * 10);
                    row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
                    row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
                    row["productname"] = productNames[productindex];
                    row["price"] = price;
                    row["quantity"] = quantity;
                    row["total"] = price * quantity;
                    data[i] = row;
                }
                var source =
                {
                    localdata: data,
                    datatype: "array"
                };
    
                var dataAdapter = new $.jqx.dataAdapter(source);
    
                var initlevel2 = function (index) {
                    var grid = $($.find('#grid' + index));
                    if (grid != null) {
                        var dataAdapter = new $.jqx.dataAdapter(source);
                        grid.jqxGrid({ rowdetails: true, initrowdetails: initlevel3, source: dataAdapter, theme: theme, width: 600, height: 200,
                            rowdetailstemplate: { rowdetails: "<div id='subgrid' style='margin: 10px;'></div>", rowdetailsheight: 220, rowdetailshidden: true },
                            columns: [
    			                { text: 'First Name', dataField: 'firstname', width: 100 },
    			                { text: 'Last Name', dataField: 'lastname', width: 100 },
    			                { text: 'Product', dataField: 'productname', width: 180 },
    			                { text: 'Quantity', dataField: 'quantity', cellsalign: 'right' }
    			            ]
                        });
                    }
                }
    
                var initlevel3 = function (index) {
                    var grid = $($.find('#subgrid' + index));
                    var dataAdapter = new $.jqx.dataAdapter(source);
                    if (grid != null) {
                        grid.jqxGrid({ source: dataAdapter, theme: theme, width: 530, height: 200,
                            columns: [
                			    { text: 'First Name', dataField: 'firstname', width: 100 },
                			    { text: 'Last Name', dataField: 'lastname', width: 100 },
                			    { text: 'Product', dataField: 'productname', width: 180 },
                			    { text: 'Quantity', dataField: 'quantity', cellsalign: 'right' }
                			]
                        });
                    }
                }
    
                $("#jqxgrid").jqxGrid(
                {
                    width: 670,
                    height: 365,
                    source: dataAdapter,
                    theme: theme,
                    rowdetails: true,
                    initrowdetails: initlevel2,
                    rowdetailstemplate: { rowdetails: "<div id='grid' style='margin: 10px;'></div>", rowdetailsheight: 220, rowdetailshidden: true },
                    columns: [
    		            { text: 'First Name', dataField: 'firstname', width: 100 },
    		            { text: 'Last Name', dataField: 'lastname', width: 100 },
    		            { text: 'Product', dataField: 'productname', width: 180 },
    		            { text: 'Quantity', dataField: 'quantity', width: 80, cellsalign: 'right' },
    		            { text: 'Unit Price', dataField: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
    		            { text: 'Total', dataField: 'total', cellsalign: 'right', minwidth: 100, cellsformat: 'c2' }
    	            ]
                });
            });
        </script>
    </head>
    <body class='default'>
        <div id="jqxgrid">
        </div>
    </body>
    </html>

    Best Regards,
    Dimitar

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


    subhroneel
    Participant

    I have done everything perfectly, I am actually using angular and jquery. Using ng-view I have route one page where I have used this
    <div id=’jqxWidget’ style=”font-size: 13px; font-family: Verdana; float: left;”>
    <div id=”jqxgrid”></div>
    </div>

    Now in my .js file I have written this.
    $(“#jqxgrid”).jqxGrid(
    {
    source: dataAdapter,
    sortable: true,
    columnsResize: true,
    columns: [
    { text: ‘Factory Name’, datafield: ‘factory_name’, width: 50 },
    { text: ‘Factory Address 1’, datafield: ‘factory_address1’, width: 100 },
    { text: ‘Factory Address 2’, datafield: ‘factory_address2’, width: 100 },
    { text: ‘PO / PS’, datafield: ‘factory_pspo’, width: 50 },
    { text: ‘District’, datafield: ‘factory_district’, width: 50 },
    { text: ‘Phone’, datafield: ‘factory_phone’, width: 50 },
    { text: ‘PF No.’, datafield: ‘pf_no’, cellsformat: ‘f’, width: 50 },
    { text: ‘ESI No.’, datafield: ‘esi_no’, width: 50 },
    { text: ‘PAN No.’, datafield: ‘pan’, width: 50 },
    { text: ‘PTax Reg.’, datafield: ‘ptax_reg_cert_no’, width: 50 },
    { text: ‘PTax Emroll.’, datafield: ‘ptax_enroll_cert_no’, width: 50 },
    { text: ”, datafield: ‘factory_id’, width: 0 }
    ]
    });
    But still the message is coming “Error: Invalid Selector – #jqxGrid! Please, check whether the used ID or CSS Class name is correct. jqxcore.js:7”.

    I am stuck of … please help me.


    Dimitar
    Participant

    Hello subhroneel,

    Please carefully check if you are calling any method with the selector $("#jqxGrid") instead of $("#jqxgrid").

    Best Regards,
    Dimitar

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

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

You must be logged in to reply to this topic.