This is a migrated thread and some comments may be shown as answers.

Kendo Grid ToolTip with line break

8 Answers 711 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Hadas
Top achievements
Rank 1
Hadas asked on 20 Sep 2018, 05:44 AM

HI,

I am using the Kendo grid tooltip with angular 4 as is this example

https://stackblitz.com/edit/angular-3yujdm-eqvgqg?file=app/app.component.ts

 

When I have a long tooltip in my title is it possible to add a line break without using ng-template?

 

Thanks 

8 Answers, 1 is accepted

Sort by
0
Dimiter Topalov
Telerik team
answered on 20 Sep 2018, 11:46 AM
Hello Hadas,

You set the Tooltip width via the tooltipWidth option and longer text will be wrapped automatically:

https://stackblitz.com/edit/angular-3yujdm-89ty7j?file=app/app.component.ts

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Hadas
Top achievements
Rank 1
answered on 02 Oct 2018, 07:38 AM

Thank you for the reply.

But your solution is not enough for me, since I have different lengths of tooltips some have a few line breaks in them.

Is there another way I can do this?

0
Dimiter Topalov
Telerik team
answered on 03 Oct 2018, 12:27 PM
Hi Hadas,

The suggested solution will wrap the text so longer text will be rendered in more lines than shorter one, e.g. it will have as many line breaks as necessary so that all content is displayed in the provided width (height will vary), e.g.:







Can you please specify in further details what the desired behavior and layout is (ideally with some visual like screenshot) and how it differs from the current one, so I can try to provide an alternative approach that is better suited to the specific scenario, if one is available? Thank you in advance.

Regards,
Dimiter Topalov
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Hadas
Top achievements
Rank 1
answered on 03 Oct 2018, 12:41 PM

I guess I wasn't clear enough

I need my tool tip to look like this , for example:

Name: Hadas

Age: 25

City: NY

 

In your solution it might look like this :

Name: H

adas Age:

25 City: N

Y

Was I clear enough?

 

 

 

0
Dimiter Topalov
Telerik team
answered on 05 Oct 2018, 10:01 AM
Hi Hadas,

Thank you for the clarification. In this case using the Tooltip template seems the only option as you can provide the desired line breaks in the markup, e.g.:

https://stackblitz.com/edit/angular-3yujdm-jano3l?file=app/app.component.ts

You can pass all data item properties that have to be displayed in the Tooltip like custom attributes of the anchor element.

Regards,
Dimiter Topalov
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Hadas
Top achievements
Rank 1
answered on 07 Oct 2018, 10:50 AM

Hi,

The example you put in the reply doesn't work well. the tooltip doesn't show the value from the dataItem

{{ anchor.nativeElement.getAttribute("prname") }} = null

What can be done?

Thanks

 

 

 

0
Dimiter Topalov
Telerik team
answered on 08 Oct 2018, 09:54 AM
Hi Hadas,

The runnable examples are for illustrative purposes only and are not supposed to be a full-blown solution, but rather to demonstrate how would a suggested idea work in the context of the Kendo UI for Angular components.

For example, the last demo shows how to bind custom attributes to the elements within the Grid cell template so that data item property values can be "transferred" from the Grid to the Tooltip template and used accordingly within it.

Further custom logic would be required to display some (or all) of the data item properties within the template depending on which of the properties are bound as attributes on the SPAN element. For example the following adjustment demonstrates how to display only the properties that are actually present as attributes:

https://stackblitz.com/edit/angular-3yujdm-jano3l?file=app/app.component.ts

The Tooltip template looks like this:

<ng-template #template let-anchor>
   <ng-container *ngIf="anchor.nativeElement.getAttribute('id')"><span>ID: {{ anchor.nativeElement.getAttribute("id") }}</span><br /></ng-container>
   <ng-container *ngIf="anchor.nativeElement.getAttribute('prname')"><span>Name: {{ anchor.nativeElement.getAttribute("prname") }}</span><br /></ng-container>
   <ng-container *ngIf="anchor.nativeElement.getAttribute('price')"><span>Price: {{ anchor.nativeElement.getAttribute("price") }}</span><br /></ng-container>
   <ng-container *ngIf="anchor.nativeElement.getAttribute('quantity')"><span>Quantity: {{ anchor.nativeElement.getAttribute("quantity") }}</span><br /></ng-container>
   </ng-template>

Entries are displayed only if the SPAN element, used in the Grid template has the respective custom attributes. Thus the Tooltip for the first column displays the Name, Price, and Quantity:

<kendo-grid-column field="ProductID" title="ID" width="40" [title]="dataItem?.ProductID">
              <ng-template kendoGridCellTemplate let-dataItem>
                <span [attr.prname]="dataItem.ProductName"
                  [attr.price]="dataItem.UnitPrice"
                    [attr.quantity]="dataItem.QuantityPerUnit">{{dataItem.ProductID}}</span>
              </ng-template>
            </kendo-grid-column>

... while the Tooltip for the second column displays the ID and Name only:

<kendo-grid-column field="ProductName" title="Name" width="250">
             <ng-template kendoGridCellTemplate let-dataItem>
               <span [title]="dataItem.ProductID"
                 [attr.id]="dataItem.ProductID"
                 [attr.prname]="dataItem.ProductName"
               >{{dataItem.ProductName}}</span>
             </ng-template>
 
Regards,
Dimiter Topalov
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Hadas
Top achievements
Rank 1
answered on 09 Oct 2018, 08:50 AM

Now it works.

I had a problem with setting this [attr.prname]

But now its Ok

Thanks

Tags
General Discussions
Asked by
Hadas
Top achievements
Rank 1
Answers by
Dimiter Topalov
Telerik team
Hadas
Top achievements
Rank 1
Share this question
or