Questions on Kendo UI for Angular Forum

2 questions

1 answer

70 views

Kendo tooltip not recognizing the <br> tag so whatever we pass it is taking in a string format. Even if we pass the content with break line still it is take as a single string value. Tried different ways to alter the existing logic still didn't work.

Actual output: "First<br>Second<br>Third"

Expected output:

First

Second

Third

HTML:

<kendo-grid [data]="rowData" style="height:300px" [resizable]="true">
<kendo-grid-columnfield="charge_Desc"title="Filed Charges"[width]="150"[headerStyle]="{'font-weight': 'bold'}">
      <span kendoTooltip [title]="dataItem.victims">
        <ng-template kendoGridCellTemplate let-dataItem>
          <div [innerHTML]="formatDescription(dataItem.charge_Desc)"></div>
        </ng-template>
      </span>
</kendo-grid-column>
</kendo-grid>
 
 
TS:
import { Component,OnInit, Input } from '@angular/core';
import { bailBondTabRowData } from 'src/app/models/constants';
import { ConsolidateSubjectService } from 'src/app/services/consolidate-subject.service';
@Component({
  selector: 'app-bail-bond-tab',
  templateUrl: './bail-bond-tab.component.html',
  styleUrls: ['./bail-bond-tab.component.scss']
})
export class BailBondTabComponent implements OnInit {
  columnDefs: any[] = [];
  rowData:any;
  public tooltipShowDelay = 0;
  public tooltipHideDelay = 2000;
  @Input() bailBondData:any;
  toolTipContent: any;
  constructor(public ConsolidateSubjectService:ConsolidateSubjectService) {
    this.columnDefs = bailBondTabRowData;
   
  }
  ngOnInit() {
      console.log(this.bailBondData,"Notes_Text");
      this.rowData = this.bailBondData.map((item:any) => ({
        ...item,
        Event_Date:this.ConsolidateSubjectService.convertDateFormat(item.Event_Date)
      }));
  }
  formatDescription(charge_Desc: string): string {
    return charge_Desc.replace(/(?:\r\n|\r|\n)/g, '<br>');
  }
}
 
 