Select multiple rows lost focus when right click in Custom Context Menu.

[Juan Acosta]

Hi

I was checking the forums. I want to implement a custom context with custom icons. 

I found this post 

https://www.syncfusion.com/forums/125511/add-custom-context-menu-to-grid-control

and the results worked fine. 

I modified that code to also select multiple rows. 

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

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

        .AllowSelection(true)

        .AllowResizeToFit(true)

        .SelectionType(SelectionType.Multiple)

           

       

          .ContextMenuSettings(contextMenu =>

            {

                contextMenu.EnableContextMenu()

                    .CustomContextMenuItems(new List<CustomContexMenuItems>() { 

                                                                                    new CustomContexMenuItems() { Id = "1", Text = "Download (no check out)" } ,

                                                                                    new CustomContexMenuItems() { Id = "2", Text = "Open file (Ctrl + O)" } ,

                                                                                    new CustomContexMenuItems() { Id = "3", Text = "Check Group Security" } ,

                                                                                    new CustomContexMenuItems() { Id = "4", Text = "Maintenance View (Ctrl + M)" } ,

                                                                                    new CustomContexMenuItems() { Id = "5", Text = "Notify me when Updated" } ,

                                                                                    new CustomContexMenuItems() { Id = "6", Text = "Notify me when Checked In" } ,

                                                                                    new CustomContexMenuItems() { Id = "7", Text = "Notify me when Checked Out" } ,

                                                                                    new CustomContexMenuItems() { Id = "8", Text = "Notify me when Linked" } 

                                                                                }); // CustomContext menu items

                    

            })

        .AllowPaging()

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

         .Columns(col =>

        {

            col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(90).ValidationRules(v => v.AddRule("required", true)).Add();

            col.Field("CustomerID").HeaderText("Customer ID").Width(90).ValidationRules(v => v.AddRule("required", true)).Add();

            col.Field("EmployeeID").HeaderText("Employee ID").Width(90).TextAlign(TextAlign.Right).ValidationRules(v => v.AddRule("required", true)).Add();

            col.Field("Freight").HeaderText("Freight").TextAlign(TextAlign.Right).Width(75).EditType(EditingType.Numeric).Format("{0:C}").NumericEditOptions(new Syncfusion.JavaScript.Models.EditorProperties() { DecimalPlaces = 2 }).Width(75).ValidationRules(v => v.AddRule("required", true)).Add();

        })

)

However, as soon as I right click the multiple selected rows lost focus and only the last one remains active. 

I want to apply some custom properties to several rows. How can I achieve this. Additionally, I want to know how can I customize more the CustomContextMenuItem.  I want to do something like the image inside the project. 

I have attached the example project with the issue reported. 

Kind regards, 

Juan 

Attachment: SyncfusionMvcApplication14_9773a5c2.zip

[Prasanna Kumar Viswanathan]

Hi Juan, 

Thanks for contacting Syncfusion support. 

Queries	Response
“I right click the multiple selected rows lost focus and only the last one remains active.”	In default contextMenuItems we can edit and delete the record using Edit Record and Delete Record Context menu items.  To edit a record we need to select the single row. So, while right click on row we will remove the selection for other rows.  To achieve your requirement we used recordClick and contextOpen events of ejGrid.  The recordClick event will be triggered when the record is clicked. In this event we store the selected rows indexes in a variable using selectedRowsIndexes method of ejGrid.   The contextOpen event will be triggered before the context menu opened. In this event we select the rows using selectRows method of ejGrid using the variable.  Find the code example and sample:  @(Html.EJ().Grid<OrdersView>("FlatGrid")          .Datasource((IEnumerable<object>)ViewBag.datasource)               ------------------------------          .ContextMenuSettings(contextMenu =>              {                  contextMenu.EnableContextMenu()                      -------------------------------                                    })            .AllowPaging()           .ClientSideEvents(eve => { eve.ContextClick("contextclick").ContextOpen("contextopen").RecordClick("rowselect"); })           .Columns(col =>          {                 --------------------------------------------          })    )    <!-- Hide screen parts -->      <script type="text/javascript">            var rowIndex;        function contextopen(args) {       if(!ej.isNullOrUndefined(rowIndex))          this.selectRows(rowIndex);      }      function rowselect(args) {          rowIndex = this.selectedRowsIndexes;      }  </script>  Refer to the Help documents  https://help.syncfusion.com/js/api/ejgrid#events:contextopen  https://help.syncfusion.com/js/api/ejgrid#events:recordclick  https://help.syncfusion.com/js/api/ejgrid#methods:selectrows
“how can I customize more the CustomContextMenuItem.”	In the screenshot we found that you have to render the image in the customContextMenuItems. In the below code example we have rendered the image for the item “Download” in CustomContextMenuItems property of ContextMenu  Find the code example and screenshot:  .ContextMenuSettings(contextMenu =>              {                  contextMenu.EnableContextMenu()                      .CustomContextMenuItems(new List<CustomContexMenuItems>() {                                                                                       new CustomContexMenuItems() { Id = "1", Text = "Download (no check out) <img src='/Content/images/toggle-text.png' style='width:20px;height:20px' />" } ,                                                                                              ----------------------------------                                                                                 });                             })  Screenshot:
“I want to apply some custom properties to several rows”	In the contextOpen event we get the rowIndex of the selected rows. Using getRowByIndex method of ejGrid we can get the selected row.  To apply custom css for the selected row, use the css jQuery method.  Find the code example:  function contextopen(args) {          --------------------          this.getRowByIndex(rowIndex[0]).css("color", "red");      }

Sample: http://www.syncfusion.com/downloads/support/forum/126126/ze/SyncfusionMvcApplication14-275922729 

Regards, 

Prasanna Kumar N.S.V 

[Juan Acosta]

Hi Prassana,

I tested your approach and I changed it a little bit because I used the simple click for other purposes.

Thank you so much for your help.

I have a question, I'm building something Web responsive. I was testing the grid using mobile devices the context Menu get lost. It is this something common. There is another CSS or property that I have to activate to manage the context menu over the grid in mobiles?

Could you please help me with that doubt.

Kind regards,

Juan

[Jayaprakash Kamaraj]

Hi Juan,