Bind a column tooltip for cells to a model property

5 posts, 0 answers
  1. Hassan
    Hassan avatar
    158 posts
    Member since:
    Aug 2010

    Posted 12 Jul 2020 Link to this post

    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.

  2. Hassan
    Hassan avatar
    158 posts
    Member since:
    Aug 2010

    Posted 12 Jul 2020 Link to this post

    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.

  3. Neli
    Admin
    Neli avatar
    397 posts

    Posted 14 Jul 2020 Link to this post

    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

  4. Hassan
    Hassan avatar
    158 posts
    Member since:
    Aug 2010

    Posted 14 Jul 2020 in reply to Neli Link to this post

    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.

  5. Neli
    Admin
    Neli avatar
    397 posts

    Posted 16 Jul 2020 Link to this post

    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

Back to Top