Questions on UI for Blazor Forum

1 answer

24 views

Customise ContextMenu size

By default, the `ContextMenu` opens a `List` of medium size. Can you add a way to customise it?

ContextMenu

answered on 23 Apr 2025

1 answer

26 views

Remove download option from Context menu of FileManager Blazor

Hi Team,

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

ContextMenu

FileManager

answered on 08 Apr 2025

0 answers

40 views

Highlight row on rightclick in Treelist

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?

ContextMenu

TreeList

asked on 03 Feb 2025

1 answer

118 views

How can I style TelerikContextMenu for border type, background color and hover color?

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

ContextMenu

answered on 28 May 2024

1 answer

271 views

Detect SHIFT key in ContextMenu

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

ContextMenu

answered on 21 Mar 2024

1 answer

104 views

ContextMenu safe triangle

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

ContextMenu

answered on 29 Feb 2024

1 answer

304 views

Can I not close ContextMenu when clicking item?

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.

ContextMenu

answered on 27 Jun 2023

1 answer

209 views

Prevent ContextMenu to close when click on DatePicker

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

ContextMenu

DatePicker

answered on 22 Jun 2023

1 answer

209 views

How can I close a TelerikContextMenu programatically?

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

ContextMenu

answered on 06 Jun 2023

1 answer

362 views

ContextMenu sub menu height

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?

ContextMenu

answered on 28 Apr 2023