Tooltip for each row of grid, populated dynamically?

[Software]

I have a kendo grid contains a list of people.  I would like to add a kendo tooltip to each row so that, in essence, a detail view for the selected row will be shown in the tooltip.  To do this I need to call a web service method when the tooltip is loaded, passing in the key value of the row, then I use a template to layout the content of tooltip.  I'm a bit stuck trying to figure out where to pass the key value of the row to the tooltip...  I'm doing this in pure javascript, so no server-side code is used at all.  The web service call to get the details must be a POST, not a GET, if that makes any difference...?

Here's what I have, which isn't even close to working (the grid populates fine, but the tooltips aren't working):

$grid.kendoGrid({
 dataSource: dsPeople,
 scrollable: { virtual: true },
 height: 600,
 resizable: true,
 selectable: "row",
 pageable: true,
 dataBound: function(e) {
  $("#grid").find("tr").kendoTooltip({
   content: People.GetPerson(e.data.Xref, 6012, '127.0.0.1', 'netname'),
   width: 680,
   height: 120,
   position: "bottom",
  });
 },
 columns: [
  { field: "FullName", title: "Name", groupable: false, resizable: true },
  { field: "StreetAddress", title: "Address", groupable: false, resizable: true },
  { field: "Sex", title: "S", groupable: true, resizable: false, width: 30 },
  { field: "Race", title: "R", groupable: true, resizable: false, width: 30 },
  { field: "Height", title: "Ht", groupable: false, resizable: false, width: 40 },
  { field: "Weight", title: "Wt", groupable: false, resizable: false, width: 40 },
  { field: "Age", groupable: true, resizable: false, width: 40 },
  { field: "DOB", groupable: false, resizable: false, format: "{0:MM/dd/yyyy}", width: 90 },
  { field: "Xref", title: "XREF", groupable: false, resizable: true, width: 70 }
 ],
 mobile: true
});

Can anyone point me to an example where something like this is being done?

Thanks!
Eddie

[Alexander Popov]

Hi Eddie,

I would recommend checking this example, which illustrates how similar behavior could be implemented.

Regards,
Alexander Popov
Telerik

[Software]

Alexander,

Thanks for your reply!  That got me a lot further along than I was before, but I'm still a bit stuck on populating a tooltip using a template, with data from an ajax call...  Here's what I've got so far:

<div id="grid" style="height: 380px"></div>
<script type="text/x-kendo-template" id="PersonTemplate">
    <div class="personSummary">
        <img src="http://testserver.com/photo.ashx?x=#=Xref#" alt="#=FullName#" class="photo" />
        <div class="summary">
            <div class="row">
                <div class="col-md-2">XREF: #=Xref#</div>
                <div class="col-md-2">Age: #=Age#</div>
                <div class="col-md-2">Sex: #=Sex#</div>
                <div class="col-md-2">Race: #=Race#</div>
            </div>
            <div class="row">
                <div class="col-md-3">POB City: #=PlaceOfBirthCity#</div>
            </div>
        </div>
    </div>
</script>

​
Here's my javascript code:

var dsPeople = People.GetPeople(search, 20);

var $grid = $("#grid");

$grid.kendoGrid({
    dataSource: dsPeople,
    scrollable: { virtual: true },
    height: 600,
    groupable: true,
    sortable: true,
    resizable: true,
    selectable: "row",
    navigatable: true,
    pageable: true,
    //detailTemplate: kendo.template($("#PersonTemplate").html()),
    //detailInit: detailInit,
    dataBound: function(e) {
        imagePreview(50,20);
    },
    columns: [
        {
            field: "AlertFlags",
            attributes: { "rel": "flags" },
            encoded: true,
            title: "Flags",
            groupable: false,
            resizable: false,
            width: 55,
            template: "<span class='flags' title='#=AlertFlagsHelp#'>#=AlertFlags#</span>"
         },
        {
            field: "Xref",
            title: "Pic",
            template:  "<a href='http://aserver.com/photo.ashx?x=#=Xref#' class='preview' title='#=FullName#'><img src='http://aserver.com/photo.ashx?x=#=Xref#&s=small' class='photoThumb' alt='#=FullName#' /></a>",
            resizable: false, groupable: false, width: 41
        },
        { field: "FullName", title: "Name", groupable: false, resizable: true },
        { field: "StreetAddress", title: "Address", groupable: false, resizable: true },
        { field: "Sex", title: "S", groupable: true, resizable: false, width: 30 },
        { field: "Race", title: "R", groupable: true, resizable: false, width: 30 },
        { field: "Height", title: "Ht", groupable: false, resizable: false, width: 40 },
        { field: "Weight", title: "Wt", groupable: false, resizable: false, width: 40 },
        { field: "Age", groupable: true, resizable: false, width: 40 },
        { field: "DOB", groupable: false, resizable: false, format: "{0:MM/dd/yyyy}", width: 90 },
        { field: "Xref", title: "XREF", groupable: false, resizable: true, width: 70 }
    ],
    mobile: true
})
.data("kendoGrid")
.bind("change", GetSelectedRow);

var $template = kendo.template($("#PersonTemplate").html());
var tooltip = $("#grid").kendoTooltip({
    filter: "tr", //this filter selects the first column cells
    position: "top",
    content: function(e){
        var dataItem = $("#grid").data("kendoGrid").dataItem(e.target.closest("tr"));
        var person = {
            GetSummary: true,
            RequestParameters: {
                IpAddress : '127.0.0.1',
                SystemsUserId : 1234,
                AppCode : 'Web Services',
                UniqueUserIdentifier : '3jh578y6f',
                Xref: dataItem.Xref
            }
        };
        $.ajax({
            type: "POST",
            url: "http://localhost:8333/Person",
            data: JSON.stringify(person),
            dataType: 'json',
            contentType: 'application/json',
            success: function(data){
                return $template(data);
            },
            error: function(error,statusText){
                return $template(error);
            }
        });
   }
}).data("kendoTooltip");

I can confirm that when I hover over a row the ajax runs and I DO get a full person object in the 'data' object that is returned.  I pass it to the template, but the tooltip I get is just an empty tooltip.  There is no content, so it does not use the template or the data, as far as I can tell...

Thanks again for your help!

[Alexander Popov]

Hello again Eddie,

Basically you need to have the template data before the content function finished executing, so you can use the template's output as return value. This could be accomplished in a couple of ways:

• Attach a mouse over event handler to the Grid's rows and once it's triggered make the Ajax call first and display the Tooltip when the response arrives 
• Use a synchronous call instead of asynchronous, thus ensuring that the template will be correctly rendered. Here is an updated example showing how this could be implemented.

Regards,
Alexander Popov
Telerik

[Bryan]

I'm just curious if Eddie got this working, since I'm in the same position. The provided example for the second method no longer seems to work, and the console returns a message about the synchronous http request being deprecated in jquery.

[Alexander Popov]

Hello Bryan,

Here is an updated example using a slightly different approach for populating the Tooltip's content. 

Regards,
Alexander Popov
Telerik

 

 

[Waleed]

Hey! I'm using a KendoRating in a C# GridView and the star rating would be present on every row of the Grid. As the user hovers the cursor over any of the stars I should see a KendoToolTip popping up, a particular label will be shown on every star there is. In my case I have all the stars displaying properly in my GridView for all rows, however I can only see ToolTip on the very first row of my Grid, the rest the of the rows do not show any tool tips, they're just blank. I followed a code example on Kendo documentation showing me how a simple tooltip can be shown alongside rating system. I searched almost everywhere but it only suggested me examples with KendoGrid which I wasn't using in my case and I'm unable to find a solution.
Please help!

[Misho]

Hello,

I created a dojo sample showing a grid with rating in each of the rows having Kendo Tooltip attached. The function that creates the rating gets the data item value and sets it to the rating. Kendo tooltip is attached to the rating wrapper by using its filter configuration, which specifies a selector for the elements within the container which will display the Tooltip.

function createRating(item,element) {
        var grid = $("#grid").getKendoGrid();
        var dataItem = grid.dataItem(element);
        var rating = $(element).find('.ratingInGrid');
        var myrating = rating.kendoRating({
          min: 1,
          max: 5,
          selection: "continuous",
          value:dataItem.rating
        }).data("kendoRating");

        myrating.wrapper.kendoTooltip({
                filter: ".k-rating-item",
                content: function (e) {
                    return e.target.data("title");
                }
            });
        
      }

I suggest you to use this approach as a reference and try implementing your customization in a similar manner. 

In case you are having further difficulties please isolate your setup in a sample fully runnable project where the issue could be observed and send it back together with reproduction details so we could successfully run it, debug it on our side and do our best to provide you with more detailed information and reliable solution.

I hope you will find this information useful.

 

Best Regards,
Misho
Progress Telerik

[Waleed]

Hello Misho,

I wanted to mention again that I wasn't using a KendoGrid system but rather a C# GridView, which means I'm not using a Kendo Events like 'databound' that you've mentioned in your example. I took reference from a code example here but as I posted earlier regarding my query, I was getting my kendo rating hearts/stars displayed in all rows and KendoToolTip in the first row only. The success scenario here I'm looking for is to have the tooltips displayed on all rows whenever I hover over the ratingSVG. Can you reconsider the issue I'm facing and guide me a little bit more?
Thanks!

01.<div class="table-responsive">
02.                    <asp:GridView ID="gvPBI" runat="server" CssClass="table m-0" OnRowDataBound="gvSummary_RowDataBound" ShowHeaderWhenEmpty="true" AutoGenerateColumns="false" EmptyDataText="No Record Present.">
03.                        <Columns>
04.                            <asp:BoundField HeaderStyle-CssClass="Hidden" ItemStyle-CssClass="Hidden" DataField="ID" />
05.                            <asp:BoundField HeaderText="PBI Description" DataField="PBI_x0020_Description" />
06.                            <asp:BoundField HeaderText="Code Owner" DataField="Code_x0020_Owner" />
07.                            <asp:BoundField HeaderText="Area" DataField="Product_x0020_Module_x002d_Area_" />
08.                            <%--<asp:BoundField HeaderText="" DataField="" />--%>
09.                            <asp:BoundField HeaderText="Efforts" DataField="Estimated_x0020_Work_x0020_Hours" />
10.                            <asp:BoundField HeaderText="Date" DataField="CompletedDate" />
11.                            <%--Rating Stars--%>
12.                            <asp:TemplateField HeaderText="Rating">
13.                                <ItemTemplate>
14.                                    <asp:TextBox ID="txtRating" CssClass="rating" runat="server"></asp:TextBox>
15.                                    <asp:RequiredFieldValidator ID="RFQ" ControlToValidate="txtRating" Display="Dynamic" ForeColor="Red" ValidationGroup="val" runat="server" ErrorMessage="* Required Rating."></asp:RequiredFieldValidator>
16.                                </ItemTemplate>
17.                            </asp:TemplateField>
18.
19.                            <asp:TemplateField HeaderText="Comments">
20.                                <ItemTemplate>
21.                                    <asp:TextBox ID="txtComments" CssClass="form-control" TextMode="MultiLine" runat="server"></asp:TextBox>
22.                                </ItemTemplate>
23.                            </asp:TemplateField>
24.                        </Columns>
25.                    </asp:GridView>
26.                </div>
27.                <div class="row">
28.                    <div class="col-sm-10"></div>
29.                    <div class="col-sm-2">
30.                        <asp:Button ID="btnUpdate" runat="server" ValidationGroup="val" OnClick="btnUpdate_Click" Text="Update PBI Ratings" CssClass="btn btn-primary btn-bordered waves-effect w-md waves-light" />
31.                    </div>
32.                </div>
33.            </div>
34.        </div>
35.    </div>
36.</div>
37.
38.<asp:Label ID="lblErrorMsg" runat="server" Visible="false" Text=""></asp:Label>
39.
40.<script>
41.    $(document).ready(function () {
42.
43.        //Waleed's Code
44.        var RatingResult = $(".rating").kendoRating({
45.            min: 1,
46.            max: 5,
47.            itemTemplate: $("#rating-item-template").html(),
48.            selectedTemplate: $("#rating-selected-template").html(),
49.            hoveredTemplate: $("#rating-selected-template").html(),
50.            label: {
51.                template: $("#rating-label-template").html()
52.            },
53.            //label: false,
54.            precision: "half"
55.        }).getKendoRating();
56.
57.        RatingResult.wrapper.kendoTooltip({
58.            filter: ".k-rating-item",
59.            position: "left",
60.            content: function (e) {
61.                return GetLabelText(e.target.data("value"));
62.            }
63.        });
64.        Decimal();
65.    });
66.
67.    function GetLabelText(value) {
68.        var label = "";
69.
70.        switch (value) {
71.            case 1:
72.                label = "comment 1";
73.                break;
74.            case 2:
75.                label = "comment 2";
76.                break;
77.            case 3:
78.                label = "comment 3";
79.                break;
80.            case 4:
81.                label = "comment 4";
82.                break;
83.            case 5:
84.                label = "comment 5";
85.                break;
86.        }
87.        return label;
88.    }
89.
90.    function Decimal() {
91.        var inputs = document.getElementsByClassName("rating");
92.
93.        for (var i = 0; i < inputs.length; i++) {
94.            $(inputs[i]).attr("type", "decimal");
95.        }
96.    }
97.</script>

[Misho]

Hi,

Thank you for your feedback. From your last post it's noticed that you are implementing Kendo Tooltip and Rating in Webforms project with asp:GridView. Could you please isolate your setup in a small sample runnable Webforms project with dummy data generated from the code behind (instead of the real database) for the purpose of testing where the issue could be observed and send it back so we could debug it on our side and identify the root cause for the problem?

Looking forward to hearing from you soon.

Best Regards,
Misho
Progress Telerik