Hi Team,
Is there a way to remove download option from Context menu of FileManager Blazor
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?
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
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
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
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.
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
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
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?