Context Menu - Custom Items

[Bojan Kuhar]

Hi,

is it possible to have images assigned to the Grid context menu custom items.

I am using  jquery based solution, ASP .NET MVC, Syncfusion.EJ version is 15.3450.0.29

This is my code to create the grid <div class="row">

    <div class="control">
        <div style="cursor:pointer">
            @(Html.EJ().Grid<PVIb.Deals>("SearchGrid")
            .Datasource(@Model.Deals)
            .ClientSideEvents(eve => eve.Create("format"))
            .AllowFiltering()
            .AllowSorting()
            .AllowScrolling()
            .AllowTextWrap(true)
            .TextWrapSettings(wrap => { wrap.WrapMode(WrapMode.Header); })
            .ClientSideEvents(evt => evt.RowSelected("onRowSelected"))
            .ScrollSettings(scroll =>
            {
                scroll.AllowVirtualScrolling()
                .Height(300)
                .VirtualScrollMode(VirtualScrollMode.Normal);
            })
            .ContextMenuSettings(contextMenu =>
            {
                contextMenu.EnableContextMenu();
                contextMenu.DisableDefaultItems();
                contextMenu.CustomContextMenuItems(new List<CustomContextMenuItems> {
                    new CustomContextMenuItems() { Id = "dealDetails", Text = "Details"},
                    new CustomContextMenuItems() { Id = "brokerNote", Text = "Broker Note" },
                    new CustomContextMenuItems() { Id = "sharePrice", Text = "Share Price History" },
                    new CustomContextMenuItems() { Id = "shareSENS", Text = "SENS" },
                });
            })
 
            .EnableHeaderHover()
            .FilterSettings(filter => { filter.FilterType(FilterType.Excel); })
            .Columns(col =>.............

Also, could you please include a code that handles custom menu items click event.

Regards

Bojan

[Farveen Sulthana Thameeztheen Basha]

Hi Bojan, 

Thanks for contacting Syncfusion Support. 

Query #1 :- is it possible to have images assigned to the Grid context menu custom items. 

We have checked your query and you can display the image on customContext Menu Item by giving directly the img URL to the CustomContext Menu List.  

Please refer to the code example:- 

@(Html.EJ().Grid<object>("FlatGrid") 

            .Datasource(datasource => datasource.Json((IEnumerable<object>)ViewBag.datasource).UpdateURL("/Grid/Update") 

                       .InsertURL("/Grid/Insert").RemoveURL("/Grid/Remove").Adaptor(AdaptorType.RemoteSaveAdaptor)) 

         .AllowPaging() 

              ContextMenuSettings(contextMenu =>  

            {  

                contextMenu.EnableContextMenu()  

               .CustomContextMenuItems(new List<CustomContexMenuItems>() {   

                        new CustomContexMenuItems() { Id = "1", Text = "Download <img src='/Content/images/toggle-text.png' style='width:20px;height:20px' />" } ,  

               .     .     . 

                                                                                                                                                            });                 

             

})  

  

          

Query #2 :- Could you please include a code that handles custom menu items click event. 

 

If you want to perform any actions while clicking context Menu Items, you can use ContextClick event of the Grid. By using ContextClick you can get corresponding item on its args and you can perform actions on it. 

 

Please refer to the code example:- 

@(Html.EJ().Grid<object>("FlatGrid") 

        .Datasource((IEnumerable<object>)ViewBag.datasource) 

        .ContextMenuSettings(contextMenu => 

        { 

            contextMenu.EnableContextMenu(); 

            contextMenu.DisableDefaultItems(); 

            contextMenu.CustomContextMenuItems(new List<CustomContextMenuItems> { new CustomContextMenuItems() { Id = "clear", Text = "Clear Selection" } }); 

        }) 

        .AllowPaging() 

        .ClientSideEvents(eve => { eve.ContextClick("context_click"); }) 

        .Columns(col => 

        { 

            col.Field("OrderID").IsPrimaryKey(true).HeaderText("Order ID").TextAlign(TextAlign.Right).Width(90).Add(); 

 

            .   .    . 

 

        }) 

) 

<script type="text/javascript"> 

    function context_click(args) { 

        if (args.text == "Clear Selection") 

            this.clearSelection(); 

    } 

</script> 

 

Please refer to the documentation Link:- 

https://help.syncfusion.com/aspnetmvc/grid/context-menu#custom-context-menu 

https://help.syncfusion.com/api/js/ejgrid#events:contextclick 

Please get back to us if you need any further assistance, 

Regards, 

Farveen sulthana T 

[Bojan Kuhar]

The image is not dispayed. Yet if I type the image path in the browser address it does show in the browser window.

http://localhost:54195/Content/images/Deal.png

This is in the source of the page

"contextMenuSettings":{"enableContextMenu":true,"disableDefaultItems":true,"customContextMenuItems":[{"id":"dealDetails","text":"Details <img src='/Content/images/Deal.png' style='width:20px;height:20px' "},{"id":"brokerNote","text":"Broker Note"},{"id":"sharePrice","text":"Share Price History"},{"id":"shareSENS","text":"SENS"}]}

.ContextMenuSettings(contextMenu =>
         {
             contextMenu.EnableContextMenu();
             contextMenu.DisableDefaultItems();
             contextMenu.CustomContextMenuItems(new List<CustomContextMenuItems> {
                 new CustomContextMenuItems() { Id = "dealDetails", Text = "Details <img src='/Content/images/Deal.png' style='width:20px;height:20px' "},
                 new CustomContextMenuItems() { Id = "brokerNote", Text = "Broker Note" },
                 new CustomContextMenuItems() { Id = "sharePrice", Text = "Share Price History" },
                 new CustomContextMenuItems() { Id = "shareSENS", Text = "SENS" },
             });
         })

[Farveen Sulthana Thameeztheen Basha]

Hi Bojan, 

We have prepared sample by placing the image in Context menu but we are unable to reproduce your reported problem at our end. Please refer to the sample Link:- 

http://www.syncfusion.com/downloads/support/forum/137223/ze/SYNCFU~2-2003032216.zip 

1. Please ensure that you have referred the image as like given above sample. 

2. Please ensure that you have referred the correct image path Location and also check the image properties .jpeg, .png etc. 

After following the above solution still facing the issue, please share us the issue reproducing sample or reproduce the issue in the above sample and Share us the Screenshot to find the cause of the issue. 

Regards, 

Farveen sulthana T 

[Bojan Kuhar]

Thank you. Upon closer inscpection I have noticed that I have left out closing /> for the image tag.

[Farveen Sulthana Thameeztheen Basha]

Hi Bojan, 

  

Thanks for your update. We are glad to know that your reported problem has resolved. Please get back to us if you need any further assistance. 

  

Regards, 

Farveen sulthana T