jQWidgets Forums

This topic contains 3 replies, has 2 voices, and was last updated by Peter Stoev 12 years, 1 month ago.

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

Author

Nested grid – last row with total is missing with upgrade to 2.7 & 2.8 Posts

March 25, 2013 at 6:22 am Nested grid – last row with total is missing with upgrade to 2.7 & 2.8 #17875

midi

Participant

Hi,

I extended the nested grid function and added a last row, with total (note, this total is not using ‘Aggregate’ for the columns above.

Some nested grids have data and some nested grids have no data (not added yet /not populated).

My application is on version 2.5.5 and we have had no issues with the last row (total row) being displayed.

Last Friday, 22nd March I upgraded to version 2.7 and my total row (last row) has gone missing – erratic and happening either in the case where the nested grid has data or where there is no data.

Also just tried upgrading to version 2.8 and same issue with my total row missing.

Kindly advise what could be the issue here caused by upgrade from v. 2.5.5 to v.2.7 & v.2.8 ?

How to resolve? As I want to use the new features and fixes in latest versions asap.

Let me know if you need more information here to understand what my issue is.

Best regards,
midi

March 25, 2013 at 7:17 am Nested grid – last row with total is missing with upgrade to 2.7 & 2.8 #17878

Peter Stoev

Keymaster

Hi midi,

Please, provide a sample which demonstrates your issue. In addition, see this sample: createremoveupdatedata.htm.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

March 25, 2013 at 9:38 am Nested grid – last row with total is missing with upgrade to 2.7 & 2.8 #17887

midi

Participant

Hi Peter,

I did more research on the problem above and I found it should be the sorting function that causes it.

I think it’s a bug. FYI, after applying sorting on the grid, I can not open the nested grid correctly.

For example, “A”,”B”,”C” are 3 items (each has a nested grid) in the grid from top to bottom. Before applying sorting, I can open each nested grid with no problem.

After refreshing the page and applying ascending sorting once the grid is loaded, the order of them becomes “A”,”C”,”B” from top to bottom. However, the first time when I open the nested grid for “C” or “B”, the nested grid for “A” will be automatically opened.

Then I remove the sorting, everything works well again.

I don’t know what is changed from version 2.5.5 to 2.7/2.8 that causes this bug.

Can you help me with above problem?

Many Thanks,
midi

March 25, 2013 at 9:48 am Nested grid – last row with total is missing with upgrade to 2.7 & 2.8 #17889

Peter Stoev

Keymaster

Hi midi,

I have requested for a sample which demonstrates your issue. Without a sample, I will not be able to help you.

Below is a sample with nested Grids with applied sorting:

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>This example shows how to display nested Grid plugins.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.8.3.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/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getDemoTheme();
            var url = "../sampledata/employees.xml";
            var source =
            {
                datafields: [
                    { name: 'FirstName' },
                    { name: 'LastName' },
                    { name: 'Title' },
                    { name: 'Address' },
                    { name: 'City' }
                ],
                root: "Employees",
                record: "Employee",
                id: 'EmployeeID',
                datatype: "xml",
                async: false,
                url: url,
                sortcolumn: 'FirstName',
                sortdirection: 'asc'
            };
            var employeesAdapter = new $.jqx.dataAdapter(source);
            var orderdetailsurl = "../sampledata/orderdetails.xml";
            var ordersSource =
            {
                datafields: [
                    { name: 'EmployeeID' },
                    { name: 'ShipName' },
                    { name: 'ShipAddress' },
                    { name: 'ShipCity' },
                    { name: 'ShipCountry' },
                    { name: 'ShippedDate', type: 'date' }
                ],
                root: "Orders",
                record: "Order",
                datatype: "xml",
                url: orderdetailsurl,
                async: false
            };
            var ordersDataAdapter = new $.jqx.dataAdapter(ordersSource, { autoBind: true });
            orders = ordersDataAdapter.records;
            // create nested grid.
            var initrowdetails = function (index, parentElement, gridElement, record) {
                var id = record.uid.toString();
                var grid = $($(parentElement).children()[0]);
                var filtergroup = new $.jqx.filter();
                var filter_or_operator = 1;
                var filtervalue = id;
                var filtercondition = 'equal';
                var filter = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
                // fill the orders depending on the id.
                var ordersbyid = [];
                for (var m = 0; m < orders.length; m++) {
                    var result = filter.evaluate(orders[m]["EmployeeID"]);
                    if (result)
                        ordersbyid.push(orders[m]);
                }
                var orderssource = { datafields: [
                    { name: 'EmployeeID' },
                    { name: 'ShipName' },
                    { name: 'ShipAddress' },
                    { name: 'ShipCity' },
                    { name: 'ShipCountry' },
                    { name: 'ShippedDate' }
                ],
                    id: 'OrderID',
                    localdata: ordersbyid
                }
                if (grid != null) {
                    grid.jqxGrid({ source: orderssource, theme: theme, width: 600, height: 200,
                        columns: [
                          { text: 'Ship Name', datafield: 'ShipName', width: 200 },
                          { text: 'Ship Address', datafield: 'ShipAddress', width: 200 },
                          { text: 'Ship City', datafield: 'ShipCity', width: 150 },
                          { text: 'Ship Country', datafield: 'ShipCountry', width: 150 },
                          { text: 'Shipped Date', datafield: 'ShippedDate', width: 200 }
                       ]
                    });
                }
            }
            var photorenderer = function (row, column, value) {
                var name = $('#jqxgrid').jqxGrid('getrowdata', row).FirstName;
                var imgurl = '../../images/' + name.toLowerCase() + '.png';
                var img = '<div style="background: white;"><img style="margin:2px; margin-left: 10px;" width="32" height="32" src="' + imgurl + '"></div>';
                return img;
            }
            var renderer = function (row, column, value) {
                return '<span style="margin-left: 4px; margin-top: 9px; float: left;">' + value + '</span>';
            }
            // creage jqxgrid
            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                height: 365,
                source: source,
                theme: theme,
                sortable: true,
                rowdetails: true,
                rowsheight: 35,
                initrowdetails: initrowdetails,
                rowdetailstemplate: { rowdetails: "<div id='grid' style='margin: 10px;'></div>", rowdetailsheight: 220, rowdetailshidden: true },
                ready: function () {
                    $("#jqxgrid").jqxGrid('showrowdetails', 1);
                },
                columns: [
                      { text: 'Photo', width: 50, cellsrenderer: photorenderer },
                      { text: 'First Name', datafield: 'FirstName', width: 100, cellsrenderer: renderer },
                      { text: 'Last Name', datafield: 'LastName', width: 100, cellsrenderer: renderer },
                      { text: 'Title', datafield: 'Title', width: 180, cellsrenderer: renderer },
                      { text: 'Address', datafield: 'Address', width: 300, cellsrenderer: renderer },
                      { text: 'City', datafield: 'City', width: 170, cellsrenderer: renderer }
                  ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id="jqxgrid">
    </div>
</body>
</html>

In addition, a nested Grid is initialized using the data source that is passed to it. That depends only from the implementation in your “initrowdetails” callback function.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

Author

Posts

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

You must be logged in to reply to this topic.