Page gets unresponsive when IX-tooltips are used in combination with grids(Kendo Grid/Normal grid)

[RawalA]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I have not leaked any internal/restricted information like screenshots, videos, code snippets, links etc.

What happened?

While using ix-tooltip in combination with grid , page becomes unresponsive.

Angular version : 17.1.2 Siemens-ix-angular version: 2.0.4 asset-data.json

What type of frontend framework are you seeing the problem on?

Angular

Which version of iX do you use?

2.0.4

Code to produce this issue.

<!-- HTML CODE -->
<kendo-grid
  [kendoGridBinding]="gridData"
  [sortable]="true"
  [filterable]="true"
  (sortChange)="sortChange($event)"
  (filterChange)="onFilterChange($event)"
>
  <kendo-grid-column field="featureId" title="Asset Name"> </kendo-grid-column>
  <kendo-grid-column field="featureName" title="Feature name">
  </kendo-grid-column>
  <kendo-grid-column
    field="featureDescription"
    title="Feature description"
  ></kendo-grid-column>
  <kendo-grid-column field="featureCategory" title="Feature category">
  </kendo-grid-column>
  <kendo-grid-column
    field="parameterName"
    title="Parameter name"
    class="custom-cell"
  >
    <ng-template kendoGridCellTemplate let-dataItem>
      <div
        *ngFor="let param of dataItem?.parameters"
        [attr.data-tooltip]="param.ParamId"
      >
        {{ param.parameterName }}
        <ix-tooltip for="[data-tooltip='{{ param.ParamId }}']"
          >Tooltip: {{ param.parameterName }}</ix-tooltip
        >
      </div>
    </ng-template>
  </kendo-grid-column>
  <kendo-grid-column
    field="candidateValueEnabled"
    title="Target value enabled"
    class="custom-cell"
  >
    <ng-template kendoGridCellTemplate let-dataItem>
      <div *ngFor="let param of dataItem?.parameters">
        <ix-toggle
          [checked]="param.candidateValueEnabled"
          [textOff]="'No'"
          [textOn]="'Yes'"
          [disabled]="param.candidateValueEnabled === 'Disabled'"
        ></ix-toggle>
      </div>
    </ng-template>
  </kendo-grid-column>
  <kendo-grid-column field="candidate" title="Target value" class="custom-cell">
    <ng-template kendoGridCellTemplate let-dataItem>
      <div *ngFor="let param of dataItem?.parameters">
        <input
          class="form-control"
          defaultValue="Some example text"
          placeholder="Enter text here"
          type="text"
          [value]="param.candidate"
          [(ngModel)]="param.candidate"
        />
      </div>
    </ng-template>
  </kendo-grid-column>
  <kendo-grid-column
    field="status"
    title="Target value status"
    class="custom-cell"
  >
    <ng-template kendoGridCellTemplate let-dataItem>
      <div *ngFor="let param of dataItem?.parameters">
        <em
          [class]="
            param.status === 'Ok' ? 'glyph glyph-success' : 'glyph glyph-minus'
          "
          style="color: green; margin-right: 5px"
        ></em
        >{{ param.status }}
      </div>
    </ng-template>
  </kendo-grid-column>
</kendo-grid>

-------------COMPONENT CODE---------------
@Component({
  selector: 'app-with-cell-template',
  templateUrl: './with-cell-template.component.html',
  styleUrls: ['./with-cell-template.component.scss'],
})
export class WithCellTemplateComponent implements OnInit, AfterViewChecked {
  gridData!: [];
  startTime!: number;
  endTime!: number;

  constructor(private gridDataService: GridDataService) {}

  ngOnInit(): void {
    this.startTime = Date.now();
    this.gridDataService.getGridData().subscribe((resp) => {
      let featureList: any = [];
      resp.forEach((item: any) => {
        featureList = featureList.concat(item.features);
      });
      this.gridData = featureList;
    });
  }

  ngAfterViewChecked(): void {
    // this.endTime = Date.now();
    // console.log('Time taken to render the grid:', this.endTime - this.startTime);
  }

  sortChange(_e: any) {
    console.log(_e);
  }

  onFilterChange(_e: any) {
    console.log(_e);
  }
}

----------------------
NOTE: JSON is attached in above section

[matthiashader]

Hi @RawalA! Thank you for reaching out. Could you kindly provide us with a running stackblitz example?

[RawalA]

Below is the stackblitz link for a sample project https://stackblitz.com/edit/angular-fc1kvu?file=src%2Fapp%2Fproducts.ts

Steps to reproduce :

1. scroll the grid to some level
2. Suddenly click on edit button of any row You'll be able to see something like this

[RawalA]

If we remove IX-tooltip from html, it will work properly. But with if grid and ix-tooltip combination is used, it starts throwing page unresponsive error.

[RawalA]

Any leads on above issue ?

[matthiashader]

@RawalA thanks for the provided Stackblitz, we will habe a look into it in an upcoming sprint

[github-actions[bot]]

🤖 Hello @RawalA

Your issue will be analyzed and is part of our internal workflow. To get informed about our workflow please checkout the Contributing Guidelines

JIRA: IX-1280

[RawalA]

Hi Team , please let us know when can we get some solution for above issue .

[danielleroux]

@RawalA Looks like you are not familiar with ix-tooltip for-property (css selector), i try to explain it.

You are placing a ix-tooltip with an for-property which works like an css selector for class .any-class this result will match multiple elements, because you are using all the time the same selector each row.

You can fix this by providing unique selector e.g:

<ix-button [attr.data-tooltip-id]="dataItem.ProductID">Hover me {{dataItem.ProductID}}</ix-button>
<ix-tooltip id="tooltip-1" for="[data-tooltip-id='{{dataItem.ProductID}}']">Simple selector</ix-tooltip>

https://stackblitz.com/edit/angular-fc1kvu-gwxhma (You have to me sure that ProductID is unique)

I close this issue because its not an issue in the tooltip.