We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

126126 Sep 26,2016 10:02 AM UTC Sep 30,2016 04:54 AM UTC ASP.NET MVC 5
loading
Tags: Grid
Juan Acosta
Asked On September 26, 2016 10:02 AM UTC

Hi
I was checking the forums. I want to implement a custom context with custom icons. 
I found this post 
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 [Syncfusion]
Replied On September 27, 2016 01:55 PM UTC

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 






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"); 
    } 




Regards, 
Prasanna Kumar N.S.V 


Juan Acosta
Replied On September 28, 2016 06:05 AM UTC

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 [Syncfusion]
Replied On September 29, 2016 12:32 PM UTC

Hi Juan, 

  

In mobile device, context menu will be shown on long press . So, no need for additional properties to open context menu in mobile devices. 

  

Regards, 

  

Jayaprakash K. 



Juan Acosta
Replied On September 30, 2016 12:23 AM UTC

Hi Jayaprakash,

Thank you for your answer. I will test in some devices later.

Kind regards,

Juan

Prasanna Kumar Viswanathan [Syncfusion]
Replied On September 30, 2016 04:54 AM UTC

Hi Juan, 

We will wait to hear from you. 

Regards, 
Prasanna Kumar N.S.V 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;