jQuery UI Widgets Forums Grid Row Details Not Working – Remote Data

This topic contains 13 replies, has 5 voices, and was last updated by  dave_dyson 5 years, 9 months ago.

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
  • Row Details Not Working – Remote Data #97636

    bluesand4
    Participant

    Hi,
    I have a grid which calls a web service to get the JSON data. I want to expand each row and show some additional details. However, when expanding the row, it is always empty. When I test using local data (array), it works fine. I searched every where and compared my code with all examples you have provided, but no use. All the demos you have use local data.

    Can you please assist me?
    Another question is regarding autobind. What does that method do ?
    // perform data binding operation.
    dataAdapter.dataBind();

    My Expandable row

    Code snippet:

    $(document).ready(function () {
                var dataAdapter = new $.jqx.dataAdapter({
                    datatype: "json",
                    url: "http://mydomain.com:4422/test"
                }, {
                    loadError: function (xhr, status, error) {
                        console.log(error)
                    },
                    loadComplete: function (edata, textStatus, jqXHR) {
                        return edata.records;
                    }
                });
                $("#jqxgrid").jqxGrid({
                    source: dataAdapter,
                    rowdetails: true,
                    rowdetailstemplate: {
                        rowdetails: "<div style='margin: 10px;'>Row Details template</div>",
                        rowdetailsheight: 30
                    },
                    ready: function () {
                        $("#jqxgrid").jqxGrid('showrowdetails', 2);
                    },
                    initrowdetails: function (index, parentElement, gridElement, datarecord) {
                        var rowDetails = $($(parentElement).children()[0]);
                        rowDetails.html("Row Details init " + index);
                    },
                    sortable: true,
                    width: 1720,
                    enabletooltips: true,
                    Columns: [{
                            text: 'Time',
                            datafield: 'time',
                            width: 100
                        },
                        {
                            text: 'Name',
                            datafield: 'name',
                            width: 140
                        }
                    ]
                });
            });
    Row Details Not Working – Remote Data #97638

    Stanislav
    Participant

    Hello bluesand4,

    You said you have checked all examples, but does that include the ‘Data Binding’ demos?
    The row is empty because you probably don’t call all the data. So the problem must be in the JSON.

    As for your second question, you can find more information here.
    But the short version is: The dataBind method triggers the jqxDataAdapter’s callbacks – loadComplete, downloadComplete(if the data is from url), etc.. Actually all widgets like ListBox, Grid, ComboBox, Chart internally call this method.

    Best Regards,
    Stanislav

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

    • This reply was modified 6 years, 4 months ago by  Stanislav.
    Row Details Not Working – Remote Data #97640

    bluesand4
    Participant

    Hi Stanislav,

    Thanks for your quick reply.

    The issue is not with the JSON data. The JSON data is being shown successfully in the main row. Then, for testing purposes, I am only using static data right now which should be shown inside the expanded row, and this is not showing, i.e. the expanded row contains nothing whereas it should contain:
    Row Details init 1

    Which is being generated by:
    rowDetails.html("Row Details init " + index);

    That is the faulty part

    Thanks

    Row Details Not Working – Remote Data #97657

    bluesand4
    Participant

    Any one can help?

    Thanks

    Row Details Not Working – Remote Data #97662

    bluesand4
    Participant

    After further testing, I was able to narrow down the issue to be with styling.

    This is your demo code from jqwidgets website with a few additional columns. It shows the same issue I am having. I found it to happen in FireFox (52.4.1) only but not in Chrome. Try to open one row at a time then another after a few rows. A few rows will show the expanded row correctly, whereas others not. It seems it has to do with width or how you have styled the inner rows… I am not sure

    <html>
    
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Basic Template</title>
    
        <link rel="stylesheet" href="../css/bootstrap/bootstrap.min.css">
        <link rel="stylesheet" href="../css/bootstrap/bootstrap-theme.min.css">
        <link rel="stylesheet" href="../css/jqwidgets/jqx.base.css" type="text/css" />
        <link rel="stylesheet" href="../css/jqwidgets/jqx.darkblue.css" type="text/css" />
    </head>
    
    <body>
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div id="jqxgrid"> </div>
                </div>
            </div>
        </div>
    
        <!-- Scripts -->
        <script type="text/javascript" src="../js/scripts/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="../js/scripts/bootstrap.min.js"></script>
        <script type="text/javascript" src="../js/jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../js/jqwidgets/jqxdata.js"></script>
        <script type="text/javascript" src="../js/jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript" src="../js/jqwidgets/jqxscrollbar.js"></script>
        <script type="text/javascript" src="../js/jqwidgets/jqxmenu.js"></script>
        <script type="text/javascript" src="../js/jqwidgets/jqxlistbox.js"></script>
        <script type="text/javascript" src="../js/jqwidgets/jqxdropdownlist.js"></script>
        <script type="text/javascript" src="../js/jqwidgets/jqxgrid.js"></script>
        <script type="text/javascript" src="../js/jqwidgets/jqxgrid.selection.js"></script>
        <script type="text/javascript" src="../js/jqwidgets/jqxgrid.columnsresize.js"></script>
        <script type="text/javascript" src="../js/jqwidgets/jqxgrid.filter.js"></script>
        <script type="text/javascript" src="../js/jqwidgets/jqxgrid.sort.js"></script>
        <script type="text/javascript" src="../js/jqwidgets/jqxgrid.pager.js"></script>
        <script type="text/javascript" src="../js/jqwidgets/jqxgrid.grouping.js"></script>
        <script type="text/javascript">
            $(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 < 1000; 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;
                    row["total1"] = price * quantity;
                    row["total2"] = price * quantity;
                    row["total3"] = price * quantity;
                    row["total4"] = price * quantity;
                    row["total5"] = price * quantity;
                    row["total6"] = price * quantity;
                    row["total7"] = price * quantity;
                    data[i] = row;
                }
                var source = {
                    localdata: data,
                    datatype: "array"
                };
                var dataAdapter = new $.jqx.dataAdapter(source, {
                    loadComplete: function (data) {},
                    loadError: function (xhr, status, error) {}
                });
                $("#jqxgrid").jqxGrid({
                    source: dataAdapter,
                    width: 1000,
                    rowdetails: true,
                    rowdetailstemplate: {
                        rowdetails: "<div style='margin: 10px;'>Row Details template</div>",
                        rowdetailsheight: 30
                    },
                    ready: function () {
                        $("#jqxgrid").jqxGrid('showrowdetails', 2);
                    },
                    //initrowdetails is a callback function which fires when a row is expanded for the first time
                    initrowdetails: function (index, parentElement, gridElement, datarecord) {
                        var rowDetails = $($(parentElement).children()[0]);
                        rowDetails.html("Row Details init " + index);
                        rowDetails.css('background-color', 'red');
    
                    },
                    columns: [{
                            text: 'First Name',
                            datafield: 'firstname',
                            width: 150
                        },
                        {
                            text: 'Last Name',
                            datafield: 'lastname',
                            width: 150
                        },
                        {
                            text: 'Product',
                            datafield: 'productname',
                            width: 210
                        },
                        {
                            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'
                        },
                        {
                            text: 'Total1',
                            datafield: 'total1',
                            width: 110,
                            cellsalign: 'right',
                            cellsformat: 'c2'
                        },
                        {
                            text: 'Total2',
                            datafield: 'total2',
                            width: 120,
                            cellsalign: 'right',
                            cellsformat: 'c2'
                        },
                        {
                            text: 'Total3',
                            datafield: 'total3',
                            width: 50,
                            cellsalign: 'right',
                            cellsformat: 'c2'
                        },
                        {
                            text: 'Total4',
                            datafield: 'total4',
                            width: 60,
                            cellsalign: 'right',
                            cellsformat: 'c2'
                        }
                    ]
                });
            });
        </script>
    </body>
    
    </html>
    • This reply was modified 6 years, 4 months ago by  bluesand4.
    • This reply was modified 6 years, 4 months ago by  bluesand4.
    Row Details Not Working – Remote Data #97738

    bluesand4
    Participant

    I am evaluating JQwidgets and this is blocking me.

    I hope to find some solution soon.

    Thanks


    sxp
    Participant

    We are also getting this problem only in Firefox 58.0.2 that is stopping us upgrade from 5.1.0
    You can simulate the issue by modifying the demo example in jqxgrid rowdetails by

    increasing grid height to 300
    add 6 extra columns { text: ‘Col1’, width: 40 },

    You will then notice that rowdetails for ‘First Name’ ‘Nancy’ using the sample data is empty


    Stanislav
    Participant

    Hello sxp,

    We tested this example and it works well in the visual studio.
    I had added more columns and it worked fine with 13-14 columns.
    We will produce a working item for this case soon.

    Best Regards,
    Stanislav

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


    dave_dyson
    Participant

    hi bluesand4

    I am getting the same issue. It didn’t happen with my last release of jQWidgets 5.1.0.

    A temp fix that worked for me (but use at your own risk) and until a proper one is generated by jQWidgets team

    if using firefox browser

    $(“.jqx-enableselect”).css(“z-index”, 599); // increasing value from 299

    With V5.1.0, the z-index was set to 9999 and with current release is 299.
    I noticed with V5.3.0 a change was made to use lower default z-index values. This may have caused this issue.


    dave_dyson
    Participant

    hi bluesand4

    I forget to specify where to put the stt

    $(“.jqx-enableselect”).css(“z-index”, 599); // increasing value from 299

    I added it as last stt in the initrowdetails function

    Row Details Not Working – Remote Data #99472

    Stanislav
    Participant

    Hello dave_dyson,

    Recently there were a lot of questions regarding the ‘z-index’, and how items were hidden behind their parents.
    The fix is to set the ‘z-index’ of those items higher than the parents.

    What you are proposing is a temporary solution.
    We are working on a fix, and it should be released in the near future.

    Best Regards,
    Stanislav

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


    dave_dyson
    Participant

    hi,

    Has the z-index issue (see above) been resolved with latest release V6.0.0 ?


    Peter Stoev
    Keymaster

    Hi dave_dyson,

    We do not have changes regarding the Grid z-indexes.

    Regards,
    Peter


    dave_dyson
    Participant

    hi

    Thanks, as issue has now been addressed in release V6.0.4

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

You must be logged in to reply to this topic.