Expander and a grid

[arikbdParticipant]

Hi,

I have an expander with some buttons and grid inside.

When I create the Expander expanded, the information is loaded correctly.

But when I create the Expander collapsed and then try to open the Expender the operation do not complete and browser is hanged on “Loading…”

Other cases were I have expanders with other type of controls (input, buttons, dropdownlists etc.) works fine.

This used to work, the only change I made was to upgrade to a newer version of jqWidgets.

I’m using version 3.2.2 and tried jQuery 1.10.2 and 1.11.1

I’m sorry for not including my code as it is huge work to extract a working use case.

Thanks,

Arik

[DimitarParticipant]

Hello Arik,

Please make sure you always initialize widgets in the expander’s content in the initContent callback function. See also my reply to your topic about it: http://www.jqwidgets.com/community/topic/what-is-the-purpose-of-the-initcontent-method/.

Best Regards,
Dimitar

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

[arikbdParticipant]

Hi Dimitar,

Thanks.

I have a follow up on that:

I create an expander and then I dynamiclly create its content according to some settings I read from the DB. then I set the content of the Expander.
It seems to work fine until this grid issue (It was working and I cannot say exactly when it stopped working, I upgrade to the new version and I saw it is not working, but downgrading does not solve the problem).

This is example of what I do (This demo works, I get this error:

Uncaught TypeError: Cannot read property 'length' of undefined jquery-1.10.2.js:631
jQuery.extend.each jquery-1.10.2.js:631
b.extend._updatehiddenrows jqxgrid.js:7
b.extend._updaterowsproperties jqxgrid.js:7
a.extend.sortby jqxgrid.sort.js:7
b.extend.databind.dataview.update jqxgrid.js:7
b.jqx.dataview.databind.z jqxgrid.js:7
b.jqx.dataview.databind.k jqxgrid.js:7
i.jqx.dataAdapter.callDownloadComplete jqxdata.js:7
i.jqx.dataAdapter.dataBind.xhr.i.jqx.data.ajax.success jqxdata.js:7
jQuery.Callbacks.fire jquery-1.10.2.js:3048
jQuery.Callbacks.self.fireWith jquery-1.10.2.js:3160
S jqxdata.js:7
i.jqx.data.ajaxTransport.send.H

<div id='jqxExpander'>
    <div>Header</div>
    <div>

    </div>
</div>

$("#jqxExpander").jqxExpander({
       width: 600,
       height: 600,
       theme: 'energyblue',
       expanded: false,
         initContent: function () {

       }
   });

   var strHTML = "<input type='button' id='jqxButton' value='Button' /><div id='mygrid'></div>";
   $("#jqxExpander").jqxExpander('setContent', strHTML);
   
   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 < 50; 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, {
        downloadComplete: function (data, status, xhr) { },
        loadComplete: function (data) { },
           loadError: function (xhr, status, error) { }
    });

    $("#jqxButton").jqxButton({ width: 100, height: 50,  theme: 'energyblue' });
    $("#mygrid").jqxGrid({ width: 800, height: 450, source: dataAdapter,
           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', width: 100, cellsalign: 'right', cellsformat: 'c2' }
           ], altrows: true, sortable: true, pageable: true, filterable: true,  autoheight: true
    });

    $("#jqxButton").jqxButton({ height: 30 });

[DimitarParticipant]

Hi arikbd,

We do not experience the reported issue with the latest version of jQWidgets (3.3.0). However, we recommend you to initialize both widgets in the initContent callback, as shown here:

<!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/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="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxexpander.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var initWidgets = 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 < 50; 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, {
                    downloadComplete: function (data, status, xhr) { },
                    loadComplete: function (data) { },
                    loadError: function (xhr, status, error) { }
                });

                $("#jqxButton").jqxButton({ width: 100, height: 50, theme: 'energyblue' });
                $("#mygrid").jqxGrid({ width: 800, height: 450, source: dataAdapter,
                    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', width: 100, cellsalign: 'right', cellsformat: 'c2' }
                    ], altrows: true, sortable: true, pageable: true, filterable: true, autoheight: true
                });

                $("#jqxButton").jqxButton({ height: 30 });
            };

            $("#jqxExpander").jqxExpander({
                width: 600,
                height: 600,
                theme: 'energyblue',
                expanded: false,
                initContent: initWidgets
            });

            var strHTML = "<input type='button' id='jqxButton' value='Button' /><div id='mygrid'></div>";
            $("#jqxExpander").jqxExpander('setContent', strHTML);
        });
    </script>
</head>
<body class='default'>
    <div id='jqxExpander'>
        <div>
            Header</div>
        <div>
        </div>
    </div>
</body>
</html>

Best Regards,
Dimitar

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

[Author]

Posts