intercept the click event on a grid cell

[nimue]

Hi,

I would like to enable the click only on two cells in particular of the grid and then intercept the click to figure out which of the two cells has been clicked, but I can not figure out how to do it.

Can you help me?

Thanks in advance for the support.

Barbara Inzitari.

[Venkatesh Ayothi Raman]

Hi Barbara, 

Thanks for contacting Syncfusion support. 

We have analyzed your query. We suggest you to follow anyone of the way for your requirement, 

Solution 1 : Bind the click event to Grid, based on the target clicked show the details of cell 

In this solution, we have bound a click event to the Grid. In that click event, we can get the corresponding cells target and checked the conditions based on the target element as per your scenario. Here, we can display the content of the cell value if we click the column 1 0r 2. Else the alert won’t be displayed. Please refer the code example below, 

 

@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.dataSource).Columns(col => 

                 { 

                     ... 

                 })...Render() 

 

<script type="text/javascript"> 

    document.getElementById("Grid").addEventListener('click', function (e) { 

        //Here “aria-colindex” represents the column index and “index” represents the row index 

        if (e.target.classList.contains("e-rowcell") && ((e.target.getAttribute("aria-colindex") == "1") ||  

           (e.target.getAttribute("aria-colindex") == "2")) && e.target.getAttribute("index") == "2") { 

                   alert("Clicked cell value is : " + e.target.innerHTML); 

        } 

    })</script> 

Solution 2 : Use “CellSelecting“ event of Grid. 

 

However, we can get the corresponding cellDetails while selecting the cell by using “CellSelecting” event of Grid. When the particular cell is selected, this event will be triggered. We have checked for the two particular cells inside this event and display the alert only if those two cells are clicked. Else we have canceled the selection using “args.cancel”, so that the cell selection won’t be performed in Grid and the cell looks like never clicked. 

@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.dataSource).Columns(col =>  { 

                 ... 

}).SelectionSettings(sel=>sel.Mode(Syncfusion.EJ2.Grids.SelectionMode.Cell)).AllowSelection(true).CellSelecting("selecting").Render() 

 

<script type="text/javascript"> 

    function selecting(args) { 

        //Here “cellIndex” represents the column index and “rowIndex” represents the row index 

        if ((args.cellIndex.rowIndex == 4 && args.cellIndex.cellIndex == 1) || (args.cellIndex.rowIndex == 4 && args.cellIndex.cellIndex == 3)) { 

            alert(args.currentCell.innerHTML); 

        } 

        else 

            args.cancel = true; 

    } 

</script> 

Help documentation: https://ej2.syncfusion.com/documentation/grid/api-grid.html?lang=typescript#cellselecting 

https://ej2.syncfusion.com/documentation/grid/api-grid.html#cellselected 

Please get back to us if you need further assistance. 

Regards, 

Venkatesh Ayothiraman. 

[nimue]

Hi Venkatesh,

Thank you for your answer, I adopted the second solution you proposed to me and it was just what I was looking for.

Thanks again.

Barbara Inzitari

[Venkatesh Ayothi Raman]

Hi Barbara, 

 

Thanks for the update. 

 

 

We are very happy to hear that your requirement is achieved. Please let us know if you have any further assistance on this. 

 

 

Regards, 

Venkatesh Ayothiraman.