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

Bind a column tooltip for cells to a model property

4 Answers 60 Views
Grid
This is a migrated thread and some comments may be shown as answers.
DoomerDGR8
Top achievements
Rank 2
Iron
Iron
Iron
DoomerDGR8 asked on 12 Jul 2020, 07:34 AM

Hi!

I have been scouring through the forums and documentation but the way a grid gets tooltip is very confusing to me. we need to have a separate tooltip control and traverse the grid and apply tooltip in it.

Is there a way such as:

01.columns: [ {
02.        field: "ParkingCardId",
03.        title: "Card Id",
04.        template: '<a href="@Url.Action("NewRequest", "Parking")?cardId=#=ParkingCardId#&cardTypeString=View">#=ParkingCardId#</a>'
05.    }, {
06.        field: "DateRequested",
07.        title: "Requested",
08.        template: '#= kendo.toString(kendo.parseDate(DateRequested), "dd-MMM-yy")#'
09.    }, {
10.        field: "Name",
11.        title: "Full Name"
12.    }, {
13.        field: "AirportPassNumber",
14.        title: "Pass No."
15.    }, {
16.        field: "DrivingLicenseNumber",
17.        title: "D.L No"
18.    }, {
19.        field: "VehicleNumber",
20.        title: "Car No."
21.    }, {
22.        field: "Status",
23.        title: "Status"
24.        tooltip: "<Name of a property on the model>"
25.    }, {
26.        field: "PassExpiryDate",
27.        title: "Expiry Date",
28.        template: '# if (PassExpiryDate !== null) {# #=kendo.toString(kendo.parseDate(PassExpiryDate), "dd-MMM-yy")# #} else { # <span></span> # } #'
29.    }, {
30.        field: "StatusId",
31.        title: "Action",
32.        template:
33.            "#if (IsExpired && StatusId === 5) {# <a href='@Url.Action("NewRequest", "Parking")?cardId=#=ParkingCardId#&cardTypeString=Renew Card'>Renew</a> #} else {# #}#" +
34.            "#if ((IsExpired && StatusId === 5) && StatusId === 0) {# | #} else {# #}# " +
35.            "#if (StatusId === 0) {# <button type='button' class='k-button k-danger' onclick='openCancelDialog(#=ParkingCardId#)'>Cancel</button> #} else {# #}#"
36.    },{
37.        field: "Invoice",
38.        title: "Invoice",
39.        template: '#if (Status == "Print & Pay") {# <a onclick=PrepareInvoice("#=ParkingCardId#")>Print</a> #} else {# #}#'
40.    }
41.]

 

Check line # 24.

4 Answers, 1 is accepted

Sort by
0
DoomerDGR8
Top achievements
Rank 2
Iron
Iron
Iron
answered on 12 Jul 2020, 01:29 PM

So after a bit of trial and error, I found this way:

1.{
2.    field: "Status",
3.    title: "Status",
4.    template: "#if (StatusId === 8) {# <span title='#=ApproveRejectComments#'>#=Status#</span> #} else {# <span>#=Status#</span> #}#"
5.}

 

Works.

0
Neli
Telerik team
answered on 14 Jul 2020, 02:16 PM

Hi Hassan,

I am glad to hear you have managed to resolve the issue and thank you for sharing your solution.  

By default, the Kendo Tooltip is using the title of the element and renders it as its content. You could read more on the following link from the Tooltip documentation. 

- https://docs.telerik.com/kendo-ui/controls/layout/tooltip/overview#initializing-the-tooltip

I will link below also a How-To article regarding showing Tooltip on Grid column record, as it could be helpful for the other users in the Forum.

- https://docs.telerik.com/kendo-ui/knowledge-base/grid-with-kendo-ui-tooltip

Let me know if you have any other questions related to the current thread.

Regards,
Neli
Progress Telerik

0
DoomerDGR8
Top achievements
Rank 2
Iron
Iron
Iron
answered on 14 Jul 2020, 07:43 PM

Hi!

Thanks for the reply. I did see those threads you linked plus many more on the Grid and ToolTip forums. I'm not still not sure how I accomplish my requirement with a kendoTooltip. I did it but that's the default boring tooltip. Mine needs to be bound to a specific column and to a model property and shown only if there is content.

0
Neli
Telerik team
answered on 16 Jul 2020, 11:09 AM

Hello Hassan,

In case you need to return the value of the certain field of the underlying model in the Tooltip you could use the approach described in the article I have sent previously:

 content: function(e){
            var dataItem = $("#grid").data("kendoGrid").dataItem(e.target.closest("tr"));
            var content = dataItem.Text;
            return content;
}

All the fields of the model could be accessed through the dataItem object. 

The filter option of the Tooltip could be used to specify on which column you need the Tooltip to be displayed. 

Regarding displaying the Tooltip only when there is a content I would suggest you refer to the following thread from StackOverflow which provides two possible solutions:

- https://stackoverflow.com/questions/23297623/kendo-ui-conditionally-preventing-a-tooltip-from-being-displayed-on-a-grid-cell

I hope this helps.

Regards,
Neli
Progress Telerik

Tags
Grid
Asked by
DoomerDGR8
Top achievements
Rank 2
Iron
Iron
Iron
Answers by
DoomerDGR8
Top achievements
Rank 2
Iron
Iron
Iron
Neli
Telerik team
Share this question
or