I have what I thought was a relatively simple task but I'm struggling with figuring out how to accomplish what I want. I'm using an SfCard with an SfContextMenu control and I need to know which card instance was actually clicked on so I can action the user's intention from their right-click selection.
I'm actually having an additional issue with the below code too. The context menu shows fine the first time I run my project but on subsequent runs, it doesn't. I need to change the context menu Target property to something different, run the program, and then change it back to get it to show again. Not sure what that's all about. FYI, this is my first Blazor project so I'm assuming I'm doing something wrong...
@using Syncfusion.Blazor.Buttons
@using Syncfusion.Blazor.Cards
@using Syncfusion.Blazor.Data
@using Syncfusion.Blazor.DropDowns
@using Syncfusion.Blazor.Inputs
@using Syncfusion.Blazor.Popups
@using Syncfusion.Blazor.Navigations
@inject SfDialogService DialogService
@inject ProductImageData ProductImageDAL
@inject IJSRuntime JSRuntime
<div class="card">
<h6 class="card-header"><b>Product Files</b></h6>
<div class="card-body">
<div class="row">
@if (this.Files == null || this.Files.Count == 0)
{
<div class="e-error">
@if (ProductId == 0)
{
<div class="e-error-content">Select a product to view its files.</div>
}
else
{
<div class="e-error-content">No files found for this product.</div>
}
</div>
}
else
{
<div class="container px-20">
<div class="row gx-3">
@foreach (ProductImage card in Files)
{
<div style="height: 350px; width: 300px">
<div class="col">
<SfCard ID="card" style="height: 300px">
<CardImage Image="@card.FullUrl" />
<CardHeader Title="@card.OriginalFileName"></CardHeader>
<CardFooter>
<CardFooterContent>
<span style="float:left">
<SfButton CssClass="e-btn e-default" @onclick="@(e => ViewImage(@card.ProductImageId))">Open</SfButton>
</span>
<span style="float:right;">
<SfButton CssClass="e-btn e-outline e-danger" @onclick="@(e => DeleteImage(@card.ProductImageId))">Delete</SfButton>
</span>
</CardFooterContent>
</CardFooter>
</SfCard>
</div>
</div>
}
</div>
</div>
}
<SfContextMenu Target=".e-card .e-card-image" TValue="MenuItem">
<MenuItems>
<MenuItem Text="Set as Default Image">"</MenuItem>
<MenuItem Text="Open">"</MenuItem>
<MenuItem Separator></MenuItem>
<MenuItem Text="Delete"></MenuItem>
</MenuItems>
<MenuEvents TValue="MenuItem" ItemSelected="@OnMenuSelection"></MenuEvents>
</SfContextMenu>
</div>
</div>
</div>
<style>
.e-card .e-card-image {
height: 310px;
background: no-repeat;
background-size: contain;
}
</style>
@code {
[Parameter]
public int ProductId { get; set; }
[Parameter]
public bool FilesUploaded { get; set; }
public List<ProductImage> Files { get; set; }
protected override async Task OnParametersSetAsync()
{
Files = (List<ProductImage>)await ProductImageDAL.GetAllById(ProductId);
}
private async Task DeleteImage(int ProductImageId)
{
bool isConfirmed = await DialogService.ConfirmAsync("Are you sure you want to permanently delete this file?", "Delete Confirmation");
if (isConfirmed)
{
await ProductImageDAL.DeleteFileAsync(ProductImageId);
Files.RemoveAll(s => s.ProductImageId == ProductImageId);
}
}
private async Task ViewImage(int ProductImageId)
{
var product = await ProductImageDAL.GetById(ProductImageId, true);
JSRuntime.InvokeAsync<object>("open", System.Threading.CancellationToken.None, product.FullUrl, "_blank");
}
public MenuItem SelectedItem;
// Triggers when the item is selected
private void OnMenuSelection(MenuEventArgs<MenuItem> args)
{
SelectedItem = args.Item;
}
}
Hi Seth,
Sorry for the delay.
Query: I need to know which card instance was actually clicked on so I can action the user's intention from their right-click selection?
Using the OnOpen event of Context menu component, we can get the current target of the Card component shown as below. Kindly refer to the below code snippet and attached sample.
<SfContextMenu Target=".e-card .e-card-image" TValue="MenuItem"> <MenuItems> …… </MenuItems> <MenuEvents TValue="MenuItem" ItemSelected="@OnMenuSelection" Created="onCreated" OnOpen="OnOpen"></MenuEvents> </SfContextMenu> ….. private void OnOpen(BeforeOpenCloseMenuEventArgs<MenuItem> args) { SelectedCard = args.TargetId; } |
Query: The context menu shows fine the first time I run my project but on subsequent runs, it doesn't?
For this query, could you please share the issue replicable sample or replicate issue in our sample. Based on that we will check and provide you a better solution quickly.
Regards,
YuvanShankar A