Opening of Dialog/Popup on click of any column data in Igx_grid

Hi All,

I have a requirement which includes to open a popup or dialog on click of a particular column in Igx_grid, Any Idea how can we implement this feature using Ignite UI.

An Example for the solution would be very much helpful.

Thanks,

Subham

Hello,

A way to achieve your goal would be to use the grid's onCellClick event, which will give you information about the row/column you have clicked, and then you can open the dialog programatically.

onCellClick(event: IGridCellEventArgs) {

    if (event.cell.rowIndex % 2 === 0) {

      this.dialog.open();

    }

  }

The following code will open a dialog on alternate rows. 

Attached is an example for further reference.

Sincerely,

Tihomir Tonev

Associate Software Developer
Infragistics

Hi Tonev,

The requirement for is like: 

on click of a "specific column data", i should open a dialog an not on any other columns click and also the column data which i clicked must be display on the popup, so can you please provide relevant info regarding this change.

A working stackblitz example would be very much helpful.

Thanks,

Subham Karan

Hello,

I understand the requirement, however without specifying which column data, and just "specific column data", it could mean anything.

I have modified the sample to display a dialog with the column data clicked. 

Please note that when clicking on a cell, the event arguments return this cell, which holds information about row, column, the grid itself, so you can use this information and decide whether this is the specific cell.

If you need help to retrieve a certain value, please let me know.

Sincerely,
Tihomir Tonev
Associate Software Developer
Infragistics

Hi Tonev,

Thank you for the help, is there a way for highlighting a column which a user can easily identify to click on?

For ex:if i want only TopSpeed(column) to be clickable, Can we have  custom style to highlight the column as href may be?

An working live example would be very much helpful.

Thanks,

Subham

Hello,

Yes, you can style all cells conditionally in the grid. Here is an example setting the background of Top Speed column to to  be flashing -> link.

More information about conditional styling can be found in our documentation here.

Should you have any further questions, please let me know.

Sincerely,
Tihomir Tonev
Associate Software Developer
Infragistics