Questions on UI for Blazor Forum

1 answer

26 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

ContextMenu

answered on 21 Mar 2024

1 answer

29 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

73 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

100 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

96 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

167 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

1 answer

103 views

binding inside contextmenu does not work

Hi, i show in a specific position a context menu with some fields.
If i try to update a binding field (using @bind-Value), 
for example with a TelerikTextBox it does not work.
You can see this simple example, press Reset button does not update the textbox content.
What's wrong?
Thanks
 
https://blazorrepl.telerik.com/QxkRwDbe51q1XmYf53
 
 
<TelerikContextMenu@ref="ContextMenu"TItem="object">
    <Template>
        <div>Input name</div>
        <TelerikTextBox @bind-Value="Value" />
        <br />
        <TelerikButton OnClick="@(() => Value = "")">Reset</TelerikButton>
        <TelerikButton OnClick="@(() => ContextMenu.HideAsync())">Close</TelerikButton>
    </Template>
</TelerikContextMenu>
<TelerikButton OnClick="() => ContextMenu.ShowAsync(100,100)">Open context menu</TelerikButton>
@code
{
    private TelerikContextMenu<object> ContextMenu {get;set;}
    private string Value {get;set;}
}