Forums Home / Wijmo / General Discussion
Posted by: holly.anderson on 19 October 2017, 2:55 pm EST
holly.anderson
Posted 19 October 2017, 2:55 pm EST
Hello,
I have a application where I open a FlexSheet in a modal window. When I open the filter editor on a column, the editor appears behind the modal. I tried to find an event that fires when the filter editor is opened so that I could modify the z-index, but I didn’t come across anything helpful. Any suggestions would be appreciated.
Thanks,
Holly
holly.anderson
Posted 20 October 2017, 8:27 am EST
I’m having the same problem with Tooltips on the FlexSheet. My first thought was to use the popup event to set the z-index on the tooltip, but I don’t know how to get the tooltip element from an instance of the Tooltip class. Alternatively, is there some way to let the z-index on these elements be based on the z-index of the FlexSheet? I’ve noticed that the z-index always seems to be 1500 on the tooltip and filter editor elements, regardless of the z-index of the FlexSheet.
manish.gupta
Posted 23 October 2017, 7:03 am EST
Hi Holly,
Sorry for the late reply.
Could you please let us know the Modal you are using Bootstrap/Wijmo Popup/Jquery Modal also the build version you are using?
~Manish
holly.anderson
Posted 23 October 2017, 8:00 am EST
I’m using Wijmo build 5.20172.334. For the modal, I’m using Kendo UI’s window control (http://demos.telerik.com/kendo-ui/window/index). I can try using a different control if you think it will help.
manish.gupta
Posted 24 October 2017, 5:59 am EST
Hi Holly,
The filter dialog is visible correctly for Bootstrap modal. Please refer to the attached sample for the same.
~Manish
holly.anderson
Posted 24 October 2017, 8:38 am EST
Hi Manish,
Thank you for your response, but I’d rather not use the Bootstrap modal if possible.
When I said I’d try another modal control, what I meant was that I’d use a different control if doing so meant that the z-index on the filter editors/tooltips would be set properly. For example, I thought it might work better with Wijmo’s popup control. I should have explained that better in my previous post.
Looking at the sample you provided, it seems like the only reason it works is because the z-index on the modal is 1050, which is less than the z-index on the filter editor (1500). I’m curious how the z-index on the filter editor/tooltip is set, why it defaults to 1500, and if there is a way to change it. Please advise if there is a way to either (1) have the z-index on these elements be set relative to the FlexSheet or (2) modify the z-index of the elements when they are opened/shown.
Thanks,
Holly
manish.gupta
Posted 25 October 2017, 7:12 am EST
HI Holly,
You can use Wijmo Popup for the same. Wijmo popup zIndex is set to 1500. zIndex is set to Tooltip/Popup and filter dialog using the style for the element.
In case you would like to change zIndex for Tooltip and filter dialog, you need to set zIndex for corresponding class for the control.
For tooltip: wj-tooltip
For Filter dialog : wj-dropdown-panel
~Manish
holly.anderson
Posted 25 October 2017, 8:09 am EST
Is there a way to change the z-index on the filter editor or tooltip dynamically (i.e. when they’re opened/shown)? This would be preferable because I wouldn’t have to make assumptions about the z-index of the modal. As per my original post, I tried to find an event that fires when the filter editor is opened so that I could modify the z-index, but I didn’t come across anything helpful. With tooltips, my first thought was to use the popup event to set the z-index on the tooltip, but I don’t know how to get the tooltip element from an instance of the Tooltip class.
manish.gupta
Posted 26 October 2017, 7:35 am EST
Hi Holly,
You need to handle filterChanging event for FlexGridFilter and popup event for Tooltip. You need to retrieve the DOM content for the element within setTimeout.
Please find the following code snippet for the same:
Tooltip: document.querySelector(“div.wj-tooltip”)
Filter: document.querySelector(“div.wj-columnfiltereditor”)
~Manish
holly.anderson
Posted 26 October 2017, 8:21 am EST
Hi Manish,
I didn’t want to rely on getting the elements by class because there may be an (admittedly unlikely) situation where there are multiple tooltips visible. But if there’s no way to get the tooltip and filter editor elements directly from instances of the Tooltip and FlexGridFilter classes, then I guess that’s what I’ll have to do.
Unfortunately, I’m having trouble setting the z-index directly on the filter editor because the wj-dropdown-panel class sets the z-index using “!important”, but I’ll keep working on it.
Thanks,
Holly
manish.gupta
Posted 27 October 2017, 8:11 am EST
Hi Holly,
You can assign high value for mentioned class e.g. 500000.
However, we have forwarded this issue to the concerned team for further investigation with tracking id #294090.
We will let you know as soon as we get any update on this.
~Manish
manish.gupta
Posted 31 October 2017, 5:54 am EST
Hi Holly,
You can remove !important for wj-dropdown-panel from wijmo.min.css /wijmo.css file. This has been fixed for next release.
For multiple instances, could you please share a sample depicting the issue since FlexGridFilter dialog close once you click outside dialog.
~Manish
holly.anderson
Posted 2 November 2017, 9:30 am EST
Hi Manish,
Thanks for the update. I don’t have a specific case with multiple instances, but I was thinking about tooltips more than the grid filters. I know it’s an unlikely scenario, I just don’t like relying on class names when there’s a possibility of multiple elements. But it would probably be OK here 99% of the time.
Holly
manish.gupta
Posted 3 November 2017, 2:27 am EST
Hi Holly,
Thanks for notification.
We tried to create sample with more than one tooltip on the page and found even if I create two tooltip instance and try to show both, the only one tooltip gets displayed in the page.
~Manish
