Remember last control state per user

Would it be possible save certain settings - out of convenience reasons - per user?
Like which tab in a tabs-container did the user leave open before he logged out?
So when the user logs back in the selected tab would already be the one which was used the last time.

This could be possible but isn't provided out of the box. You can for example handle the Change event of the tabs component and store the selected index somewhere (e.g. in sessionStorage). Then set the SelectedIndex of the Tabs to the persisted value.

I was about to prepare an example but a known limitation of the Tabs component made it overly complicated. We will simplify the example and post it here.

1 Like

Any update on that request?

Gosh, I forgot to upload the example! Here it is.persist-tab-selection.zip (5.5 KB)

It uses a page property set to sessionStorage.getItem('selectedIndex').


Then the tab Change event persists the current tab index:

You can use localStorage instead of sessionStorage to persist the selected tab index even after the user closes the browser.

1 Like

Thank you. Would that be possible with a Panel too? I mean, to preserve the collapse-state of it, as far as I can see it there is only an allowcollapse property which does not seem to fit for that reason.

Indeed we need to expose a property that will allow you to set the collapse state of the panel.

The last update lets me bind the set property to the newly exposed Collapsed-Property.
Getting and setting works fine. But the rendering produces similar results as the panel-issues which were fixed in the last release also ( Collapsed Panel seems to block elements below it )
Expanding and collapsing the panel by hand lets everything look normal again.

Here's an example:
panelBug.zip (2.0 KB)

The problem occurs because the setItem method doesn't return a value - the collapsedState property is always set to undefined as a result.

Also getItem returns a string and needs a conversion to a boolean. Find attached the fixed page.test.json.zip (1.1 KB)

1 Like

That solved the issue, thank you.

I still do not get why delivering undefined to the property ends in rendering mayhem, but that's another thing.
Here's an example (ignore the colored shards, these were created in paint.net )
Onload:


After collapse & expand by hand:

It is probably related to the other issue which was caused by the way the PrimeNG panel hides its children. Cannot tell for sure. When using strict comparison in JavaScript undefined is not equal to false or true which the collapsed property expects. Hence it may have stayed in some broken state.

1 Like

What property would need to be exposed (or is already) if I would like to preserve the state of the PanelMenu in the Main-Layout?

The PanelMenu is supposed to open automatically to the item that represents the current URL.

Then it would be consistent to not open it when the navigated-to item is not in the panel? :stuck_out_tongue_winking_eye:

I assume it is meant to act like a TOC which can be retracted on demand. But I would like to use it like a navigation-element, which gets out of the users way as soon as it used, you know, like the burgermenu of bootstrap.

I have an usecase in which a usergroup of mine stays at one Panelitem and never needs any others.
They start out with a searchpage and navigate from there to a big overview per selected entry.
These overviewpages will never show up in my Panelmenu because there are thousands of these to-be-searched-items.

What would be an easy workaround to get that panel out of their way? I mean I could totally hide the whole thing per usergroup (since I build a breadcrumbbar as some sort of second navigation) ... but I think this is a bit brutal.

You should probably create a new layout which doesn't have the sidebar navigation. Those pages can use that layout instead of the "Main" one.