jQWidgets Forums

Tagged: dataBind, grid expandable row, jqxGrid ;

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

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

Author

Row Details Not Working – Remote Data Posts

November 30, 2017 at 8:29 am Row Details Not Working – Remote Data #97636

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
                    }
                ]
            });
        });

November 30, 2017 at 10:24 am 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/

November 30, 2017 at 10:32 am 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

December 1, 2017 at 4:18 am Row Details Not Working – Remote Data #97657

bluesand4

Participant

Any one can help?

Thanks

December 1, 2017 at 8:49 am 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>

December 5, 2017 at 8:11 am 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

March 6, 2018 at 10:54 pm Row Details Not Working – Remote Data #99060

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

March 7, 2018 at 1:56 pm Row Details Not Working – Remote Data #99070

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/

March 28, 2018 at 4:15 pm Row Details Not Working – Remote Data #99457

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.

March 28, 2018 at 4:24 pm Row Details Not Working – Remote Data #99458

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

March 29, 2018 at 11:47 am 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/

July 17, 2018 at 6:35 am Row Details Not Working – Remote Data #101025

dave_dyson

Participant

hi,

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

July 17, 2018 at 7:51 am Row Details Not Working – Remote Data #101031

Peter Stoev

Keymaster

Hi dave_dyson,

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

Regards,
Peter

July 25, 2018 at 11:01 am Row Details Not Working – Remote Data #101211

dave_dyson

Participant

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

Author

Posts

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

You must be logged in to reply to this topic.