[alpeshParticipant]

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

[alpeshParticipant]

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

[alpeshParticipant]

Thanks Peter,

This is my last question.
Right now i am using version ‘jQWidgets v3.1.0’
Is there any old version problem for below error?
Uncaught TypeError: Cannot read property 'length' of undefined

Thanks,
Alpesh

[alpeshParticipant]

Thanks for reply Peter.

I have tried with above example in my local.but error getting on Search button click.below error showing on chrome browser console.
Uncaught TypeError: Cannot read property 'length' of undefined
Could you please help us ?

Thanks,
Alpesh

[alpeshParticipant]

Hello Peter,

We are getting error below like error.When we click on search button.
Uncaught TypeError: Cannot read property 'length' of undefined

Thanks,
Alpesh

[alpeshParticipant]

Hello Peter,

Could you please help us for above question’s answer ??

Thanks,
Alpesh

[alpeshParticipant]

Thanks Peter.

Yes,it’s working on local data.but We are facing that issue on retrieving server side data.When we click on search button that time we need to only two column.but table display previous column with empty data. we want remove empty column data.

Could you please help for how to remove empty column when we set server data Source on table ?

Thanks,
Alpesh

[alpeshParticipant]

Thanks Peter.

Could you please check below test code run it your local and let us know ?

<!DOCTYPE html>
<html lang="en">
    <head> 
        <title>Table</title> 
        <link rel="stylesheet" href="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/scripts/jquery-1.10.2.min.js"></script>
        <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqx-all.js"></script>

        <script type="text/javascript">
            var that = this;
            $(document).ready( function() {
                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 < 200; 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",
                    dataFields: [{
                            name: 'firstname',
                            type: 'string'
                        }, {
                            name: 'lastname',
                            type: 'string'
                        }, {
                            name: 'productname',
                            type: 'string'
                        }, {
                            name: 'quantity',
                            type: 'number'
                        }, {
                            name: 'total',
                            type: 'number'
                        }]
                };

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

                $("#table").jqxDataTable({
                    width: 670,
                    pageable: true,
                    theme: 'energyblue',
                    editable: true,
                    pagerButtonsCount: 10,
                    source: dataAdapter,
                    columnsResize: true,
                    columns: [{
                            text: 'Name',
                            dataField: 'firstname',
                            width: 100
                        }, {
                            text: 'Last Name',
                            dataField: 'lastname',
                            width: 100
                        }, {
                            text: 'Product',
                            editable: false,
                            dataField: 'productname',
                            width: 180
                        }, {
                            text: 'Quantity',
                            dataField: 'quantity',
                            width: 80,
                            cellsAlign: 'right',
                            align: 'right'
                        }, {
                            text: 'Total',
                            dataField: 'total',
                            cellsAlign: 'right',
                            align: 'right',
                            cellsFormat: 'c2'
                        }]
                });
                
                $('#saveSearch').click(function(e) {
                          var source = {
                        localData: data,
                        dataType: "array",
                        dataFields: [{
                                name: 'firstname',
                                type: 'string'
                            }, {
                                name: 'price',
                                type: 'number'
                            }
                        ]
                };

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

                $("#table").jqxDataTable({
                    width: 670,
                    pageable: true,
                    theme: 'energyblue',
                    editable: true,
                    pagerButtonsCount: 10,
                    source: dataAdapter,
                    columnsResize: true,
                    columns: [{
                            text: 'Name',
                            dataField: 'firstname',
                            width: 100
                        }, {
                            text: 'Unit Price',
                            dataField: 'price',
                            width: 90,
                            cellsAlign: 'right',
                            align: 'right',
                            cellsFormat: 'c2'
                        }
                    ]
                    });
                });
          
            });
        </script>
    </head>
    <body>
        <div id="table"></div>
        <br/>
        <input type="button" value="Search" name="saveSearch" id="saveSearch" class="jqxButton jqx-rc-all jqx-button jqx-widget jqx-fill-state-normal" role="button" aria-disabled="false" style="width: 80px;">
    </body>
</html>

Thanks
Alpesh

[alpeshParticipant]

Thanks Peter ,

[alpeshParticipant]

Thanks Peter.

[alpeshParticipant]

Thanks for reply.

Right now we have setDate Property like below code On button Click.But it is not working.

  $("#advClear").on('click', function (event) {
      $('#first_used_date').jqxDateTimeInput('setDate', null);
   });

Could you please help us for ?

Thanks,
Alpesh

[alpeshParticipant]

Thanks Dimitar.

[alpeshParticipant]

Thank you Dimitar,

Thanks,
Alpesh

[alpeshParticipant]

Hello Peter,
thanks for reply.
Right now,we have solved our issue.

Thanks,
Alpesh

[alpeshParticipant]

Thanks Peter.

I got the solution of dynamically check selected item using below link example.
Example: http://jsfiddle.net/jqwidgets/HgHaN/

[Author]

Posts