determine column clicked in rowselecting event

Question

Hello all,I wish to cancel the rowselecting event in an ejgrid based upon which column the mouse pointer is on when the row is clicked.  I can't seem to find any way to determine the column that was clicked.  Here is my code:               grid = new ej.grids.Grid({                dataSource: dataobj,                columns: [                    { field:  "1", "headerText": "Field 1"},                    { field:  "2", "headerText": "Field 2"},                    { field:  "3", "headerText": "Field 3"},                    { type: "checkbox", "headerText": "selected", width: 50 },                ],                gridLines: 'Both',                height: gridheight-@Model.ListDataHeaderHeight,                rowSelected: rowSelected,                rowSelecting: rowSelecting,            });            grid.appendTo('#Grid1');            function rowSelecting(args) {               if ( something ) {                    args.cancel=true;               }            }Thanks!

Rajapandi Ravi · Answer

Hi Jim, 

From checking your query, we understand you want to prevent the rowSelection in rowSelecting event. Based on your query we have prepared a sample and prevent the row selection based on the condition in rowSelecting event. Please refer the below code example and sample for more information. 





App.component.ts 
 
let grid: Grid = new Grid( 
        { 
            dataSource: employeeData, 
            allowSelection: true, 
            rowSelecting: function (args) { 
              if((args.data as any).EmployeeID%2=== 0) {  //Based on condition 
                args.cancel = true; 
              } 
            }, 
            columns: [ 
                .  .  .  .  .  .  . 
                .  .  .  .  .  .  . 
                } 
            ] 
        }); 
    grid.appendTo('#Grid'); 
 

Sample: https://stackblitz.com/edit/313iqd?file=index.ts 






Note: In our Grid, we don’t have the support to select the column. We only have rowSelection. 
 
Regards,Rajapandi R

Jim Oliver · Answer

Your example doesn't differentiate between the columns at all.

I don't need to select the column...I need to prevent the selection of the row based on which column was clicked. Is there no way to get the column position on a mousedown before the click event?

Rajapandi Ravi · Answer

Hi Jim, 

Thanks for the update 

From checking your query we understand you want to prevent the selection based on column click. You can achieve your requirement by using rowSlecting event. In this event we can get target argument, by using this argument we can get the column index. So based on the column index we can prevent the rowselection. Please refer the below code example and sample for more information. 

In this below sampe, we have prevent the selection based on the FirstName column Click. 





 
let colindex = 0; 
   let grid: Grid = new Grid( 
        { 
            dataSource: employeeData, 
            allowSelection: true, 
            rowSelecting: function (args) { 
              colindex = +(args.target as any).getAttribute('aria-colindex');        //get the column index 
              if(grid.getColumnByIndex(colindex).field === "FirstName") { 
                args.cancel = true; 
              } 
            }, 
            columns: [ 
                { field: 'EmployeeID', headerText: 'Employee ID', textAlign: 'Right', width: 135 }, 
                { field: 'FirstName', headerText: 'FirstName', width: 125 }, 
                { field: 'Title', headerText: 'Title', width: 180 }, 
                { 
                    field: 'HireDate', headerText: 'Hire Date', textAlign: 'Right', 
                    width: 135, format: { skeleton: 'yMd', type: 'date' } 
                } 
            ] 
        }); 
    grid.appendTo('#Grid'); 
 

Sample: https://stackblitz.com/edit/313iqd-fmxrms?file=index.ts 

Regards, 
Rajapandi R