As of right now, the TelerikMenu generates a menu where each menu item is a span with an onclick handler that navigates to the page. It looks like this:
<li data-id="..." tabindex="0" class="k-item k-menu-item k-first" role="menuitem" aria-live="polite">
<span class="k-link k-menu-link ">
<span class="k-menu-link-text">
Page Title
</span>
</span>
</li>
However, because they are only spans, when right clicking on a menu item, there is no option to open the link in a new tab. In addition, middle clicking the menu item doesn't work either. Can these be changed to anchor tags so menu items can be opened in a new tab? I know there is an ItemContext that can be added to the TelerikMenu, but I would like to keep all the styling of the default TelerikMenu.
Hello Everyone,
I'm working on a Blazor Server project, and I've replaced the default navigation menu with a TelerikMenu component. It produces this:
When I click the Counter, Weather, etc, I get to the correct page. Here's how my project is layed out:
You can see that the Home.razor page is in the same location as the Weather and Counter page. I'm also able to get to the pages under the DisplayData folder. Here's the code:
<div>
<img src="picture.png" style="height: 300px; margin-right: 10px;">
</div>
<TelerikMenu Data="@MenuData"
Orientation=@MenuOrientation.Vertical></TelerikMenu>
@code{
public List<MenuItem> MenuData { get; set; }
public class MenuItem
{
public string Text { get; set; }
public string Url { get; set; }
public ISvgIcon Icon { get; set; }
public List<MenuItem> Items { get; set; }
}
protected override void OnInitialized()
{
GenerateMenuData();
}
public void GenerateMenuData()
{
MenuData = new List<MenuItem>()
{
new MenuItem()
{
Text = "Home",
Url = "Home",
Icon = SvgIcon.Home
},
new MenuItem()
{
Text = "Counter",
Url = "Counter",
Icon = SvgIcon.Calculator
},
new MenuItem()
{
Text = "Weather",
Url = "Weather",
Icon = SvgIcon.Globe
},
new MenuItem()
{
Text = "Display Data",
Url = "",
Icon = SvgIcon.Data,
Items = new List<MenuItem>()
{
new MenuItem()
{
Text = "Delme Table",
Url = "/DelMeTable",
Icon = SvgIcon.Data // SvgIcon.User
},
new MenuItem()
{
Text = "Delme Telerik",
Url = "/DelmeTelerikTable",
Icon = SvgIcon.Data
},
new MenuItem()
{
Text = "Delme Telerik SQL",
Url = "/DelmeTelerikTableSQL",
Icon = SvgIcon.Data
}
}
}
};//end of MenuData
}//end of GenerateMenuData()
//
}
When I try to get back to the Home page, I get a "Not Found" error. Also of note, when the application launches to the Home page, here is the URL (from the debugger): localhost:7044.
My question is, how do I set the URL for the home page to get back to it?
Thanks,
Mike
Hi
I'm using the TelerikMenu component with multiple nested levels of menu items. When moving the cursor from inside a nested level, to a parent level that is not in the currently selected path, the menu disappears.
View this example on REPL: https://blazorrepl.telerik.com/mIvFOglY481u2hRG05
When moving the cursor from "Item A1 - 1" to "Item A2", the menu disappears.
Because I have a large menu with multiple levels, it would improve user experience to keep the menu visible as long as the cursor hovers it. Is there any way to make this happen?
Best regards
Bram
hi
I want to create a session after the user clicks on the button and display this user's information such as UserName or UserID in a section of the MainLayout
In the MainLayout page, the currentUser_Id parameter value received from the session is displayed correctly in the paragraph, but this value is not passed to the paragraph inside the section.
In fact, I want to show the value of User _id which is created in the login page and in the session in a part of the page app .razor or mainLayout .razor as user information.
please help me
LoginPage.razor:
@page "/"
@using BlazorSessionApp.Layout
@layout LoginLayout
@inject NavigationManager NavigationManager
@inject ProtectedSessionStorage ProtectedSessionStore
<button class="btn btn-primary" @onclick="Submit">Enter</button>
@code
{
private async Task Submit()
{
await ProtectedSessionStore.SetAsync("User_Id", 500);
NavigationManager.NavigateTo("/Home", true);
}
}
App.razor :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<base href="/" />
<link rel="stylesheet" href="bootstrap/bootstrap.min.css" />
<link rel="stylesheet" href="app.css" />
<link rel="stylesheet" href="BlazorSessionApp.styles.css" />
<link rel="icon" type="image/png" href="favicon.png" />
<HeadOutlet @rendermode="InteractiveServer" />
</head>
<body>
<SectionOutlet SectionName="mysection" />
<Routes @rendermode="InteractiveServer" />
<script src="_framework/blazor.web.js"></script>
</body>
</html>
MainLayou.razor :
@inherits LayoutComponentBase
@inject ProtectedSessionStorage ProtectedSessionStore
<p>OutOf Section:@currentUser_Id</p>
<SectionContent SectionName="mysection">
<p>into My Section:@currentUser_Id</p>
</SectionContent>
<div class="page">
<div class="sidebar">
<NavMenu />
</div>
<main>
<div class="top-row px-4">
<a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a>
</div>
<article class="content px-4">
@Body
</article>
</main>
</div>
@code {
public int currentUser_Id;
public bool isConnected;
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
isConnected = true;
await LoadStateAsync();
StateHasChanged();
}
}
private async Task LoadStateAsync()
{
var result = await ProtectedSessionStore.GetAsync<int>("User_Id");
currentUser_Id = result.Success ? result.Value : 0;
}
private async Task IncrementUser_Id()
{
currentUser_Id++;
await ProtectedSessionStore.SetAsync("User_Id", currentUser_Id);
}
}
How would I add an input to the template of a menu? View the following REPL, it does not accept keyboard input, but it DOES accept input if holding down shift and entering capital letters. I assume the menu is capturing keystrokes somewhere.
https://blazorrepl.telerik.com/QeEtnaFW52QfOcqb30
Hello Telerik,
When I first generator the Grid the menu appears as expected.
When I AutoFit All Columns the NavMenu is mis-alligned.
Thank you
I am still struggeling with CSS.
I want to set the Backgroundcolor and the Link/Text-Color of a specific Menu-Component. I know who to style the Menu generally for the whole Application but I need it just for one Page. The Menu-Component has no explicit Style Attribut to set in inline just for the specific object.
This is the way I style the Link-Color but it sets the color for all my Menus...
.k-menu-link {
color: red;
}
Any help ?
Hi everyone!
I hace this Rowfilter
This is the Telerik Code
<GridColumn FilterMenuType="@FilterMenuType.Menu" Field="@nameof(HechoDirectoClienteViewModel.FechaVencimiento)" Title="Fecha vencimiento" TextAlign="ColumnTextAlign.Right" Resizable="true" Sortable="true" Width="170px" HeaderClass="center-wrap">
<Template>
@((context as HechoDirectoClienteViewModel)?.FechaVencimiento?.ToString("dd/MM/yyyy"))
</Template>
</GridColumn>