Customize Cell

[Umair Ahmed]

Hello,

We are using the "oneventRendered" event to customize the default cell text, the formatting goes away, is there a way to auto grow the cell size and wrap text if the contents wont fit ? We are setting the text via args.elements.innerHTML

Also what is the best way to customize the tooltip, we need to display a couple of short paragraphs via tooltip window.

Thanks.

[Vengatesh Maniraj]

Hi Umair Ahmed, 

 

Greetings from Syncfusion Support. 

 

Q1: We have prepared a sample based on your shared scenario by applying the CSS styles, which can be viewed from the below sample link, 

 

Sample: https://stackblitz.com/edit/angular-h8ur7i-2vtz1z?file=app.component.ts 

 

.template-wrap { 

  white-space: normal; 

} 

 

Q2: It is possible to customize the display of needed event information on tooltip by making use of the tooltipTemplate option within the eventSettings like below, 

 

App.component.ts 

 

public eventSettings: EventSettingsModel = { 

        dataSource: eventsData, 

        enableTooltip: true, 

    }; 

 

App.component.html 

 

<ng-template #eventSettingsTooltipTemplate let-data> 

        <div class="tooltip-wrap"> 

          <div class="content-area"> 

            <div class="name">{{data.Subject}}</div> 

 

            <div *ngIf="data.City != null && data.City !=undefined"> 

              <div class="city">{{data.City}}</div> 

            </div> 

            <div class="time">From&nbsp;:&nbsp;{{data.StartTime.toLocaleString()}} </div> 

            <div class="time">To&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:&nbsp;{{data.EndTime.toLocaleString()}} 

            </div> 

          </div> 

        </div> 

      </ng-template> 

 

sample link: https://stackblitz.com/edit/angular-khprlr?file=app.component.ts 

API links: https://ej2.syncfusion.com/angular/documentation/api/schedule/eventSettingsModel/#tooltiptemplate 

 

Kindly try the above sample and revert us for further assistance with this. 

Regards, 

Vengatesh