Telerik Forums
UI for Blazor Forum
1 answer
24 views
By default, the `ContextMenu` opens a `List` of medium size. Can you add a way to customise it?
Anislav
Top achievements
Rank 6
Silver
Bronze
Bronze
 answered on 23 Apr 2025
1 answer
26 views

Hi Team,

Is there a way to remove download option from Context menu of FileManager Blazor

Anislav
Top achievements
Rank 6
Silver
Bronze
Bronze
 answered on 08 Apr 2025
0 answers
40 views

We were using the TelerikTreeList with

SelectionMode="TreeListSelectionMode.Single"
SelectedItems="@SelectedItems"

with a ContextMenu. On Rightclick we wanted to open the ContextMenu but also set the row as Selected.

If a row is selected and we rightclick on another one both will be selected. We don;t know exactly why and did not expect two rows to ever be selected after setting the SelectionMode to single.

this is the code we use for selecting on right click.

private async Task OnContextMenu(TreeListRowClickEventArgs args)
{
SelectedItems = [(TItem)args.Item];
await InvokeAsync(StateHasChanged);

Do you have any idea how to fix it?

Fabian
Top achievements
Rank 1
Iron
 asked on 03 Feb 2025
1 answer
118 views

These three questions may seem simple, but for some reason I have not been able to find how to style the context menu nor have I been able to achieve this through css:

1. How can I remove the "border" around the top-most context menu item (in attached pic1, the 'Filter by value' item)

2. How can I change the "reddish" hover color to a color of my choosing? (in attached pic1, the background of 'Open faceplate' item)

3. How can I change the "red" background selection color to a color of my choosing? (in attached pic2, the background of 'Open faceplate' item)

Much thanks

Marcin
Top achievements
Rank 1
Iron
Iron
 answered on 28 May 2024
1 answer
271 views

I'm using a "hierarchical" TelerikContextMenu (example below).  I want to detect if the SHIFT key was depressed when an item (i.e., ItemA1 or ItemB2) is clicked (detecting the difference between click and SHIFT-click).

I can detect if the shift key is depressed in the @oncontextmenu event, but that is for the click invoking the context menu.  I want a similar capability when selecting an item IN the context menu.

Any suggestions?

The context menu is structured like this:

ItemA
    ItemA1
    ItemA2
ItemB
    ItemB1
    ItemB2

 

Hristian Stefanov
Telerik team
 answered on 21 Mar 2024
1 answer
104 views

Hi,

 

is there a way to add a closing delay or a safe triangle to a context menu like shown here? Building like it's 1984: A comprehensive guide to creating intuitive context menus - Height

 

Kind regards

Svetoslav Dimitrov
Telerik team
 answered on 29 Feb 2024
1 answer
304 views

Hi,

I want to not close contextmenu when I click item(OnClick event).

I also want the hierarchical window to keep open.

 

Is there any solution?

Thanks.

Hristian Stefanov
Telerik team
 answered on 27 Jun 2023
1 answer
209 views

I have a grid with a headertemplate who raise a contextmenu to popup and allow to select a date.

See for example: https://blazorrepl.telerik.com/QxkKbZPH059REjJ030

 

Now, if i open the datepicker and click on the arrows (for select previous or next month) the context menu automatically close.

Select a day or change the month or year in the datepicker does not cause this issue.

I would like to allow user to click on previous/next month arrow without the contextmenu closed.

 

Any suggestion?

Thanks

 

Hristian Stefanov
Telerik team
 answered on 22 Jun 2023
1 answer
209 views

I have a DropDownList where each element has a button to open a TelerikContextMenu as such:

The problem is that sometimes the dropdown is closed and the menu not, like so:

Here is my code:

@namespace Appia.UiKit
@using Telerik.Extensions;
@using Appia.Entidades;
@using static Appia.Tests.Victor.TestWidget;
@inject IViewRepository ViewRepository

<TelerikDropDownList @ref="DropDownRef" TItem="ValueWrapper<string>" TValue="string" Data="ListOfViews" Filterable="true" FilterOperator="@StringFilterOperator.Contains"
                     FillMode="@ThemeConstants.DropDownList.FillMode.Flat" Class="" Width="min-content" ItemHeight="38"
                     Value="@ActiveViewId" ValueChanged="OnChange" OnClose="OnClose" AdaptiveMode="@AdaptiveMode.Auto">
    <ValueTemplate>@context.Text</ValueTemplate>
    <NoDataTemplate>No hay ninguna vista disponible</NoDataTemplate>
    
    <ItemTemplate>
        <div class="k-hbox w-100 k-border-bottom k-border-dark" >
            <div class="k-flex-grow k-align-self-center">@context.Text</div>
            <div @onclick:stopPropagation="true">
                <TelerikButton Icon="@(AppiaIcons.Stack)" OnClick="@HandleContextMenuButton" FillMode="@ThemeConstants.Button.FillMode.Flat"></TelerikButton>
            </div>
        </div>
    </ItemTemplate>
    <FooterTemplate>
        <div class="k-border-t-only" @onclick:stopPropagation="true">
            <TelerikButton Icon="@AppiaIcons.Favourite" Class="w-100 k-text-start" FillMode="@ThemeConstants.Button.FillMode.Flat">Establecer como predeterminada</TelerikButton>
            <TelerikButton Icon="@AppiaIcons.Compose" Class="w-100 k-text-start" FillMode="@ThemeConstants.Button.FillMode.Flat">Editar vista</TelerikButton>
            <TelerikButton Icon="@AppiaIcons.Globe" Class="w-100 k-text-start" FillMode="@ThemeConstants.Button.FillMode.Flat">Renombrar vista</TelerikButton>
            <TelerikButton Icon="@AppiaIcons.Duplicate" Class="w-100 k-text-start" FillMode="@ThemeConstants.Button.FillMode.Flat">Duplicar vista</TelerikButton>
        </div>
    </FooterTemplate>
    <DropDownListSettings>
        <DropDownListPopupSettings Height="430px" Width="min-content" Class="shadow-5" AnimationDuration="0"  />
    </DropDownListSettings>
</TelerikDropDownList>


<TelerikContextMenu @ref="@ViewItemMenuRef" Data="@ActionItems"></TelerikContextMenu>

@code {
    [Parameter] public ViewInstance ViewInstance { get; set; }
    public TelerikContextMenu<ActionItem>? ViewItemMenuRef { get; set; }
    public TelerikDropDownList<ValueWrapper<string>, string> DropDownRef { get; set; }
    public List<ValueWrapper<string>> ListOfViews { get; set; } = new();
    public bool IsCancelled = false;
    public string? ActiveViewId;

    public List<ActionItem> ActionItems { get; set; } = new()
    {
        new () { Text = "Activar", Icon = AppiaIcons.Eye },
        new () { Text = "Establecer como predeterminada", Icon = AppiaIcons.Favourite },
        new () { Text = "Editar", Icon = AppiaIcons.Compose },
        new () { Text = "Renombrar", Icon = AppiaIcons.Information },
        new () { Text = "Eliminar", Icon = AppiaIcons.Delete },
        new () { Text = "Duplicar", Icon = AppiaIcons.Duplicate }
    };

    protected override async Task OnInitializedAsync()
    {
        ActiveViewId = this.ViewInstance.ActiveView.Id;

        this.ListOfViews = await ViewRepository
            .ListAvailableAsync(this.ViewInstance.ActiveView.TipoDeVista, this.ViewInstance.ActiveView.EntityType)
            .ThenSelect(x => new ValueWrapper<string>(x.Id, x.Nombre))
            .Then( x => x.ToList() );

        await base.OnInitializedAsync();
    }

    public async Task OnRead(DropDownListReadEventArgs args) => await ViewRepository.ListAvailableAsync(ViewInstance.ActiveView.TipoDeVista, ViewInstance.ActiveView.EntityType, async db => await db.ToDataSourceReadEvent(args));

    public async Task HandleContextMenuButton( MouseEventArgs args )
    {
        IsCancelled = true;
        await ViewItemMenuRef?.ShowAsync( args.ClientX, args.ClientY );
    }

    public void OnClose( DropDownListCloseEventArgs args )
    {
        args.IsCancelled = IsCancelled;
        IsCancelled = false;
    }

    public void Close()
    {
        IsCancelled = false;
        DropDownRef.Close();
        IsCancelled = true;
    }

    public void OnChange( string args )
    {
        this.ActiveViewId = args;
        Close();
    }

}

 

Therefore I need a way to close the menu programaticlly that I will fire when the dropdown list is closed. 

I would als like to have listeners on the TelerikContextMenu to know when it's closed, this way I could close the dropdown.

How could I do that?

Thanks

Dimo
Telerik team
 answered on 06 Jun 2023
1 answer
362 views

Hi,

I've got a pretty simple Context menu:

<TelerikContextMenu @ref="@TheContextMenu" Data="@MenuItems" OnClick="@( (ContextMenuItem itm) => ClickHandler(itm) )" DisabledField="Disabled" />

It contains one item that is a submenu of project names:

 


var mnuProjects = Projects.Select(x => new ContextMenuItem() { Text = x.Name, CommandName = "Project", Id = x.ID }).ToList();

MenuItems = new List<ContextMenuItem>()
{
	... other items
	
	new ContextMenuItem
	{
		Text = "Projects",
		HasChildren = true,
		Items = mnuProjects
	},

	... other items
};

The number of projects has now grown too long to display without going off the bottom of the page. 

Is there a quick way to set the height of the list that appears?

 

Dimo
Telerik team
 answered on 28 Apr 2023
Narrow your results
Selected tags
Tags
+? more
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?