jQWidgets Forums

Forum Replies Created

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

Author

Posts

December 5, 2017 at 8:17 am in reply to: Multiple Roots in dataadapter Multiple Roots in dataadapter #97739

Participant

Hi,

But using another data adapter means doing the same HTTP call again, whereas I have already received the data in the first call.

Isn’t there a better option?

December 5, 2017 at 8:11 am in reply to: Row Details Not Working – Remote Data 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

December 1, 2017 at 8:49 am in reply to: Row Details Not Working – Remote Data 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 1, 2017 at 4:18 am in reply to: Row Details Not Working – Remote Data Row Details Not Working – Remote Data #97657

bluesand4

Participant

Any one can help?

Thanks

November 30, 2017 at 10:32 am in reply to: Row Details Not Working – Remote Data 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

Author

Posts

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