Hi, I just want to render the menu fully expanded without the possibility to expande/collapse,
just something like this:
is it possible ?
Thanks to support
Hi, I just want to render the menu fully expanded without the possibility to expande/collapse,
just something like this:
is it possible ?
Thanks to support
You can hardcode Expanded=true for RadzenPanelMenuItem:
and hide the expand/collapse icon:
.rz-navigation-item-icon-children {
display: none;
}
You're proposal is only cosmetic, because even a hardcoded Expanded = true
lets the user collapse the menu by clicking on the label. When this happens the internal expanded
field is also not synced to the Expanded
parameter.
The following derivative of RadzenPanelMenuItem has a AllowToggle
parameter, that when set to false
prevents collapsing/expanding by user when clicking on the menu's label.
However @bind-Expanded
cannot be used anymore, because otherwise my own callback will be overridden and has no effect.
public class MyPanelMenuItem : RadzenPanelMenuItem
{
private bool allowToggle = true;
[Parameter]
public bool AllowToggle
{
get => this.allowToggle;
set
{
if (this.allowToggle == value)
{
return;
}
this.allowToggle = value;
// this callback will be overriden when @bind-Expanded is used
this.ExpandedChanged = this.allowToggle
? default
: new EventCallback<bool>(this, this.OnExpandedChanged);
}
}
private async void OnExpandedChanged(bool expanded)
{
if (!this.AllowToggle)
{
// sync actual state with 'Expanded' parameter
await this.SetParametersAsync(
ParameterView.FromDictionary(
new Dictionary<string, object?> { { nameof(Expanded), expanded } }));
// reset 'Expanded' parameter as toggling is not allowed
await this.SetParametersAsync(
ParameterView.FromDictionary(
new Dictionary<string, object?> { { nameof(Expanded), !expanded } }));
}
}
}