jQuery UI Widgets Forums Navigation Expander Expander and a grid

This topic contains 3 replies, has 2 voices, and was last updated by  Dimitar 5 years, 8 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • Expander and a grid #54897

    arikbd
    Participant

    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

    Expander and a grid #54913

    Dimitar
    Participant

    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/

    Expander and a grid #54936

    arikbd
    Participant

    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 });
    Expander and a grid #54976

    Dimitar
    Participant

    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/

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

You must be logged in to reply to this topic.