Prevent cell selection on first column

Question

Hi,I have a grid that uses (Y&X axis)data from an API(json) and the first column always needs to be non-selectable(left or rightclick, keyboard) same as the header which is already non-selectable. selectOptions: SelectionSettingsModel = { cellSelectionMode: 'Box', type: 'Multiple', mode: 'Cell' };

In short:

Is there a easy way to prevent the user from selecting any cells(in anyway) in a specific column(in my case the first column aka 0)?  Thank you in advance!

Sujith Kumar Rajkumar · Answer

Hi Laurens, 
 
Greetings from Syncfusion support. 
 
You can achieve your requirement of cancelling the cell selection action for certain column cells by setting the ‘cancel’ property of the cellSelecting event(triggers before the Grid cell is selected) arguments as false if the current clicked target is the required column(can be checked by passing the target element to the Grid’s getRowInfo method). 
 
This is demonstrated in the below code snippet, 
 




// Grid’s cellSelecting event handler 
onCellSelecting(args) { 
    // Retrieves current row and column information from the target element 
    let curRowInfo = this.grid.getRowInfo(args.currentCell); 
    if (curRowInfo.column.field === 'CustomerName') { 
        // Cell selection is cancelled if the column is ‘CustomerName’ 
        args.cancel = true 
    } 
} 
 
We have prepared a sample based on this for your reference. You can find it below, 
 
Sample: https://stackblitz.com/edit/angular-wwr98k?file=app.component.ts 
 
API: https://ej2.syncfusion.com/angular/documentation/api/grid/#getrowinfo 
        https://ej2.syncfusion.com/angular/documentation/api/grid/#/cellselecting 
 
Please get back to us if you require any further assistance. 
 
Regards, 
Sujith R

Laurens Albers · Answer

Hi,Ah, I see that i used a wrong statement in my question.  "in anyway" -> "every possible way".Your answer prevents the user from clicking on the cell, but in my scenario the cell should not be selectable in every possible scenario which I mentioned earlier: "left or rightclick, keyboard".-In the first case scenario this means click should not be possible (your example works for that), but that also means that the user cannot make a box selection(starting outside & holding down mouse) with his/her mouse. And that doesn't work in your example, since that example(this.grid.getRowInfo()) only checks the initial column.-In the last case scenario this means that holding down shift with directional keys to select multiple cells should also not work in that column(also starting outside that column).In short: the column needs to be fully ignored when it comes to every possible selection that the user can make.

Sujith Kumar Rajkumar · Answer

Hi Laurens,

Based on the query we would like to inform you that the cell selection can only be prevented on direct single clicks, because with box selection and multiple selection(with shift key) the entire cell range will be selected by default. And for these cases the selection cannot be prevented which is the default behavior. However if your requirement is just to show in UI that the selection has not occurred, then you can achieve it by customizing the selection background style for the required column cell elements alone. This can be done by using the columns customAttributes property to add a custom class for the required column cells and apply background style to it as demonstrated in the below code snippets,

app.component.html

<e-column field='CustomerName' [customAttributes]='customAttributes'></e-column>

app.component.ts

public ngOnInit(): void {

this.customAttributes = { class: 'custom_style' };

}

app.component.css

.custom_style {

background-color: white !important;

}

We have modified the previously shared sample based on this for your reference. You can find it below,

Sample: https://stackblitz.com/edit/angular-wwr98k-gm8q3r?file=app.component.html

Documentation: https://ej2.syncfusion.com/angular/documentation/grid/how-to/example-of-angularjs-ui-grid-to-customize-column-styles/

If this does not help achieve your requirement, then please elaborate on your exact requirement based on which we will check and provide the further details.

Regards,

Sujith R