On click on grid's cell need to select only clicked cell, not entire row

On click on grid’s cell the entire row of the grid (with clicked cell) is selected completely.

But I need to select only the clicked cell, row must be stay unselected. How to achieve this?

Here is my grid

 <igx-grid igxPreventDocumentScroll #grid1 [data]="data" 
    [width]="'100%'" [height]="'100%'" 
    [autoGenerate]="false" 
    [displayDensity]="'cosy'"
    [rowSelection]="'single'"
    [columnHiding]="true"
    [primaryKey]="'id'"
    paste-handler (onDataProcessed)="dataPasted($event)"
    (onFilteringDone)="filteringDone($event)"
    (onSortingDone)="sortingDone($event)">
</igx-grid>

 

Hello,

Thank you for the provided code snippet. It helped me a lot.

My suggestion  for achieving your requirement is setting the rowSelection to none

[rowSelection]="'none'"

Alternatively,  you could remove it since none is the default value for the rowSelection input.

Here could be found a sample application that demonstrates this behavior. Please test it on your side and let me know if I may be of any further assistance.

Sincerely,
Teodosia Hristodorova
Associate Software Developer

Hello, Teodosia. Thanks for reply. I need [rowSelection]=”‘multiple”, not even “single” – as mentioned in my question.
So far I have managed to achieve this goal only with adding of boolean flag for “cell-Selected” event in my js code and checking it in “onRowSelectionChange” handler.

<igx-grid

…

(onSelection)=”onCellSelection($event)”
(onRowSelectionChange)=”onRowSelectionChange($event)”>
</igx-grid>

js code:

cellSelected : boolean = false;

public onCellSelection(event) {
    this.cellSelected = true;
}

public onRowSelectionChange(event) {
    if (this.cellSelected){
       event.cancel = true;
       this.cellSelected = false;
   }
}

 

It looks quite ugly, of course. Would be nice to get the same result by adjustment of some grid settings.
Is it possible?

Hello,

By design selection feature provides either row or cell selection and the described behavior should be achieved manually, as in your approach by handling igx-grid events. Having this in mind, your workaround in this case looks good.

Let me know if I may be of any further assistance.

Sincerely,

Teodosia Hristodorova

Associate Software Developer