pop up a dynamic component on hover over a cell in grid

[Jyothi]

Hi,

I am trying to achieve the following.

When hovering over a cell of the grid, pop up a dynamic component. For this I need to be able to know the column name, row index, so I can pass it to the parent app, so it can set the data to the dynamic component based on the selected row.

I was able to achieve this on row selection. emitting selectionChanged event to the main app. 

Question is how cna we do this on hover.

in single-grid

<ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
            <div cell [title]="(column.someField!= null) ? column.fieldAccessor(dataItem, dataItem[column.tooltipField]) : dataItem[column.tooltipField || column.field] | facetsData">
              {{ (column.someField != null) ? column.fieldAccessor(dataItem, dataItem[column.field]) : dataItem[column.field] 
              }}

<some-dynamic *ngIf="column?.info" [iconColor]="'white'"
  [dynamicPopupComponent]="column.info.displayComponent"
  [dynamicData]="column.info.displayData"
  [displayPosition]="column.info.displayPosition">
</some-dynamic>
            </div>
  </ng-template>


I have multiple grids in a for loop . The main app basically uses the multi-grid component to render multiple grids.

<div *ngFor="let gridData of gridDataRows; let indexOfgrid=index;" style="margin-bottom:25px">
<single-grid #multiGrid [settings]="settings[indexOfgrid]" [data]="gridData" 
...
<single-grid>
</div>

main app  -- this app need to know what cell was hovered over along with the row index and  column name.
<multi-grid 
... all the inputs >
</multi-grid>

Any help is greatly appreciated.

REgards,

Jyothi

  

[Jyothi]

Any one has any insight into this? All I am trying to achieve a pop up on hover over a cell with dynamic data.

[Yanmario]

Hi Jyothi,

I'm afraid that the Grid component doesn't support such a feature out-of-the-box. Such a custom functionality could be achieved by attaching Event Listener to the grid table tr elements on mouseenter that will allow targeting the item index to retrieve the information of the row and execute custom logic base on the application requirements. Afterward, the mouseleave also has to be attached and handled to clear values or execute business logic.

StackBlitz example demonstrating the above approach:

https://stackblitz.com/edit/grid-hover-row-dataitem-3oegyq

Indeed the example is based on a custom implementation. Thus it isn't thoroughly tested and some further modifications may be required to adjust it to suite the specific use-case scenario requirements. The purpose of the example is to steer you in the right direction. Please use it at your own discretion as the demonstrated implementation isn't based on a supported built-in feature of Kendo UI for Angular.

I hope the provided information helps and steers you in the right direction.

Regards,
Yanmario
Progress Telerik

[Balaji]

Hi Yanmario,

Thank you for your response. We were able to use  a directive  for the cell and were able to get the items displayed within the cell itself.

But the requirement is to have a pop-up over the cell.  The content and layout is dynamic, so we have to pop up a dynamically created component. Any suggestions on that?

Regards,

Jyothi

[Jyothi]

Hi Yanmario, 

One more question. I see that we are getting the values of the row.

We need the functionality to pop up over a cell within a row. If the row has some flag set, than a dynamic component is popped up.

Regard,

Jyothi

[Yanmario]

Hi Jyothi,

Reading the requirement, it seems the best solution would be to use one of the following components:

• Popup component- https://www.telerik.com/kendo-angular-ui/components/popup/
• Tooltip component - https://www.telerik.com/kendo-angular-ui/components/tooltip/
• Dialog / Window components - https://www.telerik.com/kendo-angular-ui/components/dialogs/

It seems that the Popup component is the more proper choice for the requirement and with the combination of the CellTemplateDirective, it can popup and display the hover row or any other content that depends on the application business logic. I've managed to create a basic example of both components:

https://stackblitz.com/edit/angular-j9uvhj?file=app%2Fapp.component.ts

Indeed any of the above recommendations would require custom implementation. The provided example is to steer you in the right direction and further modification might be required depending on the use case scenario. However, that would be considered a developer effort.

I hope this helps.

Regards,
Yanmario
Progress Telerik