I am using react material-ui v4.9 in my project and have multiple ExpantionPanels.
I would like to define a ref for each and have a top level button on my page to let use user Expand All and Collapse All via one click. On that click event, I would like to use the refs for each panel and either collapse or expand them all.
Is that something that is possible?
I see that the panel has an expanded property that maybe I could set to true or false, but I think that will get out of sync if the user expand or collapses some panels. Also, some panels have the defaultExpanded property turned on as well.
Related
I'm using the material ui accordion component and I couldn't find a way to stop the panel from collapsing when clicked. My goal is to open and close the panel only by clicking the icon in the accordionsummery component. I found many ways to stop collapsing by click a checkbox for example, but not what I'm looking for.
With default Material-UI package ;
"No" way
Because, on AccordionSummary there is a context mechanism which watches if that Accordion is expanded and produces isExpanded as a value. You need to manipulate core package code the way you wanted, which is a long haul.
Btw, adding onClick function to ExpandMoreIcon gives infinite loop because of that context.
You can go with Additional actions version of Material-UI accordion and hide the checkbox as only viewing the data.
I have a situation, where I need to get the panel key when I click on extra icon (present beside expand arrow/collapse arrow) for the requirement posted below.
When I click on icon, I should remove that panel and add it to the right and vice-versa. To do that, I need to get panel key which I get when Panel is not in active state in onChange callback function, but don't get the same when the panel is active.
How do I do this? Please let me know
In the specific case wanted by #anup-r (modifying an antd sample) it is necessary to pass to the genExtra function the key of the panel
See updated sample
I have one Form with four dockPanels
dock_1
dock_2
dock_3
dock_4
I want to focus on specific dockPanel by changing theirs 'tabIndex'. For dockPanel which should be focused I set tabIndex on 0, rest of dockPanels' indexes I increase.
I need control it inside method to be able trigger changes when I need it. I can set it inside constructor and during form first initialization focus can be set correct but it's not what I need.
The problem is that I can't force realod focus on form so when I change tabIndexes nothing happened.
Do you know how to trigger:
System.Windows.Forms.dll!System.Windows.Forms.ContainerControl.UpdateFocusedControl()
It should reload focus inside the form but I'm not able to trigger it.
I tried solutions similar to: myForm.Select() but without any results.
Thanks
The TabIndex property is not applicable for dock panels.
Use the DockManager.ActivePanel property to get or set the currently active dock panel:
dockManager1.ActivePanel = dockPanel1;
The active dock panel is the one that has focus or contains a control that has focus.
When the active dock panel is changed the DockManager.ActivePanelChanged event is fired.
I want to display a component as emptyText for a grid, the ExtJS documentation states that only HTML can be shown.
For example a button that pop-ups a create window, as shown below:
Is there a workaround to use a component in a grid, or perhaps even a config that I'm missing?
Of course you can do that, just that you will have to debug a lot in order to see how to do that. That's why I have an alternative: add a hidden docked toolbar with your "Create new employee" button. Then add an listener for the load store event, and when no records are available, simply show the toolbar, otherwise hide the toolbar.
I've created accordion like this:
layout:'accordion',
layoutConfig:{
animate:true
}
then i add elements by add() method, then re-render it with doLayout() and set the activeItem:
navigation_panel.getComponent(1).expand(false);
i call expand() method with false parameter, but it still animates the transition, so it takes setting from main layout and ignore that i sent to expand(). How to solve this problem?
Two things happen when you expand an item in an according panel:
1. The old active item is collapsed
2. The new active item is expanded
The collapsing of the old active item is handled by the accordion layout and occurs during the "beforeexpand" event. Looking at the source code, I see that the accordion layout calls
var ai = this.activeItem;
ai.collapse(this.animate)
So, the animation of the collapse of the old active item is completely determined by the "animate" property of the accordion layout. The animation flag you pass in is ignored for these purposes. I'm guessing that if you look closely, you'll see your collapse is animated while the expand is not.
Because the animate flag is passed through explicitly, I don't see any standard, supported way to override this behavior for a single operation.
In 3.0+, you may call the documented method getLayout() before or after render to get a reference a Container's layout object. You could simply set the layout object's animate property to false while manipulating the panel, then set it back when your done. This is not documented to work but probably will based on the source.