I have a data grid, shown in the screenshot, I only want one rendered menu open and all others closed.
For the screen shot, first, I click the three dots on the right of second row, then the rendered menu shows up; second, I click on the three dots on the right of the third row, I hope that the rendered menu in the third row open and shows up, as well as the rendered menu in the second row closes and disappear.
how can I achieve this, or do you have example to do this.
Thank you!
John
Hi @jzhu,
We are not sure what components are being used in this screenshot. You have to provide some code.
In general we don't recommend to use RadzenMenu for anything else but navigation purposes. Use RadzenSplitButton for actions.
Hi Korchev, please see following of codes: thank you!
we have four files: MainFleetView.razor, MainFleetView.razor.cs, SubFleetViewKebab.razor, and SubViewKebab.razor.cs
general flow is: (1) RenderKebabMenu(Kebabmenu) in MainFleetView.razor call function "public RenderFragment RenderKebabMenu(){} to implement the last column of the datagrid with three dots(icon name is :Linerr-scale" in SubFleetViewKebab.razor),
(2) in RenderKebabMenu() function, it uses EventCallback<> to connect functions between SubViewKebab.razor.cs and MainFleetView.razor.cs.
(3) when three dots icon is clicked, KebabIconClicked() is called where three dots asscoiaed renderFragement is set to visiable, await OnIconClicked.InvokeAsync(this) invoke function OnKebabIconClick in MainFleetView.razor.cs.
following the main codes that are used:
MainFleetView.razor and MainFleetView.razor.cs implement the datagrid:
--------------following codes implement the last column with three dots of the datagrid in MainFleetView.razor ----------------------
<RadzenDataGridColumn TItem="KeyValuePair<string, Dictionary<string, WMDS.CORE.Support.Models.Configuration.BaseCar>>" Context="Kebabmenu" FilterValue="@baseCar" Property="Location" Reorderable="false" Resizable="false" Sortable="false" TextAlign="TextAlign.Center" Width="50px">
<Template Context="Kebabmenu">
@* Call the function that renders the kebab menu *@
@RenderKebabMenu(Kebabmenu)
</Template>
</RadzenDataGridColumn>
---------------RenderKebabMenu(Kebabmenu) associated function in MainFleetView.razor.cs
public RenderFragment RenderKebabMenu(KeyValuePair<string, Dictionary<string, BaseCar>> data) => builder =>
{
// Render a new FleetViewKebab component
builder.OpenComponent(0);
builder.AddAttribute(1, "KebabOptions", KebabMenuList);
builder.AddAttribute(2, "OnKebabOptionChanged", EventCallback.Factory.Create(this, OnChange));
builder.AddAttribute(3, "OnIconClickedReset", EventCallback.Factory.Create<FleetViewKebabComponent>(this, OnKebabIconClickReset));
builder.AddAttribute(4, "OnIconClicked", EventCallback.Factory.Create<FleetViewKebabComponent>(this, OnKebabIconClick));
builder.CloseComponent();
};
SubFleetViewKebab.razor, and SubViewKebab.razor.cs implement the expansion of the three dots after click the three dots
-----------SubFleetViewKebab.razor for the expansion fragment --------------------------------------
@page "/fleet-view-kebab"
@layout FwWmdsLayout
@inherits Wmds.Pages.FleetViewKebabComponent
@using Radzen
@using Radzen.Blazor
@using Wmds.Models.Wmdsui
@inject Microsoft.Extensions.Localization.IStringLocalizer L
-------------SubViewKebab.razor.cs---------------------------------------
using System.Collections.Generic;
using System.Threading.Tasks;
using Radzen;
using Radzen.Blazor;
using Microsoft.AspNetCore.Components;
using WMDS.CORE.Support.Models.Configuration;
using Wmds.Client.Pages;
using System.ComponentModel;
namespace Wmds.Pages
{
public partial class FleetViewKebabComponent
{
#region Received Parameters
[Parameter]
public IEnumerable KebabOptions { get; set; }
[Parameter]
public EventCallback OnKebabOptionChanged { get; set; }
[Parameter]
public EventCallback OnIconClicked { get; set; }
public EventCallback<FleetViewKebabComponent> OnIconClickedReset { get; set; }
#endregion
#region Class Variables
protected IEnumerable<string> kebabDisplayOptions;
public bool isKebabMenuVisible = false;
public string clickedMenuItem = null;
#endregion
/// <summary>
/// Initializes the new Fleet View kebab menu component
/// </summary>
protected async System.Threading.Tasks.Task Initialize()
{
if (KebabOptions != null)
{
kebabDisplayOptions = KebabOptions;
}
}
/// <summary>
/// This function handles the call back to the Fleet View parent component when a new selection on the kebab menu is made.
/// </summary>
/// <param name="args">the event arguments</param>
/// <returns>object, event args in a generic form</returns>
public async Task KebabOptionChanged(object args)
{
await OnKebabOptionChanged.InvokeAsync(args);
}
/// <summary>
/// This function handles making the kebab menu visible and informs the Fleet View parent component when that occurs.
/// </summary>
/// <returns>FleetViewKebabComponent, itself to indicate it is the triggering component</returns>
public async Task KebabIconClicked()
//public void KebabIconClicked()
{
isKebabMenuVisible = !isKebabMenuVisible;
await OnIconClicked.InvokeAsync(this);
}
}
}
It seems you are not using the menu component but a custom one which uses RadzenListBox (??). I am afraid we can't help with that as RadzenListBox is not meant to be a menu component.
I still recommend usingRadzenSplitButton which hides automatically when another one is clicked.
