Hello,
I've been trying to use the igPopover inside an igGrid and got some starting points on this thread:
https://www.infragistics.com/community/forums/f/ignite-ui-for-javascript/119631/iggrid-row-menu-clipped-by-grid/530802#530802
The problem I am currently having seems to be an interaction between some of the popver properties and the grid selection event. If I try initializing the popover inside rowSelectionChanging, all seems fine, until I try and set one of showOn, maxHeight or maxWidth. Once these are set, the row selection seems to stop working (the first selected row remains selected). While Debugging, I see the rowSelectionChanging event being triggered, and the popover works, but the actual row selection does not update.
Although in the original example, the popover is initialized inside "rendered" this does not work in the original application (which I can't reproduce in the test app), and I would like to know if using rowSelectionChanging as the init point is possible, without affecting the actual interaction with the selection.
I've attached a sample app showing the above described behavior. Any help getting this to work would be much appreciated.
popOverInGridSelection.rar
Hello Alaxandru,
I would have also recommend the usage of rendered event. Not sure why you are having troubles with it in the original app. But rowSelectionChanging is triggered every time a row is selected and you are re-applying the options to those popovers every time a row is selected. In general you don't want to do this.
The reason for the issue is that showOn option cannot be changed after initializing igPopover. So you could check if the popovers were initialized already and avoid setting the same options:
if (!$('.material-icons.popr').data('igPopover')) {
…
}
But still rendered event is the correct approach in my opinion, because it would be triggered only once at the beginning, while rowSelectionChanging would be triggered every time a row is selected.
4456.popOverInGridSelection_mod.zip
Hi Deyan,
The reason why I was trying to use rowSelectionChanging is because the actual content of the popover should, in my case, be dependent on some information from the row itself.
If I use the rendered option, then the popup will not be able to contain different content decided be the row information. Do you see any way around this limitation?
If you are going to set new popover configuration on each row selection and there are options that can be set only on initialization, you'll have to destroy and create the popover:
ui.row.element.find(".material-icons.popr").igPopover("destroy");
ui.row.element.find(".material-icons.popr").igPopover({
contentTemplate: $('#popupTemplate').html(),
// uncomment me!
showOn: "click",
//maxHeight:"400px",
//maxWidth:"300px",
closeOnBlur: true,
animationDuration: 0
});
Here's the modified sample, please review it and let me know if this works for you.
1643.popOverInGridSelection_mod1.zip