How to programmatically hide/show the right panel (editor/details) in UserManager so the grid expands to full width?

Webix JS
1

I’m evaluating the UserManager widget (trial version) and trying to implement a close button that hides the right panel (the details/editor view) so the grid expands to fill the available space - similar to how many master-detail layouts work.

What I’ve tried:

I located the cols layout that contains the grid and the right panel (webix_um_tableview), and called hide() on the right panel child view, followed by resize() on the parent layout. This successfully hides the panel and the grid expands - but on the next row click, the panel doesn’t reappear, because UserManager’s internal Jet router renders into it without calling show() on it first.

I also tried manipulating style.display directly on the DOM node and listening for onUrlChange on the widget to restore it, but this is unreliable and feels like the wrong approach.

What I’m looking for:

Is there a supported API - either a service method, an app event, or a configuration option - that controls the visibility of the right panel in a way that cooperates with the internal Jet router? Something equivalent to “deselect / close panel” that the widget itself would use?

Any guidance appreciated. Thank you.

2

Hello @vordan ,

The problem you’re facing is that the UserManager widget uses a Jet-based router internally. When you manually hide the right panel , the Jet router still believes the details view is active. On the next row click the router simply re‑renders the new details view into the already hidden container without calling show() on it, so nothing appears.

The widget already contains an empty _hidden subview that is displayed when no item is selected. All you need to do is clear the current id parameter and switch to that empty subview.

To fix it you need to override:

  • users/details: adds a close button into its toolbar;
  • users (the main users module) where HideDetails() method resets the id parameter and shows the built‑in _hidden subview, then clears the grid selection;

Please check the example: Code Snippet

3

Thanks for the answer, Natalia.
Worked like a charm!