[bjpetalParticipant]

Here’s a simpler example… If the jqxWindow is initialized (autoOpen:false) before the grid, this issue will be present. This seems to be because the grid is being initialized on a hidden element(jqxWindow hides the div when it initializes).

http://jsfiddle.net/dRbAE/609/

[bjpetalParticipant]

Aha you’re right – sorry about that. After reviewing my code some more, it looks like I am probably getting this error because I am initializing the grid in a hidden div – I guess that’s not ok to do?

http://jsfiddle.net/dRbAE/608/

[bjpetalParticipant]

Stanislav – emailed you with full example.

Thanks!

[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);

[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

[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..

[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]

Hristo that is extremely helpful – I did not realize I was just referencing the object instead of copying it. Sadly I have to support IE11 so cannot use the Object.assign() method, but I will find another way to do that. I also like the other changes you have made and a better way to initialize the inputs.

Thank you very much for your help!

[bjpetalParticipant]

Does anyone else have any idea what the problem might be? Or maybe a suggestion about a more elegant solution for rowdetail based forms?

[bjpetalParticipant]

Hi Hristo – I am already adding the data from the input into the extradata datafield on a row collapse event. This is working fine until I try to duplicate a row, at which time the row detail inputs become linked somehow, and I can no longer update them independently. I did set the editmode to selectedcell, but didn’t really see a change there.

Thanks,

[bjpetalParticipant]

Stanislav – thank you for getting back to me. Your answer is kind of what I expected, but I had to ask. I cannot create thousands of DOM elements, and paging just does not work for my case. It seems like it woulnd’t be to hard to implement – I have cobbled it together somewhat from the cellrenderer callback, or tying into the scroll event. It is just the x/y positions of the rows get messed up in the grid – so hovers, and selections are no longer accurate. I haven’t come up with a solution by combing through the source, so I’m going to concede there isn’t a solution there.

Anyways – based on the prior posts I have seen, I think there would be definite value in implementing this in the future. If not automatic row heights, a way to set row size manually on a row by row basis.

Thank you,
Ben

[bjpetalParticipant]

Thanks – also wanted to mention something else. As a workaround, I am for now just populating a local array via a=manual ajax call, and using that as for the data source so I can make sure it only fires the actual GET request once. I noticed though, that the editor.jqxDropDownList bindingComplete callback is also invoked 3 times, which is annoying.

Also in my application everything repeats 5 times, not 3. No idea why.

[bjpetalParticipant]

Hristo – thanks for getting back to me.

It is true that the example is working, but it is submitting 3 GET requests to retrieve the data. The createeditor callback is only called the one time correctly, but for some reason 3 AJAX GET requests are generated.

This example is bringing back a small dataset, so it is a non-issue and not really noticeable. In my real-world application, the dataset retrieved is much larger, and takes time to retrieve once, much less two more un-needed times. See image attachment for example of this.

[bjpetalParticipant]

Figured it out – You have to apply the filter by the description/name, and on the description/name column. Not by the numeric ID. Both issues resolved.

https://jsfiddle.net/UbK74/1387/

Thanks!

[bjpetalParticipant]

Ok, thank you – I will put that one on my “I will live with that” list.

[Author]

Posts