We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
|
<EjsMenu Items="@menuItems">
<MenuEvents ItemSelected="onSelect"></MenuEvents>
</EjsMenu>
<div id="target">
<EjsDialog @ref="DialogObj" Target="#target" Height="270px" Width="500px" ShowCloseIcon="true" @bind-Visible="@Visibility">
..//
</EjsDialog>
</div>
@code{
EjsDialog DialogObj;
public bool Visibility { get;set; } = false;
private List<MenuItem> menuItems = new List<MenuItem>{
new MenuItem
{
Text = "File",
Items = new List<MenuItem>
{
new MenuItem { Text= "Open" },
new MenuItem { Text= "Navigate", Url="counter" }, // Url property, for navigating to counter page.
}
},
..//
};
private void onSelect(MenuEventArgs args)
{
if (args.Item.Text == "Open") // To check the selected item text
DialogObj.Show(); // To open the modal dialog.
}
} |
|
@using Syncfusion.Blazor.Navigations
<div class="control-section">
<div class="menu-control">
<SfMenu TValue="MenuItem">
<MenuItems>
<MenuItem Text="File">
<MenuItems>
<MenuItem Text="Open"></MenuItem>
<MenuItem Text="Save"></MenuItem>
<MenuItem Separator="true"></MenuItem>
<MenuItem Text="Exit"></MenuItem>
</MenuItems>
</MenuItem>
<MenuItem Text="Edit">
<MenuItems>
<MenuItem Text="Cut" ></MenuItem>
<MenuItem Text="Copy" ></MenuItem>
<MenuItem Text="Paste"></MenuItem>
</MenuItems>
</MenuItem>
<MenuItem Text="View">
<MenuItems>
<MenuItem Text="Toolbars">
<MenuItems>
<MenuItem Text="Menu Bar"></MenuItem>
<MenuItem Text="Bookmarks Toolbar"></MenuItem>
<MenuItem Text="Customize"></MenuItem>
</MenuItems>
</MenuItem>
<MenuItem Text="Zoom">
<MenuItems>
<MenuItem Text="Zoom In"></MenuItem>
<MenuItem Text="Zoom Out"></MenuItem>
<MenuItem Text="Reset"></MenuItem>
</MenuItems>
</MenuItem>
<MenuItem Text="Full Screen"></MenuItem>
</MenuItems>
</MenuItem>
<MenuItem Text="Tools">
<MenuItems>
<MenuItem Text="Spelling & Grammar"></MenuItem>
<MenuItem Text="Customize"></MenuItem>
<MenuItem Separator="true"></MenuItem>
<MenuItem Text="Options"></MenuItem>
</MenuItems>
</MenuItem>
<MenuItem Text="Help"></MenuItem>
</MenuItems>
<MenuEvents ItemSelected="Select" TValue="MenuItem"></MenuEvents>
</SfMenu>
</div>
</div>
@code {
private void Select(MenuEventArgs<MenuItem> args)
{
// Your code here.
}
}
|
|
@using Syncfusion.Blazor.Navigations
<SfMenu CssClass="dock-menu"
Items="@menuItems"
Orientation="Orientation.Vertical"
ShowItemOnClick="true"
EnablePersistence="true"
TValue="DataModel">
<MenuEvents ItemSelected="Select"
</MenuEvents>
</SfMenu>
@code {
public bool SidebarToggle = false;
private void Select(MenuEventArgs<MenuItemModel> args)
{
//Your code here.
}
public class DataModel
{
public string Id { get; set; }
public string Text { get; set; }
public string IconCss { get; set; }
public string Url { get; set; }
public string ParentId { get; set; }
}
private List<DataModel> menuItems = new List<DataModel>();
protected override void OnInitialized()
{
base.OnInitialized();
menuItems.Add(new DataModel
{
Id = "01",
Text = "One",
IconCss = "fas fa-file-word"
});
menuItems.Add(new DataModel
{
Id = "0101",
Text = "Two",
IconCss = "fas fa-file-word",
Url = "admarticles",
ParentId = "01"
});
menuItems.Add(new DataModel
{
Id = "0102",
Text = "Three",
IconCss = "fas fa-plus-square",
Url = "admarticlesdetail/0",
ParentId = "01"
});
menuItems.Add(new DataModel
{
Id = "02",
Text = "Four",
IconCss = "fas fa-map-marker-alt"
});
}
}
|
