We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Customize Cell

Thread ID:

Created:

Updated:

Platform:

Replies:

150529 Jan 10,2020 12:26 AM UTC Jan 10,2020 07:02 AM UTC Angular - EJ 2 1
loading
Tags: Schedule
Umair Ahmed
Asked On January 10, 2020 12:26 AM UTC

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 [Syncfusion]
Replied On January 10, 2020 07:02 AM UTC

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, 
 
 
.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> 
 
 
Kindly try the above sample and revert us for further assistance with this. 

Regards, 
Vengatesh 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon