I have noticed that the Done/Cancel buttons are obscured (by the parent) in a child-level grid that has only one row.
The fact that the child grid has only one row results in a restricted available vertical display area, thus the buttons become obscured.
Is there a way to display the buttons to the right of the child row?
Is there a way to force the z-index of the button container to be higher than that of the parent row?
Is there a way to add padding to the top or bottom of the child grid container?
What other options are there?
Thanks for any help.
Hello,
You can work around this behavior in one of two ways. The best approach would be to make use of the row edit template which will move the row editing in to a dialog window that floats over the rest of the grid. This allows you to continue to use editing without much manipulation to how the grid renders by default.
The other approach you can take is to override some of the styling in the grid. The reason that this is occurring is that the child grid's container element has a style that sets its overflow to hidden. When the buttons are added to the container's content when entering edit mode the get added to the end of the container and are cut off by the end of that container. To get around this, you can add the following style:
<style type="text/css"> .ui-iggrid-childarea { overflow: visible !important; }</style>
Please note that this could have other styling issues, but should most likely resolve the issue if you don't want to use the dialog.
In the meantime, I have asked our engineering staff to examine this further. I have logged this behavior in our internal tracking system with a Development ID of 184953. I am creating a private case on your behalf which you can use to track the status of this development issue. Please let me know if you have any further questions or concerns about this matter.
I have heard back from the development team on this and it appears that this is a limitation of the grid. The best way to work around this limitation is to modify the CSS. You can either take the approach that I have mentioned previously or you can modify the style in the Infragistics.ui.grid.css file:
.ui-iggrid table th, .ui-iggrid table td { overflow:hidden; text-overflow: ellipsis; vertical-align:middle;}
You would want to change overflow in this style to auto.