Nested Grids not displayed in Firefox

[Mayrhofer_Participant]

Hi,

I have a main grid with nested grids using server side filtering, paging and sorting. Since I update to jqwidgets v.5.4, the nested grids are not shown in firefox anymore. I already updated to the latest version (5.5) but that didn’t help.
Chrome, IE, e.g. are displaying the nested grids and the data correct and when I inspect the data in firefox it is shown too.
Is it possible that there is a problem in my grid configuration or is this a current known bug?

The nested grid:

 grid_container.jqxGrid({
                width: totalWidth,
                source: dataAdapter,
                columnsresize: options.columnsResize != null ? options.columnsResize : true,
                columnsreorder: true,
                altrows: true,//Wechselnde Zeilenfarben
                pagesize: data.length,
                virtualmode: true, //use server side handling
                rendergridrows: function (obj) { //needed for virtualmode - data coming from dataAdapter now
                    return dataAdapter.records;
                },
                rendered: function () {
                    scrollToLastSelectedRow();
                },
                columns: columns,
                columnsheight: 25,
                sortable: true,
                sorttogglestates: 1,
                showsortcolumnbackground: false,
                enablebrowserselection: false,
                verticalscrollbarstep: 60,
                showfilterrow: false,
                filterable: true,
                autoshowfiltericon: true,
                showfiltercolumnbackground: true,
                theme: 'falcana',
                rowsheight: rowsHeight
            });

The main grid:

grid_container.jqxGrid({
                width: totalWidth,
                source: dataAdapter,
                columnsresize: options.columnsResize != null ? options.columnsResize : true,
                columnsreorder: true,
                altrows: true,//Wechselnde Zeilenfarben
                pagesize: options.rowsPerPage, //specifies the max row amount
                pageable: true, //needed to make grid pageable
                pagerrenderer: pagerrenderer, //overwrites the default page handler
                pagerheight: paging_height,
                virtualmode: true, //use server side handling
                rendergridrows: function (obj) { //needed for virtualmode - data coming from dataAdapter now
                    return dataAdapter.records;
                },
                rendered: function () {
                    scrollToLastSelectedRow();
                },
                columns: columns,
                columnsheight: options.containsMultiHeaderColumn ? 35 : 25,
                sortable: true,
                sorttogglestates: 1,
                showsortcolumnbackground: false,
                enablebrowserselection: false,
                verticalscrollbarstep: 60,
                showfilterrow: false,
                filterable: true,
                autoshowfiltericon: true,
                showfiltercolumnbackground: true,
                theme: 'falcana',
                rowsheight: rowsHeight,
                rowdetails: true
});

Dataadapter & initrowdetails:
//the dataAdapter that contains the grid data

        var dataAdapter = new $.jqx.dataAdapter(source, {
            loadError: function (xhr, status, error) {
                alert(error);
            }
        });

 //initializes nested grid - only entered if RowDetail set true
        //gridElement.id stored the id of the parentRow
        var initrowdetails = function (index, parentElement, gridElement, record) {

            if (!record || typeof(record) == 'undefined') {
                return;
            }

            var id = record.uid.toString();//die falcana-id des Datensatzes
            var nestedCont = $($(parentElement).children()[0]);

            var nestedData = xajax.request({xjxfun: "load_liste"}, {
                mode: "synchronous",
                parameters: [box_no, id, "get_nested_grid"]
            });

            createGrid(nestedCont, nestedData.columns, nestedData.datafields, nestedData.data, null, nestedData.options, paging, record.ID);
        }

[Mayrhofer_Participant]

The display problem in firefox seems to be a problem with the z-index of the nested grid beeing 299. When i change it to 3000 (using css !important) it is displayed correct again. Will use this as workaround at the moment.

[bjpetalParticipant]

Having this exact same problem using 5.6.0 – Seems to be related to:

jQWidgets v5.3.2 Release, September-21-2017
What’s Fixed:
– Fixed an issue in jqxGrid related to nested Grids z-index.

Using Firefox 58.02. Row Details in general are working, but not when they contain a grid.

Any fixes planned, or an official workaround?

[bjpetalParticipant]

Note – In firefox this is happening on all of my grids that have row details regardless if they contain nested grids.

It seems to be dependent on number of columns, and height of grid. See this example – Row details are obscured on rows 1, and 2.

http://jsfiddle.net/pyGV6/221/

I don’t want to arbitrarily set z-indez as jqxwindows will then be obscured(which was the issue prior to 5.3.2). The rowdetails div should get initialized with a dynamic z-index, based on parent row, instead of 299..

[timmcParticipant]

bjpetal, I was having this same issue where rowdetails wouldn’t show up in Firefox. I took out these 2 items in my jqxGrid:

autorowheight: true,
autoheight: true,

and now rowdetails show up.

[bjpetalParticipant]

timmc, sadly my grid doesn’t have either of those options enabled – I could see how it would especially happen with an autorowheight grid as well though, as the z indexes of each row seem to get higher and higher as more rows are actually displayed in the DOM.

My grid is just tall, and the row heights are small. There are probably 20 rows displayed at time.

Thanks,
Ben

[timmcParticipant]

Guess we need a fix on that then. I’d like to re-enable those 2 options. Using version 5.6.0 and seeing z-index/299 as well.

[bjpetalParticipant]

If you are not concerned with jqxWindows or other elements popping up over the row details, and possibly being on top, you can probably just set the z-index highish.

In your initrowdetails method:

var _initrowdetails = function (index, parentElement, gridElement, record) {

    $(parentElement).css("z-index", 1000);

I have other windows and grids that need to pop up, so I can’t reliably do that. Going with this for now, but it has to check the z-index of every cell in the grid, so could be slow on an autoheight, or large grid. Hopefully the devs will have a better solution here:

var _initrowdetails = function (index, parentElement, gridElement, record) {
	
		var index_highest = 0;   
		$(gridElement).find("div[role='gridcell']").each(function() {
		    // always use a radix when using parseInt
		    var index_current = parseInt($(this).css("zIndex"), 10);
		    if(index_current > index_highest) {
		        index_highest = index_current;
		    }
		});

		$(parentElement).css("z-index", index_highest + 5);

[Author]

Posts