Hi,
I have a scenario where in the grid I should be able to select a row and a column cell for multiple operations where a particular column cell on double click should act as a drop down and other than that column where ever user clicks on the row it should act as a row.
Is this possible in IgxGrid in Angular to have both row and cell select in the same grid?
Thanks,
Manikanta Vundavalli
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 IvanovaEntry Level Software Developer
Hello Riva,
This is the accurate demonstration of what I'm trying to achieve and Thank you very much for the help.
I am glad that you find my suggestion helpful.
Thank you for using Infragistics components.
Regards,Riva IvanovaEntry Level Software Developer
And I have the below scenario.
Consider I have three rows and in one of the row for one column I should not display the dropdown based on some condition and I have the below template where if the condition is true I'm displaying the select drop down and else in other case it has to just display the value of the column and when we do a double click on that column nothing should happen.
But in my case when I do a double click the value is hiding and then when I select another cell or row then the value is getting displayed.
I have been looking at your question and an approach I could suggest is using IgxGrid’s cellClick and doubleClick events as these events provide access to the cell property. Then, inside the methods that handle these events should be applied the custom logic for displaying the dropdown and if a cell does not meet this condition, its editMode should be set to false. This should look similar to the following:
// 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.