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. Image for the cookie policy date

I want to select the cell in the grid when right-click operation

in EJ2, when I click the right mouse button, I want to select the cell in the grid, how can I set it?

3 Replies

PS Pavithra Subramaniyam Syncfusion Team January 7, 2019 08:53 AM UTC

Hi bright, 
 
Query: when I click the right mouse button, I want to select the cell in the grid, how can I set it? 
 
You can achieve your requirement by binding the JavaScript “mousedown” or “contextmenu” event to the Grid element. In that event you can select the Grid cells by using the “selectCell” method. Please refer to the below code example, Documentation link and sample link. 
 
[inde.cshtml] 
<ejs-grid id="GridUS_doc" created='created' allowPaging="true"cellSelected="cellSelected" dataSource="ViewBag.dataSource"> 
    <e-grid-selectionSettings mode="Cell" type="Single"></e-grid-selectionSettings> 
    <e-grid-columns> 
        <e-grid-column field="ShipName" headerText="ShipName" width="150"></e-grid-column> 
        .  .  . 
    </e-grid-columns> 
</ejs-grid> 
<br /> 
<script> 
    function created(args) {  
        // we are binding the mousedown event inside the “created” event of Grid. 
        this.element.addEventListener("mousedown", function (e) { 
            if (e.button == 2 && e.target.classList.contains("e-rowcell")) { 
                var grid = document.getElementsByClassName('e-grid')[0].ej2_instances[0] 
                var rowObj = grid.getRowObjectFromUID(ej.base.closest(e.target, '.e-row').getAttribute('data-uid'));  // getting row information 
                var r_index = rowObj.index; 
                var c_index = parseInt(e.target.getAttribute("aria-colindex")); 
                grid.selectCell({ rowIndex: r_index, c_index: }, true); 
            } 
        }); 
    } 
    </script>  
 
 
                              https://ej2.syncfusion.com/documentation/api/grid#selectcell  
 
 
Please refer the sample for further details, 
 
Regards, 
Pavithra S. 



BR bright replied to Pavithra Subramaniyam January 9, 2019 05:59 AM UTC

Hi bright, 
 
Query: when I click the right mouse button, I want to select the cell in the grid, how can I set it? 
 
You can achieve your requirement by binding the JavaScript “mousedown” or “contextmenu” event to the Grid element. In that event you can select the Grid cells by using the “selectCell” method. Please refer to the below code example, Documentation link and sample link. 
 
[inde.cshtml] 
<ejs-grid id="GridUS_doc" created='created' allowPaging="true"cellSelected="cellSelected" dataSource="ViewBag.dataSource"> 
    <e-grid-selectionSettings mode="Cell" type="Single"></e-grid-selectionSettings> 
    <e-grid-columns> 
        <e-grid-column field="ShipName" headerText="ShipName" width="150"></e-grid-column> 
        .  .  . 
    </e-grid-columns> 
</ejs-grid> 
<br /> 
<script> 
    function created(args) {  
        // we are binding the mousedown event inside the “created” event of Grid. 
        this.element.addEventListener("mousedown", function (e) { 
            if (e.button == 2 && e.target.classList.contains("e-rowcell")) { 
                var grid = document.getElementsByClassName('e-grid')[0].ej2_instances[0] 
                var rowObj = grid.getRowObjectFromUID(ej.base.closest(e.target, '.e-row').getAttribute('data-uid'));  // getting row information 
                var r_index = rowObj.index; 
                var c_index = parseInt(e.target.getAttribute("aria-colindex")); 
                grid.selectCell({ rowIndex: r_index, c_index: }, true); 
            } 
        }); 
    } 
    </script>  
 
 
                              https://ej2.syncfusion.com/documentation/api/grid#selectcell  
 
 
Please refer the sample for further details, 
 
Regards, 
Pavithra S. 


Perfect, this solved my problem,thanks。


PS Pavithra Subramaniyam Syncfusion Team January 9, 2019 09:39 AM UTC

Hi bright, 

Thanks for your update.  

We are happy to hear that your issue has been resolved now. 

Please contact us if you need further assistance. 

Regards, 
Pavithra S. 


Loader.
Live Chat Icon For mobile
Up arrow icon