Since I'm having limited screen estate I'd like to show / hide some html content depends on pane state, expanded vs usual placement within the dock manager. To be specific I'd like to expose Export to Excel button when pane is expanded and hide it when the pane is 'minimized', see:
Is that possible
Hi,
I understand your concern and indeed this would be a better approach. Most straightforward, in fact would be to have a maximize/minimize event exposed by the dock manager, however, at the time of writing this I am afraid this is not the case. There is a feature request logged about this in the dock manager GitHub repo though, so my suggestion would be to comment on it and provide more details about the context in which these events would be used and why it is needed as well as anything that would prevent you from accomplishing this today.
This will give you the opportunity to directly communicate with our development team regarding the issue and get notifications whenever new information is available by subscribing to the issue.
As a workaround with the current implementation, I can still suggest handling the mousedown event of the dock manager – a single handler will be needed, regardless of the number of panes/buttons you would like to show/hide. In it however, one could check for whether the composed path of the event includes either the pane/tab maximize/minimize buttons, so that the layout is refreshed only then. I have modified the previous sample to demonstrate this. Optionally, the currently maximized pane could also be retireved in order to update, for example, a map of which pane's current "export" button should be shown.
Please, check the modified sample out and let me know if you have any questions.
Best regards, Bozhidara Pachilova
Hi Bozhidara, Thanks a lot for your speedy and insightful answer, much appreciated.I think your solution is a step in right direction but since I have exporter buttons in 6 panes and each exporter is wrapped in it's own component leveraging 'mousedown' event is bit ... noisy/clunky. What I was hoping for instruction to capture maximize click event on each of my pane and then propagate this event further down stream.
I'd rather attach event listener on both maximaze and minimize buttons on each pane which would help me determine the context and react properly.Something like:
document.querySelectorAll('.igx-maximize-button').forEach(button => { //...event handler here });
Hope you understand my point of view.Thanks again.
Thank you for posting to Infragistics Community!
Sure, I can suggest adding a getter that returns whether the target pane is maximized and use it along with the *ngIf directive to conditionally display elements. The IgcContentPane conveniently has such an "isMaximized" property – please refer to the API here.
For your convenience, I created this sample demonstrating a possible approach. Please, check it out and feel free to further modify it so that it best fits your application requirements.
Additionally, I noticed a minor caveat around the changes not getting immediately reflected until subsequent clicks over the component, so you will notice there is a ‘mousedown’ event listener added to the dock manager in whose handler the layout of the dock manager is refreshed.
Lastly, the sample shows this for a regular button, nevertheless, the same could be applied to the `igx-grid-toolbar-exporter` element.
If you require any further assistance on the matter, please, let me know.
Best regards, Bozhidara Pachilova Associate Software Developer