Bind a column tooltip for cells to a model property

[DoomerDGR8]

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.

[DoomerDGR8]

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.

[Neli]

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

[DoomerDGR8]

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.

[Neli]

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