Expanding detail row

[jplevene]

Firstly, the rowExpand event is missing, so I have had to resort to using beforeRowExpand with a timeout.

Please see the attached images.  My first two columns are frozen, being the icon column and the "Name" column.  When the row expands, all the blank space in the fixed columns is wasted, and I want to get the green box to use it.  Is this possible and how?

The only way I thought was to make the div.pq-table-left and its div.pq-grid-row children have no background.  The only issue is the "border-right" that has been left behind (second screen shot).

P.S. If you are wondering, I have a script in the scroll and beforeRowExpand event that positions the green box so that it is always in that position and the correct width

[paramvir]

The detail row is designed to appear only in the scrolling (unfrozen) pane, and currently there’s no option to display it in both the frozen and unfrozen panes simultaneously..

As per your workaround, you can try set border-right:none of pq-cont-left to hide the frozen pane border.

[jplevene]

How would you suggest changing the background like I suggested?  Would you suggest doing it in rowInit, render, columnPostRender, etc?

Also please could I add a feature request for a setting in "detailModel" for "useFrozenColumns" as it is just wasted space.  This option would just make the blank space transparent and remove the vertical line and replace it with a shorter one.  Also mouse events ignore so the transparent area can be clicked through.

[paramvir]

I wouldn’t recommend implementing it that way.

Making it transparent would cause the right-side cells to show through behind the left pane during scrolling. Also, using pointer-events: none would interfere with selections in the main grid.

[jplevene]

How would you suggest I do it?

As you can see I made it transparent and it seemed fine.  I remeber the previous bug but there are three backgrounds as I added an extra one to the second frozen row.  I'm suggesting just making the standard 2 transparent, ad column 2 as you can see is wider than the other columns, so the narrow columns will never reach behind the icon column, but even if it does, I can just give it another background.

[paramvir]

Thanks for your query.

I’ve added notes and updated the example with the solution here:
https://paramquery.com/pro/demos/nesting

The solution involves adjusting the padding of the detail row so it spans both the frozen and scrolling panes, and updating its stacking order (z-index) via CSS to ensure it displays correctly across both sections.

[jplevene]

Thanks, really helped and far better than my idea.

Would be really nice as a feature. 

For others, I did it programatically so that it only affected one grid with an id of "my_grid" and not all of them:

Code: [Select]

// Override the prototype using a standard function but only for the availability grid
const pq_grid_defaultGetPadding = $.paramquery.cHierarchy.prototype.getPadding;
$.paramquery.cHierarchy.prototype.getPadding = function() {
// In pqGrid modules, 'this.that.element' holds the jQuery object of the grid
const gridId = this.that && this.that.element ? this.that.element.attr('id') : null;
if(gridId === 'my_grid')
return { paddingLeft: 25 };
else
return pq_grid_defaultGetPadding ? pq_grid_defaultGetPadding.apply(this, arguments) : { paddingLeft: 0 };
};
const styleTag = document.createElement('style');
styleTag.textContent = `
#hh_availability_grid .pq-detail {
z-index: 90 !important; /* Optional: add !important if another stylesheet is overriding it */
background: #fff;
}
#hh_availability_grid .pq-cont-right {
z-index: unset;
}
`;
document.head.appendChild(styleTag);