Hello Manikanta,

Thank you for posting in our community!

I have been looking at your question and I have prepared a small sample trying to reproduce the described behavior. In the attached sample I am using IgxGrid and for the “DeliverTo” column, I am using ng-template and the IgxCellEditorTemplateDirective, in order to apply a custom template for the column cells. In the template, I am wrapping an input, containing the current value, and an IgxDropDownComponent, where each dropdown item is generated with an *ngFor directive. Then, by using the selectionChanging event I am applying the logic for changing the cell’s value with the selected one.

Additionally, regarding your question about both cell and row selection, what I could say is that by design if row selection is enabled, when clicking (i.e., selecting) a certain cell, the corresponding row is selected as well, however, it is possible to select a row and perform range cell selection simultaneously. However, if your question addresses preventing row selection on cell click in order to select only the cell and at the same time to be able to select a row through the row selectors (i.e., checkboxes), an approach I could suggest is using IgxGrid’s onRowSelectionChanging event and checking whether the selection is performed through the row selectors or through cell click and cancel the row selection event if a cell is clicked. I have included this approach in the attached sample as well.

On my side, everything works as expected and as it could be observed in the attached GIF file, when entering edit mode for any cell in the “DeliverTo” column and clicking on the cell or the arrow icon, the IgxDropDown is toggled with different cities as options. Then, after selecting one of the options, the cell’s value is updated with the value of that option. Afterwards, when preforming cell selection (Ctrl + click) and then row selection through the row selectors, both selections are done simultaneously and accordingly.

Here could be found my sample for your reference. Please test it on your side and let me know if you need any further assistance.

If this is not an accurate demonstration of what you are trying to achieve, please feel free to modify it and send it back to me along with steps to reproduce.

Looking forward to hearing from you.

Sincerely,
Riva Ivanova
Entry Level Software Developer

// component.html
<igx-grid
    #grid
    (cellClick)="onCellClick($event)"
    (doubleClick)="onDoubleClick($event)"
> </igx-grid>

// component.ts
public onCellClick(args: IGridCellEventArgs) {
    if (args.cell.value === 'Rome') {
        args.cell.editMode = false;
    }
}
public onDoubleClick(args: IGridCellEventArgs) {
    if (args.cell.value === 'Rome') {
        args.cell.editMode = false;
    }
}

Both single and double click events should be handled, because as mentioned in our official documentation here, by design if the user performs a single click on an editable cell it will enter edit mode if the previously selected cell was in edit mode.

Additionally, in order to demonstrate my suggestion, I have modified the previously attached sample and it could be found here. In the attached sample I am using the abovementioned approach and when performing a single or double click on the cell with the value “Rome”, it does not enter edit mode (i.e., the dropdown is not displayed).

Please test this approach on your side and let me know if you need any further assistance.

Looking forward to your reply.

Sincerely,
Riva Ivanova
Entry Level Software Developer