How to get SfListBox's right-clicked item on menu item click?

[SZL]

Hello,

I have a Listbox and Context menu in Blazor Server.

 <div class="listbox-content lst-check-multi">

     <SfListBox @key="@ListRenderKey" @ref="lstDeny" TValue="int[]" TItem="Rights" Enabled="ListEnabled"
                DataSource="@AllRights"
                CssClass="single-column-listbox"
                Value="@SelectedRightIds">
         <ListBoxEvents TValue="int[]" TItem="Rights" ValueChange="OnRightsSelectionChanged" />
         <ListBoxFieldSettings Text="RightCode" Value="Id" />
         <ListBoxSelectionSettings ShowCheckbox="true" Mode="Syncfusion.Blazor.DropDowns.SelectionMode.Multiple" ShowSelectAll="true" />
         <ListBoxTemplates TItem="Rights">
             <ItemTemplate>
                 <div class="custom-item my-1">
                     <span class="text">@context.RightName</span>
                     <span class="description">@context.Description</span>
                 </div>
             </ItemTemplate>
         </ListBoxTemplates>
     </SfListBox>
     <SfContextMenu TValue="MenuItem" Target=".single-column-listbox .e-list-item">
         <MenuItems>
             <MenuItem Id="btnExplicitDeny" Text="Explicit Deny" Hidden="@btnExplicitDenyHidden"></MenuItem>
             <MenuItem Id="btnRemoveExplicitDeny" Text="Remove Explicit Deny" Hidden="@btnRemoveExplicitDenyHidden"></MenuItem>
         </MenuItems>
         <MenuEvents TValue="MenuItem" OnOpen="@BeforeOpenHandler" ItemSelected="@ContextMenuItemSelectedHandler"></MenuEvents>
     </SfContextMenu>
 </div>

How can I determine the source listbox (html) element that was right-clicked? (The source listbox-item of context menu?)

 private async void BeforeOpenHandler(BeforeOpenCloseMenuEventArgs<MenuItem> args)
 {
 }
 private async void ContextMenuItemSelectedHandler(MenuEventArgs<MenuItem> args)
 {
 }
Thank you!

[Saravanan Jayavel]

Hi SZL,

To identify which specific ListBox item was right clicked to open a Syncfusion ContextMenu in Blazor, you can use a combination of the HtmlAttributes property of ListBoxFieldSettings to assign unique IDs to each list item. Additionally, the Opened event of the context menu can be used to capture the ID of the list item that was interacted with.

Refer the code snippet below :

<SfListBox id="target" @ref="@ListboxObj" CssClass="e-listbox" TValue="string[]" DataSource="@FormItems" TItem="FormItem" AllowDragAndDrop="true">

    <ListBoxEvents TValue="string[]" TItem="FormItem"></ListBoxEvents>

    <ListBoxFieldSettings Text="Field" Value="FormItemNo" HtmlAttributes="attributes" />

        <SfContextMenu Target="#target" TValue="MenuItem">

            <MenuItems>

                <MenuItem Text="Add column"></MenuItem>

                <MenuItem Text="Delete column"></MenuItem>

            </MenuItems>

            <MenuEvents TValue="MenuItem" Opened="open"></MenuEvents>

        </SfContextMenu>

</SfListBox>

 

@code{

 

private List<FormItem> FormItems = new List<FormItem>

{

     new FormItem { Field = "Field1", FormItemNo = "1", attributes = new Dictionary<string, object>() {{ "id", "1" }}},

     new FormItem { Field = "Field2", FormItemNo = "2", attributes = new Dictionary<string, object>() {{ "id", "2" }} },

     new FormItem { Field = "Field3", FormItemNo = "3", attributes = new Dictionary<string, object>() {{ "id", "3" }} },

};

 

   private void open(OpenCloseMenuEventArgs<MenuItem> args)

    {

        selectedList = ListboxObj.GetDataByValue(new string[] {args.TargetId});

    }

 

}

For your reference we attached a sample.

Sample: Attached as a zip file.

Check out the sample and let us know if you need any further assistance.

Regards,

Saravanan J

Attachment: BlazorApp1_fed63db0.zip

[SZL]

Hello,

Thank you, I check the example and it works, but in my case the TargetId is empty, dont understand why. In html code I see the Id attributes with values.

 <SfListBox id="lstDeny" @key="@ListRenderKey" @ref="lstDeny" TValue="int[]" TItem="Rights" Enabled="ListEnabled"
            DataSource="@AllRights"
            CssClass="single-column-listbox"
            Value="@SelectedRightIds">
     <ListBoxEvents TValue="int[]" TItem="Rights" ValueChange="OnRightsSelectionChanged" />
     <ListBoxFieldSettings Text="RightCode" Value="Id" HtmlAttributes="Attributes" />
     <ListBoxSelectionSettings ShowCheckbox="true" Mode="Syncfusion.Blazor.DropDowns.SelectionMode.Multiple" ShowSelectAll="true" />
     <ListBoxTemplates TItem="Rights">
         <ItemTemplate>
             <div class="custom-item my-1">
                 <span class="text">@context.RightName</span>
                 <span class="description">@context.Description</span>
             </div>
         </ItemTemplate>
     </ListBoxTemplates>
 </SfListBox>
 <SfContextMenu TValue="MenuItem" Target="#lstDeny">
     <MenuItems>
         <MenuItem Id="btnExplicitDeny" Text="Explicit Deny" Hidden="@btnExplicitDenyHidden"></MenuItem>
         <MenuItem Id="btnRemoveExplicitDeny" Text="Remove Explicit Deny" Hidden="@btnRemoveExplicitDenyHidden"></MenuItem>
     </MenuItems>
     <MenuEvents TValue="MenuItem" Opened="@OnContextMenuOpened" ItemSelected="@ContextMenuItemSelectedHandler"></MenuEvents>
 </SfContextMenu>

And there is an another problem: the context menu appear above the full listbox, not only above the items. My selector was good I think in the original post:  Target=".single-column-listbox .e-list-item", but not understand TargetId is why always empty. 

In the following image you can check that the id attributes has proper value:

   

[SZL]

The TargetId is empty here:

[Saravanan Jayavel]

Hi SZL,

We apologize for the delay in updating this thread — we truly appreciate your patience.

We’d like to clarify the behavior of the Syncfusion context menu in this scenario. The TargetId is determined based on the element directly under the mouse pointer when the context menu opens. In your case, since you're using a custom ItemTemplate inside the <SfListBox>, the inner <div> is rendered inside the <li> element, but it doesn’t inherit the id from the outer container. As a result, the context menu isn’t able to capture the correct TargetId — this is expected behavior when templates are used.

Workaround Suggestion:

To ensure the context menu can detect the target, we recommend setting the height and width of the inner <div> to match the <li> container. This allows the mouse pointer to land directly on the element with the id, enabling TargetId to be captured properly.

Refer the code snippet below:

<ItemTemplate>

    <div class="custom-item my-1" id="@context.Id">

        <span class="text">@context.RightName</span>

        <span class="description">@context.Description</span>

    </div>

</ItemTemplate>

<style>

.custom-item {

    height: 36px;

    width: 100%;

}

</style>

We attached a sample for your reference.

Sample: Attached as a zip file.

Let us know if you need any further assistance.

Regards,

Saravanan J

Attachment: BlazorApp1_fed63db0_2be62bbb.zip